:root {
  --bg: #f7fafc;
  --surface: #ffffff;
  --line: #dfe7ef;
  --line-strong: #c9d7e5;
  --text: #17213a;
  --muted: #66758d;
  --soft: #eef5f8;
  --teal: #0795a7;
  --teal-dark: #057d8c;
  --teal-soft: #e5f6f5;
  --blue: #2679ee;
  --blue-soft: #eaf2ff;
  --violet: #7f51e8;
  --violet-soft: #f1eafe;
  --orange: #f28b20;
  --orange-soft: #fff2e4;
  --red: #ff3d3d;
  --red-soft: #ffecec;
  --green: #12aa6e;
  --green-soft: #e8f8ef;
  --shadow: 0 12px 30px rgba(24, 58, 92, 0.1);
  --sidebar: 204px;
  font-family: Inter, Pretendard, "Segoe UI", "Noto Sans KR", Arial, sans-serif;
}

/* Competitor monitoring — real-data dashboard */
.monitoring-dashboard { display: grid; gap: 18px; color: #172033; }
.monitoring-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 30px; border: 1px solid #e5eaf1; border-radius: 22px; background: linear-gradient(135deg, #fff 0%, #f7fbfb 100%); box-shadow: 0 12px 34px rgba(31, 51, 73, .06); }
.monitoring-hero span { display: block; margin-bottom: 7px; color: #168879; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.monitoring-hero h1 { margin: 0; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.04em; }
.monitoring-hero p { margin: 9px 0 0; color: #697386; }
.monitoring-hero-actions { display: flex; gap: 8px; }
.monitoring-hero-actions button, .monitoring-toolbar button, .monitoring-pages button, .monitoring-mode-settings button { min-height: 38px; padding: 0 14px; border: 1px solid #dce3eb; border-radius: 11px; background: #fff; color: #334155; font-weight: 700; cursor: pointer; }
.monitoring-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.monitoring-toolbar > span { color: #7b8495; font-size: 13px; }
.monitoring-periods { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #eef2f6; }
.monitoring-periods button { min-height: 32px; border: 0; background: transparent; }
.monitoring-periods button.is-active, .monitoring-pages button.is-active, .monitoring-mode-settings button.is-active { border-color: #1d9c8d; background: #168879; color: #fff; }
.monitoring-status-strip { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)) auto; align-items: center; overflow: hidden; border: 1px solid #e5eaf1; border-radius: 17px; background: #fff; }
.monitoring-status-strip > div { display: grid; gap: 5px; padding: 17px 20px; border-right: 1px solid #eef1f5; }
.monitoring-status-strip small { color: #7a8494; }
.monitoring-status-strip strong { font-size: 20px; }
.monitoring-status-strip .has-warning strong { color: #d14c55; }
.monitoring-status-strip > a { padding: 18px; color: #168879; font-weight: 800; text-decoration: none; white-space: nowrap; }
.monitoring-results { overflow: hidden; border: 1px solid #e5eaf1; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(31, 51, 73, .04); }
.monitoring-section-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 22px 24px; border-bottom: 1px solid #edf0f4; }
.monitoring-section-head h2 { margin: 0; font-size: 20px; }
.monitoring-section-head p { margin: 6px 0 0; color: #7a8494; font-size: 13px; }
.monitoring-section-head > span { color: #168879; font-weight: 800; }
.monitoring-video-list { display: grid; }
.monitoring-video-card { border-bottom: 1px solid #edf0f4; }
.monitoring-video-card:last-child { border-bottom: 0; }
.monitoring-video-open { width: 100%; display: grid; grid-template-columns: 38px 112px minmax(0, 1fr) 120px; align-items: center; gap: 16px; padding: 15px 20px; border: 0; background: #fff; text-align: left; cursor: pointer; }
.monitoring-video-open:hover { background: #f8fbfb; }
.monitoring-rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #eef7f5; color: #168879; font-weight: 900; }
.monitoring-thumb { display: grid; place-items: center; aspect-ratio: 16/9; overflow: hidden; border-radius: 10px; background: #e8eef3; }
.monitoring-thumb img { width: 100%; height: 100%; object-fit: cover; }
.monitoring-thumb em { color: #687588; font-size: 22px; font-style: normal; font-weight: 900; }
.monitoring-copy { min-width: 0; display: grid; gap: 4px; }
.monitoring-copy small { color: #168879; font-weight: 800; }
.monitoring-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.monitoring-copy span { overflow: hidden; color: #7b8494; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.monitoring-metrics { display: grid; justify-items: end; gap: 6px; }
.monitoring-metrics strong { font-size: 15px; }
.monitoring-metrics em { padding: 4px 8px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 800; }
.monitoring-metrics em.is-ready { background: #e6f7f2; color: #0e806f; }
.monitoring-metrics em.is-waiting { background: #f1f3f6; color: #7b8494; }
.monitoring-tier-action, .monitoring-tier-state { color: #6f58b5; font-size: 10px; font-weight: 800; }
.monitoring-tier-action { text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.monitoring-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.monitoring-summary-grid article { display: grid; gap: 8px; padding: 23px; border: 1px solid #e5eaf1; border-radius: 17px; background: #fff; }
.monitoring-summary-grid small { color: #7b8494; }
.monitoring-summary-grid strong { font-size: 27px; }
.monitoring-pages { display: flex; justify-content: center; gap: 6px; padding: 18px; border-top: 1px solid #edf0f4; }
.monitoring-pages button { min-width: 36px; padding: 0 9px; }
.monitoring-empty { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 35px; border: 1px dashed #d6dde6; border-radius: 18px; background: #fbfcfd; text-align: center; }
.monitoring-empty > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #e8f5f2; color: #168879; font-size: 23px; }
.monitoring-empty strong { font-size: 18px; }
.monitoring-empty p { max-width: 440px; margin: 0; color: #7b8494; line-height: 1.6; }
.monitoring-settings { display: grid; gap: 10px; }
.monitoring-settings h2 { margin: 14px 0 3px; font-size: 16px; }
.monitoring-settings label { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid #e4e9ef; border-radius: 11px; }
.monitoring-mode-settings { display: flex; flex-wrap: wrap; gap: 8px; }
.monitoring-mode-settings p { width: 100%; margin: 3px 0 0; color: #b44a52; font-size: 12px; }
.monitoring-failed-jobs { display: grid; gap: 8px; }
.monitoring-failed-jobs > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid #f0d5d8; border-radius: 11px; background: #fff8f8; }
.monitoring-failed-jobs span { display: grid; gap: 3px; }
.monitoring-failed-jobs small { color: #9a5a61; }
.monitoring-failed-jobs button { border: 1px solid #df9ea4; border-radius: 9px; background: #fff; color: #a43d47; font-weight: 800; cursor: pointer; }

@media (max-width: 760px) {
  .monitoring-hero { padding: 22px; flex-direction: column; }
  .monitoring-toolbar { align-items: flex-start; flex-direction: column; }
  .monitoring-status-strip { grid-template-columns: repeat(2, 1fr); }
  .monitoring-status-strip > a { grid-column: 1 / -1; text-align: center; }
  .monitoring-video-open { grid-template-columns: 30px 86px minmax(150px, 1fr) 94px; min-width: 600px; }
  .monitoring-video-list { overflow-x: auto; }
  .monitoring-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

.competitor-transcript-card .competitor-question-item { grid-template-columns: 50px minmax(0,1fr) auto; align-items: start; padding: 14px; }
.competitor-transcript-card .competitor-question-item strong { font-size: 12px; }
.competitor-transcript-card .competitor-question-item em { display: block; align-self: center; color: #0a8f86; font-size: 9px; font-weight: 850; }
@media (max-width: 760px) {
  .competitor-transcript-card .competitor-question-item { grid-template-columns: 44px minmax(0,1fr); }
  .competitor-transcript-card .competitor-question-item em { display: none; }
  .competitor-question-item p { grid-template-columns: 1fr; }
}

/* 편성 팝업 가독성·선택 밀도 개선 */
.modal.cast-slot-modal { width: min(900px, calc(100vw - 40px)); max-height: min(860px, calc(100vh - 32px)); border: 1px solid rgba(30,91,78,.12); border-radius: 24px; box-shadow: 0 28px 90px rgba(17,55,49,.22); }
.cast-slot-clean-head { min-height: 116px; align-items: flex-start; padding: 27px 30px 23px; background: linear-gradient(135deg, #f9fdfb 0%, #f1f8f5 100%); }
.cast-slot-clean-head > div { display: grid; max-width: 690px; gap: 5px; }
.cast-slot-clean-head h2 { margin: 0; color: #153f38; font-size: 25px; line-height: 1.25; letter-spacing: -.035em; }
.cast-slot-clean-head .muted { margin: 2px 0 0; color: #6d827b; font-size: 12px; line-height: 1.55; }
.cast-slot-modal-eyebrow { color: #17806c; font-size: 10px; letter-spacing: .08em; }
.cast-slot-modal-tabs, .cast-live-detail-tabs { display: flex; gap: 4px; padding: 9px 26px 0; border-bottom: 1px solid #e3ece8; background: #fff; }
.cast-slot-modal-tabs button, .cast-live-detail-tabs button { position: relative; min-height: 43px; padding: 0 16px; border: 0; background: transparent; color: #7d8e88; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.cast-slot-modal-tabs button::after, .cast-live-detail-tabs button::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; content: ""; }
.cast-slot-modal-tabs button.active, .cast-live-detail-tabs button.active { color: #176b59; }
.cast-slot-modal-tabs button.active::after, .cast-live-detail-tabs button.active::after { background: #2a927c; }
.cast-slot-clean-body { padding: 0; background: #fff; }
.cast-slot-tab-panel { display: grid; gap: 20px; padding: 25px 30px 30px; }
.cast-slot-tab-panel[hidden], .cast-live-planning-section[hidden] { display: none !important; }
.cast-slot-panel-intro { display: grid; gap: 4px; }
.cast-slot-panel-intro strong { color: #1d5148; font-size: 17px; letter-spacing: -.02em; }
.cast-slot-panel-intro span { color: #84938e; font-size: 11px; }
.cast-slot-primary-grid, .cast-slot-production-grid, .cast-slot-publish-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 18px; }
.cast-slot-primary-grid .full { grid-column: 1 / -1; }
.cast-slot-primary-grid label, .cast-slot-production-grid label, .cast-slot-publish-grid label, .cast-schedule-adjustment label, .cast-slot-secondary-details label, .cast-slot-note { display: grid; gap: 7px; color: #48655e; font-size: 11px; font-weight: 850; }
.cast-slot-primary-grid label > span, .cast-slot-production-grid label > span, .cast-slot-publish-grid label > span { padding-left: 2px; }
.cast-slot-clean-body select, .cast-slot-clean-body input, .cast-slot-clean-body textarea { width: 100%; min-height: 47px; border: 1px solid #cfddd8; border-radius: 11px; padding: 10px 12px; background: #fff; color: #234a43; font: inherit; font-size: 13px; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.cast-slot-clean-body textarea { resize: vertical; line-height: 1.6; }
.cast-slot-clean-body select:focus, .cast-slot-clean-body input:focus, .cast-slot-clean-body textarea:focus { border-color: #54a28f; background: #fcfffd; box-shadow: 0 0 0 3px rgba(65,154,132,.11); }
.cast-slot-clean-body .cast-planning-intent textarea { min-height: 84px; border-color: #b8d5cc; background: #f9fcfb; font-size: 13px !important; }
.cast-slot-date-block { display: grid; grid-template-columns: minmax(170px,.85fr) minmax(0,1fr) 22px minmax(0,1fr); align-items: end; gap: 12px; padding: 17px 18px; border: 1px solid #dce9e4; border-radius: 15px; background: #f8fbfa; }
.cast-slot-date-block > div { align-self: center; display: grid; gap: 4px; }
.cast-slot-date-block > div strong { color: #235d52; font-size: 14px; }
.cast-slot-date-block > div span { color: #81918c; font-size: 10px; }
.cast-slot-date-block label { display: grid; gap: 6px; color: #5c746d; font-size: 10px; font-weight: 850; }
.cast-slot-date-block > i { align-self: center; margin-top: 18px; color: #91a39d; font-style: normal; text-align: center; }
.cast-schedule-preview { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid #bcd9d0; border-radius: 15px; background: linear-gradient(135deg,#edf8f4,#f8fcfa); }
.cast-schedule-preview > div { display: grid; gap: 4px; }
.cast-schedule-preview span { color: #71877f; font-size: 10px; }
.cast-schedule-preview strong { color: #1d6254; font-size: 14px; }
.cast-schedule-preview > b { padding: 6px 9px; border-radius: 99px; background: #d8eee6; color: #277461; font-size: 9px; }
.cast-schedule-adjustment, .cast-slot-secondary-details, .cast-derived-optional { border: 1px solid #e0e9e5; border-radius: 12px; background: #fbfdfc; }
.cast-schedule-adjustment summary, .cast-slot-secondary-details summary, .cast-derived-optional summary { padding: 13px 15px; color: #60776f; font-size: 11px; font-weight: 850; cursor: pointer; }
.cast-schedule-adjustment > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0 15px 15px; }
.cast-emergency-note { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid #efcfb0; border-radius: 14px; background: #fff8f1; }
.cast-emergency-note strong { color: #9a592b; font-size: 13px; }
.cast-emergency-note span { color: #8e725d; font-size: 11px; }
.cast-slot-match-heading { margin: 0; border: 0; padding: 0; }
.cast-slot-role-grid { gap: 11px; }
.cast-slot-role-card { min-height: 126px; border-radius: 14px; }
.cast-slot-role-card-main { min-height: 124px; gap: 7px; padding: 13px; }
.cast-slot-role-card.is-empty .cast-slot-role-card-main { min-height: 124px; }
.cast-slot-role-card.is-empty .cast-slot-role-card-main > i { width: 34px; height: 34px; }
.cast-slot-role-card.is-empty small { display: none; }
.cast-slot-selected-person { grid-template-columns: 40px minmax(0,1fr); margin-top: 4px; }
.cast-slot-selected-person > i { width: 40px; height: 40px; border-radius: 11px; }
.cast-slot-role-card-main footer { padding-top: 7px; }
.cast-slot-role-remove { bottom: 7px; }
.cast-slot-confirmed-choice { padding: 13px 15px; background: #f7faf9; }
.cast-slot-production-grid, .cast-slot-publish-grid { padding-top: 18px; border-top: 1px solid #e7eeeb; }
.cast-slot-secondary-details > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0 15px 15px; }
.cast-slot-progress-card { display: grid; gap: 17px; padding: 18px; border: 1px solid #dce7e2; border-radius: 15px; background: #f8fbfa; }
.cast-slot-progress-card > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cast-slot-progress-card > div strong { color: #2a5d53; font-size: 13px; }
.cast-slot-progress-card select { width: 190px; min-height: 40px; }
.cast-slot-note textarea { min-height: 90px; }
.cast-slot-modal .modal-foot { min-height: 73px; padding: 13px 25px; border-top: 1px solid #e3ebe8; background: #fbfdfc; }
.cast-slot-modal .modal-foot > div:first-child { opacity: .78; }
.cast-slot-modal .modal-foot button { min-height: 39px; border-radius: 10px; }

.cast-live-create-modal { width: min(900px, calc(100vw - 40px)); border-radius: 24px; }
.cast-live-create-modal .modal-head, .cast-derived-modal .modal-head { padding: 26px 29px; }
.cast-live-create-body { padding: 24px 29px 29px; }
.cast-live-create-body > section { padding: 0; border: 0; }
.cast-live-create-body > section + section { margin-top: 24px; border-top: 1px solid #e7eeeb; padding-top: 24px; }
.cast-live-preset-grid { gap: 12px; }
.cast-live-preset-card { min-height: 128px; border-radius: 15px; padding: 16px; }
.cast-live-preset-card p { line-height: 1.5; }
.cast-live-create-schedule { gap: 13px; }
.cast-live-create-schedule label, .cast-live-detail-grid label { font-size: 11px; }
.cast-live-create-schedule input, .cast-live-detail-grid input { min-height: 46px; border-radius: 11px; font-size: 13px; }
.modal-backdrop:has(.cast-live-drawer) { place-items: center; padding: 20px; }
.cast-live-drawer { width: min(860px, calc(100vw - 40px)); height: auto; max-height: calc(100vh - 40px); border-radius: 24px; box-shadow: 0 30px 95px rgba(15,48,57,.25); }
.cast-live-drawer .cast-live-detail-head { min-height: 118px; padding: 26px 30px; }
.cast-live-detail-tabs { padding-inline: 25px; }
.cast-live-detail-body { padding: 0; }
.cast-live-planning-section { min-height: 390px; padding: 28px 30px 32px; border: 0; }
.cast-live-detail-grid { gap: 16px; }
.cast-live-fixed-cast, .cast-live-guest-grid { gap: 12px; }
.cast-live-person-card, .cast-live-add-guest { min-height: 128px; border-radius: 15px; }
.cast-live-agenda-card { border-radius: 14px; padding: 14px; }
.cast-live-management { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; border-top: 1px solid #e4ece8; padding-top: 20px; }
.cast-live-drawer .modal-foot { min-height: 72px; padding: 13px 26px; }

.cast-derived-modal { width: min(720px, calc(100vw - 40px)); border-radius: 24px; }
.cast-derived-form-grid { gap: 16px; padding: 24px 28px 29px; }
.cast-derived-form-grid label { font-size: 11px; }
.cast-derived-form-grid input, .cast-derived-form-grid textarea { min-height: 46px; border-radius: 11px; font-size: 13px; }
.cast-derived-choice { padding: 14px; border: 1px solid #e0e9e5; border-radius: 13px; background: #fafcfb; }
.cast-derived-optional > div { display: grid; gap: 13px; padding: 0 14px 14px; }

@media (max-width: 720px) {
  .modal.cast-slot-modal, .cast-live-create-modal, .cast-live-drawer, .cast-derived-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 18px; }
  .cast-slot-clean-head, .cast-live-drawer .cast-live-detail-head { min-height: 100px; padding: 21px 20px; }
  .cast-slot-clean-head h2 { font-size: 21px; }
  .cast-slot-modal-tabs, .cast-live-detail-tabs { overflow-x: auto; padding-inline: 12px; }
  .cast-slot-modal-tabs button, .cast-live-detail-tabs button { flex: 0 0 auto; padding-inline: 12px; }
  .cast-slot-tab-panel, .cast-live-planning-section { padding: 21px 18px 25px; }
  .cast-slot-primary-grid, .cast-slot-production-grid, .cast-slot-publish-grid, .cast-slot-secondary-details > div { grid-template-columns: 1fr; }
  .cast-slot-primary-grid .full { grid-column: auto; }
  .cast-slot-date-block { grid-template-columns: 1fr 1fr; }
  .cast-slot-date-block > div { grid-column: 1 / -1; }
  .cast-slot-date-block > i { display: none; }
  .cast-schedule-preview { grid-template-columns: 1fr 1fr; }
  .cast-schedule-preview > b { grid-column: 1 / -1; width: fit-content; }
  .cast-schedule-adjustment > div { grid-template-columns: 1fr; }
  .cast-slot-role-grid { grid-template-columns: 1fr; }
  .cast-slot-confirmed-choice, .cast-live-management { align-items: stretch; flex-direction: column; }
  .cast-slot-modal .modal-foot { align-items: stretch; flex-direction: column-reverse; }
  .cast-slot-modal .modal-foot > div { justify-content: flex-end; }
}

/* Weekly planning board: fixed card rhythm and post-registration upload scheduling. */
.cast-planning-week > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.cast-planning-card,
.cast-planning-live-card,
.cast-planning-placeholder {
  min-height: 218px;
  height: 100%;
  box-sizing: border-box;
}
.cast-planning-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  cursor: default;
}
.cast-planning-card[data-cast-schedule-slot] > button {
  cursor: default;
}
.cast-planning-card > button dl {
  align-content: start;
  min-height: 72px;
}
.cast-planning-card > button dd.is-empty {
  color: #2f7362;
  font-weight: 900;
}
.cast-planning-card > footer > div {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}
.cast-planning-card > footer > div button:first-child {
  border-color: #d8e2de;
  background: #fff;
  color: #61736d;
}
.cast-planning-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  border: 1px dashed #c7d6d0;
  border-radius: 13px;
  background: #fbfdfc;
  color: #6f827b;
  font: inherit;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.cast-planning-placeholder:hover {
  border-color: #6e9f92;
  background: #f5faf8;
  color: #245f53;
}
.cast-planning-placeholder i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #c8d8d2;
  border-radius: 50%;
  background: #fff;
  color: #3d7567;
  font-size: 17px;
  font-style: normal;
}
.cast-planning-placeholder strong { font-size: 11px; }
.cast-planning-placeholder span { color: #91a09b; font-size: 9px; }
.cast-planning-live-card > button {
  min-height: 100%;
  box-sizing: border-box;
}
.modal.cast-upload-schedule-modal {
  width: min(650px, calc(100vw - 32px));
  border-radius: 7px;
}
.cast-upload-schedule-body {
  display: grid;
  gap: 18px;
  padding: 22px 26px 26px;
}
.cast-upload-card-summary {
  display: grid;
  gap: 5px;
  border: 1px solid #dbe5e1;
  border-left: 4px solid var(--cast-category-color, #327869);
  border-radius: 8px;
  padding: 15px 17px;
  background: #fafcfb;
}
.cast-upload-card-summary > span { color: #347264; font-size: 9px; font-weight: 900; }
.cast-upload-card-summary > strong { color: #203f37; font-size: 15px; }
.cast-upload-card-summary > p { margin: 0; color: #4e655f; font-size: 12px; line-height: 1.55; }
.cast-upload-card-summary > small { color: #81908b; font-size: 9px; }
.cast-upload-date-section { display: grid; gap: 12px; }
.cast-upload-date-section > header { display: grid; gap: 3px; }
.cast-upload-date-section > header strong { color: #294a42; font-size: 13px; }
.cast-upload-date-section > header small { color: #7f8e89; font-size: 10px; }
.cast-upload-schedule-modal .cast-slot-date-block { margin: 0; }
.cast-upload-schedule-modal .cast-schedule-preview { margin: 0; }
.cast-upload-help { color: #7b8c86; font-size: 9px; }

@media (max-width: 1180px) {
  .cast-planning-week > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cast-planning-week > div { grid-template-columns: 1fr; }
  .cast-planning-card, .cast-planning-live-card, .cast-planning-placeholder { min-height: 190px; }
  .cast-upload-schedule-body { padding-inline: 18px; }
}

/* 경쟁 영상 · 첫 50초 오프닝 분석 */
.competitor-opening-analysis,
.competitor-opening-report {
  border: 1px solid #d8e3ea;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(30, 55, 76, .07);
}
.competitor-opening-analysis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 150px;
  padding: 28px 30px;
  background: linear-gradient(135deg, #f2fbf9 0%, #fff 58%, #f3f7ff 100%);
}
.competitor-opening-empty-copy span,
.competitor-opening-report header span {
  color: #078b83;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}
.competitor-opening-empty-copy h2,
.competitor-opening-report h2 { margin: 8px 0 7px; color: #11253e; font-size: 22px; letter-spacing: -.04em; }
.competitor-opening-empty-copy p { max-width: 620px; margin: 0; color: #607187; font-size: 13px; line-height: 1.7; }
.competitor-opening-analysis .primary-button { min-width: 138px; min-height: 46px; font-size: 13px; white-space: nowrap; }
.competitor-opening-loader { display: flex; gap: 7px; padding: 12px 18px; }
.competitor-opening-loader i { width: 8px; height: 8px; border-radius: 50%; background: #0b9c91; animation: competitor-opening-pulse 1.1s infinite; }
.competitor-opening-loader i:nth-child(2) { animation-delay: .14s; }
.competitor-opening-loader i:nth-child(3) { animation-delay: .28s; }
@keyframes competitor-opening-pulse { 50% { opacity: .25; transform: translateY(-4px); } }
.competitor-opening-report { overflow: hidden; }
.competitor-opening-report > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px 18px; }
.competitor-opening-report > header h2 { margin-bottom: 0; }
.competitor-opening-lead { display: grid; gap: 8px; margin: 0 28px 22px; padding: 21px 23px; border-radius: 16px; background: #102841; color: #fff; }
.competitor-opening-lead small { color: #74dfd1; font-size: 10px; font-weight: 900; }
.competitor-opening-lead strong { font-size: 17px; line-height: 1.6; letter-spacing: -.025em; }
.competitor-opening-key-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e2e9ee; border-bottom: 1px solid #e2e9ee; }
.competitor-opening-key-grid section { min-width: 0; padding: 22px 24px; }
.competitor-opening-key-grid section + section { border-left: 1px solid #e2e9ee; }
.competitor-opening-key-grid small,
.competitor-opening-bottom-grid small,
.competitor-opening-section-title small { color: #078b83; font-size: 10px; font-weight: 900; }
.competitor-opening-key-grid p { margin: 8px 0 0; color: #263b52; font-size: 13px; font-weight: 700; line-height: 1.65; }
.competitor-opening-timeline { padding: 26px 28px 8px; }
.competitor-opening-section-title h3 { margin: 5px 0 18px; color: #12263e; font-size: 17px; }
.competitor-opening-timeline > article { display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(150px, .55fr); gap: 18px; align-items: start; padding: 17px 0; border-top: 1px solid #e6ecef; }
.competitor-opening-timeline time { color: #0a8f86; font-size: 12px; font-weight: 900; }
.competitor-opening-timeline strong { color: #182b42; font-size: 14px; }
.competitor-opening-timeline p { margin: 6px 0; color: #354a60; font-size: 13px; line-height: 1.6; }
.competitor-opening-timeline article small { color: #748499; font-size: 11px; line-height: 1.55; }
.competitor-opening-timeline em { border-radius: 10px; padding: 10px 12px; background: #f1f7f7; color: #396560; font-size: 11px; font-style: normal; font-weight: 800; line-height: 1.5; }
.competitor-opening-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 28px 27px; }
.competitor-opening-bottom-grid section { border: 1px solid #dde7eb; border-radius: 15px; padding: 19px 20px; background: #fbfcfd; }
.competitor-opening-bottom-grid ul { margin: 10px 0 0; padding-left: 18px; color: #33495f; font-size: 12px; line-height: 1.75; }
.competitor-opening-bottom-grid strong { display: block; margin-top: 10px; color: #182e46; font-size: 14px; line-height: 1.65; }
.competitor-opening-note { margin: -10px 28px 24px; color: #7b8795; font-size: 10px; }

@media (max-width: 760px) {
  .competitor-opening-analysis { align-items: flex-start; flex-direction: column; padding: 23px; }
  .competitor-opening-key-grid,
  .competitor-opening-bottom-grid { grid-template-columns: 1fr; }
  .competitor-opening-key-grid section + section { border-left: 0; border-top: 1px solid #e2e9ee; }
  .competitor-opening-timeline > article { grid-template-columns: 66px minmax(0, 1fr); }
  .competitor-opening-timeline em { grid-column: 2; }
}

/* Reusable LIVE type cards */
.cast-live-preset-card { padding: 0; }
.cast-live-preset-main { display: grid; width: 100%; min-height: 150px; align-content: start; gap: 8px; border: 0; padding: 20px 20px 54px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-live-preset-main > span:not(.cast-preset-icon) { color: #167b9a; font-size: 13px; font-weight: 900; }
.cast-live-preset-main > strong { color: #183f49; font-size: 17px; line-height: 1.35; }
.cast-live-preset-main > p { margin: 0; color: #71868c; font-size: 13px; line-height: 1.5; }
.cast-live-preset-actions { position: absolute; right: 13px; bottom: 13px; display: flex; align-items: center; gap: 6px; }
.cast-live-preset-actions i, .cast-live-preset-actions button { min-height: 29px; border-radius: 8px; padding: 0 9px; font: inherit; font-size: 11px; font-style: normal; font-weight: 900; }
.cast-live-preset-actions i { display: inline-flex; align-items: center; background: #eef2f3; color: #718186; }
.cast-live-preset-card.selected .cast-live-preset-actions i { background: #256f82; color: #fff; }
.cast-live-preset-actions button { border: 1px solid #a9bdc3; background: #fff; color: #2d6574; cursor: pointer; }
.cast-live-preset-actions button:hover { border-color: #397d8e; background: #edf7f9; }
.cast-live-preset-actions button.is-delete { border-color: #efb4bc; color: #bd3043; }
.cast-live-preset-actions button.is-delete:hover { background: #fff1f3; }
.cast-live-preset-card.is-new { border-style: dashed; background: #f9fbfb; }
.cast-live-preset-card.is-new .cast-live-preset-main { place-items: center; align-content: center; padding-bottom: 20px; text-align: center; }
.cast-live-type-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cast-live-type-editor-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.cast-live-type-editor-head strong { color: #4e2730; font-size: 16px; }
.cast-live-type-editor-head button { border: 0; background: transparent; color: #8a5962; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.cast-live-type-editor label.full { grid-column: 1 / -1; }
.cast-live-type-editor textarea { min-height: 72px; resize: vertical; border: 1px solid #dca5ad; border-radius: 10px; padding: 12px 14px; background: #fff; color: #302226; font: inherit; font-size: 14px; font-weight: 750; line-height: 1.45; }
@media (max-width: 760px) {
  .cast-live-type-editor { grid-template-columns: 1fr; }
  .cast-live-type-editor label.full, .cast-live-type-editor-head, .cast-live-type-editor p { grid-column: auto; }
}

.dashboard-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 0 8px 18px;
}

.dashboard-hero h1 {
  font-size: 28px;
  letter-spacing: 0;
}

.dashboard-hero p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 800;
}

#dashboardPage .summary-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

#dashboardPage .summary-card {
  border-radius: 8px;
  gap: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 22px rgba(24, 58, 92, 0.06);
}

#dashboardPage .summary-icon {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 20px;
}

#dashboardPage .summary-card p {
  font-size: 13px;
  word-break: keep-all;
}

#dashboardPage .summary-card small {
  font-size: 11px;
  word-break: keep-all;
}

#dashboardPage .summary-card strong {
  font-size: 28px;
}

.section-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.sidebar,
body.recruiting-mode .sidebar {
  border-right: 0;
  background: linear-gradient(180deg, #1b2b3d 0%, #20364a 54%, #17283a 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.logo,
body.recruiting-mode .logo {
  color: #f8fbff;
}

.nav-item,
body.recruiting-mode .nav-item {
  color: #d8e4f0;
}

.nav-item.active,
body.recruiting-mode .nav-item.active {
  color: #eaffff;
  background: linear-gradient(90deg, rgba(7, 149, 167, 0.9), rgba(7, 149, 167, 0.46));
}

body.recruiting-mode .nav-item-muted {
  color: #b7c6d6;
}

.collapse-button,
body.recruiting-mode .collapse-button {
  color: #d8e4f0;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.sidebar .nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.96;
}

.recruiting-page {
  padding: 28px 28px 40px;
  background: #f8fafc;
}

.recruiting-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
}

.recruiting-head h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #111827;
  font-size: 26px;
  font-weight: 950;
}

.recruiting-head h1 span {
  color: #7c8ba1;
  font-size: 20px;
}

.recruiting-summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1d2a3d;
  font-size: 15px;
  font-weight: 950;
}

.recruiting-summary-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.recruiting-summary-toggle i {
  position: relative;
  width: 54px;
  height: 30px;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.recruiting-summary-toggle i::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.22);
  transition: transform 0.16s ease;
}

.recruiting-summary-toggle input:checked + i {
  background: var(--teal);
}

.recruiting-summary-toggle input:checked + i::before {
  transform: translateX(24px);
}

.recruiting-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.recruiting-summary-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 120px;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  padding: 18px 16px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(21, 38, 64, 0.05);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.recruiting-summary-card:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 149, 167, 0.28);
  box-shadow: 0 16px 32px rgba(21, 38, 64, 0.1);
}

.recruiting-summary-card:focus-visible {
  outline: 3px solid rgba(7, 149, 167, 0.2);
  outline-offset: 2px;
}

.recruiting-summary-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  font-size: 29px;
  font-weight: 950;
}

.recruiting-summary-card.teal .recruiting-summary-icon { color: var(--teal); background: #e7f8f9; }
.recruiting-summary-card.red .recruiting-summary-icon { color: #dc2626; background: #fee2e2; }
.recruiting-summary-card.blue .recruiting-summary-icon { color: var(--blue); background: #edf4ff; }
.recruiting-summary-card.orange .recruiting-summary-icon { color: var(--orange); background: #fff1e3; }
.recruiting-summary-card.green .recruiting-summary-icon { color: #0f9f6e; background: #e8f8ef; }
.recruiting-summary-card.violet .recruiting-summary-icon { color: var(--violet); background: #f2eafe; }

.recruiting-summary-card p,
.recruiting-summary-card em {
  margin: 0;
  color: #65748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.recruiting-summary-card strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 6px 0;
  color: #111827;
  font-size: 28px;
  font-weight: 950;
}

.recruiting-summary-card small {
  font-size: 14px;
}

.recruiting-summary-card-arrow {
  position: absolute;
  top: 12px;
  right: 13px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 50%;
  color: #64748b;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 950;
  transition: transform 0.16s ease, color 0.16s ease;
}

.recruiting-summary-card:hover .recruiting-summary-card-arrow {
  transform: translate(2px, -2px);
  color: var(--teal-dark);
}

.recruiting-summary-list-modal {
  --summary-accent: #0795a7;
  --summary-soft: #e9f8fa;
  --summary-line: #bde8ed;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1080px, calc(100vw - 48px));
  max-height: min(820px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid var(--summary-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.recruiting-summary-list-modal.tone-red { --summary-accent: #dc2626; --summary-soft: #fff1f2; --summary-line: #fecaca; }
.recruiting-summary-list-modal.tone-blue { --summary-accent: #2563eb; --summary-soft: #eff6ff; --summary-line: #bfdbfe; }
.recruiting-summary-list-modal.tone-orange { --summary-accent: #d97706; --summary-soft: #fff7ed; --summary-line: #fed7aa; }
.recruiting-summary-list-modal.tone-green { --summary-accent: #059669; --summary-soft: #ecfdf5; --summary-line: #a7f3d0; }
.recruiting-summary-list-modal.tone-violet { --summary-accent: #7c3aed; --summary-soft: #f5f3ff; --summary-line: #ddd6fe; }

.recruiting-summary-list-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--summary-line);
  background: linear-gradient(135deg, var(--summary-soft) 0%, #ffffff 76%);
}

.recruiting-summary-list-hero-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  color: #ffffff;
  background: var(--summary-accent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--summary-accent) 26%, transparent);
  font-size: 28px;
  font-weight: 950;
}

.recruiting-summary-list-heading {
  min-width: 0;
}

.recruiting-summary-list-heading > span {
  display: block;
  margin-bottom: 5px;
  color: var(--summary-accent);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.recruiting-summary-list-heading h2,
.recruiting-summary-list-heading p {
  margin: 0;
}

.recruiting-summary-list-heading h2 {
  color: #172033;
  font-size: 23px;
}

.recruiting-summary-list-heading p {
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.recruiting-summary-list-count {
  min-width: 104px;
  border: 1px solid var(--summary-line);
  border-radius: 14px;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.78);
  text-align: center;
}

.recruiting-summary-list-count small,
.recruiting-summary-list-count strong {
  display: block;
}

.recruiting-summary-list-count small {
  color: #738197;
  font-size: 10px;
  font-weight: 850;
}

.recruiting-summary-card p {
  white-space: nowrap;
}

.recruiting-summary-list-count strong {
  margin-top: 2px;
  color: var(--summary-accent);
  font-size: 25px;
  line-height: 1;
}

.recruiting-summary-list-count em {
  margin-left: 3px;
  font-size: 11px;
  font-style: normal;
}

.recruiting-summary-list-close {
  align-self: start;
  width: 34px;
  height: 34px;
  border-color: rgba(100, 116, 139, 0.18);
  background: rgba(255, 255, 255, 0.8);
}

.recruiting-summary-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 10px 22px;
  border-bottom: 1px solid #e8edf3;
  background: #ffffff;
}

.recruiting-summary-list-toolbar strong {
  color: #334155;
  font-size: 12px;
}

.recruiting-summary-list-toolbar span {
  color: #8290a4;
  font-size: 11px;
  font-weight: 750;
}

.recruiting-summary-list-body {
  min-height: 260px;
  padding: 18px;
  overflow-y: auto;
  background: #f6f8fb;
  overscroll-behavior: contain;
}

.recruiting-summary-people-grid,
.recruiting-summary-duplicate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.recruiting-summary-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  padding: 13px 14px;
  color: #1f2937;
  background: #ffffff;
  box-shadow: 0 7px 18px rgba(30, 41, 59, 0.045);
  text-align: left;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.recruiting-summary-person:hover,
.recruiting-summary-person:focus-visible {
  transform: translateY(-1px);
  border-color: var(--summary-line);
  box-shadow: 0 12px 24px rgba(30, 41, 59, 0.09);
  outline: none;
}

.recruiting-summary-person-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--summary-accent);
  background: var(--summary-soft);
  font-size: 14px;
  font-weight: 950;
}

.recruiting-summary-person-copy,
.recruiting-summary-person-name {
  display: block;
  min-width: 0;
}

.recruiting-summary-person-name strong,
.recruiting-summary-person-name em {
  display: inline;
}

.recruiting-summary-person-name strong {
  margin-right: 7px;
  color: #172033;
  font-size: 13px;
}

.recruiting-summary-person-name em {
  color: #7a8799;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.recruiting-summary-person-copy > small {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #8a96a8;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-summary-person-side {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.recruiting-summary-person-side > small {
  color: #8b98aa;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.recruiting-summary-person-side i {
  color: var(--summary-accent);
  font-style: normal;
}

.recruiting-summary-duplicate-group {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--summary-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(127, 29, 29, 0.05);
}

.recruiting-summary-duplicate-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--summary-line);
  background: var(--summary-soft);
}

.recruiting-summary-duplicate-group > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.recruiting-summary-duplicate-group > header span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  color: #ffffff;
  background: var(--summary-accent);
  font-size: 11px;
  font-weight: 950;
}

.recruiting-summary-duplicate-group > header strong {
  overflow: hidden;
  color: #3f1d1d;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-summary-duplicate-group > header em {
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--summary-accent);
  background: #ffffff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.recruiting-summary-duplicate-group > div {
  display: grid;
  gap: 1px;
  background: #eef2f6;
}

.recruiting-summary-duplicate-group .recruiting-summary-person {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.recruiting-summary-list-empty {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 34px;
  text-align: center;
}

.recruiting-summary-list-empty > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 18px;
  color: var(--summary-accent);
  background: var(--summary-soft);
  font-size: 27px;
  font-weight: 950;
}

.recruiting-summary-list-empty strong {
  color: #263247;
  font-size: 16px;
}

.recruiting-summary-list-empty p {
  margin: 7px 0 0;
  color: #8190a4;
  font-size: 12px;
  font-weight: 700;
}

.recruiting-summary-list-foot {
  justify-content: space-between;
  padding: 13px 20px;
  background: #ffffff;
}

.recruiting-summary-list-foot > span {
  color: #8a96a8;
  font-size: 10px;
  font-weight: 750;
}

.recruiting-summary-list-foot .primary-button {
  min-width: 82px;
}

@media (max-width: 760px) {
  .recruiting-summary-list-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 14px;
  }

  .recruiting-summary-list-hero {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    padding: 18px;
  }

  .recruiting-summary-list-hero-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 22px;
  }

  .recruiting-summary-list-count {
    display: none;
  }

  .recruiting-summary-list-heading h2 {
    font-size: 19px;
  }

  .recruiting-summary-list-heading p,
  .recruiting-summary-list-toolbar span,
  .recruiting-summary-list-foot > span {
    display: none;
  }

  .recruiting-summary-list-toolbar {
    min-height: 40px;
    padding: 8px 14px;
  }

  .recruiting-summary-people-grid,
  .recruiting-summary-duplicate-grid {
    grid-template-columns: 1fr;
  }

  .recruiting-summary-person {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .recruiting-summary-person-side {
    grid-column: 2;
    justify-items: start;
    grid-auto-flow: column;
    align-items: center;
  }
}

.recruiting-list-card {
  overflow: visible;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(21, 38, 64, 0.05);
}

.recruiting-tabs-row {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(70px, 1fr) fit-content(calc(100% - clamp(36px, 11vw, 190px) - 86px)) clamp(36px, 11vw, 190px);
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 58px;
  border-bottom: 1px solid #e6edf4;
  padding: 7px 8px;
  overflow: visible;
}

.recruiting-tabs-row > .recruiting-status-tabs {
  grid-area: 1 / 1;
}

.recruiting-tabs-row > .recruiting-tools {
  grid-area: 1 / 2;
}

.recruiting-tabs-row > .recruiting-owner-filters {
  grid-area: 1 / 3;
  min-width: 0;
}

.recruiting-tabs-row .recruiting-search-label {
  position: relative;
  width: 100%;
  min-width: 0;
}

.recruiting-tabs-row .recruiting-search-label input {
  width: 100%;
  min-width: 0;
}

.recruiting-status-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  width: auto;
  min-height: 46px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-y;
}

.recruiting-status-tabs::-webkit-scrollbar {
  display: none;
}

.recruiting-status-tabs > * {
  flex-shrink: 0;
}

.recruiting-status-tabs.is-dragging,
.recruiting-status-tabs.is-dragging *,
.recruiting-status-extra.is-dragging,
.recruiting-status-extra.is-dragging *,
.recruiting-tools.is-dragging,
.recruiting-tools.is-dragging * {
  cursor: grabbing;
  user-select: none;
}

.recruiting-status-tabs button,
.recruiting-filter-trigger {
  height: 38px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #56657a;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.recruiting-status-tabs button.active,
.recruiting-completed-list-button.active,
.recruiting-filter-menu.active .recruiting-filter-trigger,
.recruiting-filter-menu.open .recruiting-filter-trigger {
  color: #111827;
  border-color: var(--teal);
}

.recruiting-status-tabs button span {
  margin-left: 3px;
  border-radius: 999px;
  padding: 1px 5px;
  color: var(--teal);
  background: #e9f8fa;
  font-weight: 800;
}

.recruiting-completed-list-button {
  flex: 0 0 auto;
  height: 32px !important;
  border: 1px solid rgba(22, 163, 74, 0.48) !important;
  border-radius: 999px;
  padding: 0 12px !important;
  color: #166534 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(187, 247, 208, 0.8), 0 5px 14px rgba(22, 163, 74, 0.08);
  font-weight: 700 !important;
}

.recruiting-completed-list-button.active {
  color: #14532d !important;
  border-color: #16a34a !important;
  background: #dcfce7 !important;
}

.recruiting-completed-list-button span {
  color: #15803d !important;
  background: #dcfce7 !important;
}

.recruiting-status-choices {
  display: flex;
  align-items: center;
  flex: 0 0 clamp(170px, 20vw, 260px);
  width: clamp(170px, 20vw, 260px);
  min-width: 0;
  gap: 5px;
}

.recruiting-status-choices > button,
.recruiting-status-extra > button {
  flex-shrink: 0;
}

.recruiting-status-window {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 160px;
  height: 34px;
  border: 1px solid #c4e4e6;
  border-radius: 9px;
  background: linear-gradient(180deg, #f6fcfc, #edf8f9);
  box-shadow: inset 0 1px 0 #fff;
}

.recruiting-status-window::after {
  position: absolute;
  inset: 0 0 0 auto;
  width: 16px;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(90deg, transparent, #edf8f9);
  pointer-events: none;
  content: "";
}

.recruiting-drag-hint {
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #cee6e8;
  border-radius: 5px;
  padding: 1px 4px;
  color: #417d83;
  background: #f8fdfd;
  font-size: 9px;
  font-weight: 600;
  line-height: 12px;
  pointer-events: none;
}

.recruiting-drag-hint b {
  font-size: 12px;
  line-height: 10px;
}

.recruiting-status-window:has(.is-dragging) {
  border-color: #60b6bd;
  box-shadow: 0 0 0 2px #0795a710;
}

.recruiting-status-extra {
  display: none;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  opacity: 0;
}

.recruiting-status-extra.expanded {
  display: inline-flex;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 32px;
  border-radius: 8px;
  opacity: 1;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  white-space: nowrap;
}

.recruiting-status-extra::-webkit-scrollbar {
  display: none;
}

.recruiting-status-window .recruiting-status-extra > button {
  height: 32px;
  padding-top: 4px;
}

.recruiting-status-expand {
  position: relative;
  width: 26px;
  min-width: 26px;
  height: 26px !important;
  border: 1px solid rgba(7, 149, 167, 0.42) !important;
  border-radius: 999px;
  background: linear-gradient(180deg, #f2fdff 0%, #dff8fb 100%) !important;
  box-shadow: 0 4px 10px rgba(7, 149, 167, 0.16);
}

.recruiting-status-expand i {
  position: absolute;
  inset: 0;
  display: block;
}

.recruiting-status-expand i::before,
.recruiting-status-expand i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 2px;
  border-radius: 999px;
  background: var(--teal-dark);
  transform-origin: right center;
}

.recruiting-status-expand i::before {
  transform: translate(-46%, -50%) rotate(42deg);
}

.recruiting-status-expand i::after {
  transform: translate(-46%, -50%) rotate(-42deg);
}

.recruiting-status-expand.expanded i {
  transform: rotate(180deg);
}

.recruiting-status-expand:hover {
  border-color: rgba(7, 149, 167, 0.72) !important;
  background: #d9f7fb !important;
  box-shadow: 0 5px 13px rgba(7, 149, 167, 0.22);
}

.recruiting-completed-list {
  display: grid;
  gap: 12px;
  max-height: min(68vh, 680px);
  overflow-y: auto;
}

.modal.recruiting-completed-modal {
  position: relative;
  overflow: hidden;
  width: min(920px, calc(100vw - 48px));
}

.recruiting-completed-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.recruiting-completed-modal-title h2 {
  flex: 0 0 auto;
}

.recruiting-completed-channel-filters {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.recruiting-completed-channel-filters button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  border: 1px solid #d8e3ec;
  border-radius: 999px;
  padding: 0 9px;
  color: var(--channel-color, #25324a);
  background: var(--channel-bg, #ffffff);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.recruiting-completed-channel-filters button.active {
  border-color: rgba(7, 149, 167, 0.62);
  box-shadow: 0 0 0 3px rgba(7, 149, 167, 0.12);
}

.recruiting-completed-channel-filters button span {
  min-width: 18px;
  border-radius: 999px;
  padding: 2px 5px;
  color: #17213a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  text-align: center;
}

.recruiting-completed-card {
  display: grid;
  gap: 11px;
  border: 2px solid #b8c9d8;
  border-radius: 8px;
  padding: 13px;
  background: #fafdff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.recruiting-completed-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.recruiting-completed-card-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.recruiting-completed-card-tools button:disabled {
  opacity: 0.58;
  cursor: default;
}

.recruiting-completed-card-head strong {
  display: block;
  color: #17213a;
  font-size: 15px;
  font-weight: 950;
}

.recruiting-completed-card-head span:not(.recruiting-status) {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.recruiting-completed-card-detail > dl {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.recruiting-completed-card-detail > dl div {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 190px;
  border: 1px solid #cfdde8;
  border-radius: 7px;
  padding: 7px 9px;
  background: #ffffff;
}

.recruiting-completed-card dt {
  color: #7b8798;
  font-size: 11px;
  font-weight: 800;
}

.recruiting-completed-card dd {
  margin: 3px 0 0;
  color: #22304a;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
}

.recruiting-completed-card p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.recruiting-completed-card-detail {
  display: grid;
  gap: 10px;
}

.recruiting-completed-card-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.recruiting-completed-card-notes section {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid #cfdde8;
  border-radius: 7px;
  padding: 10px;
  background: #ffffff;
}

.recruiting-completed-card-notes h3 {
  margin: 0;
  color: #17213a;
  font-size: 13px;
  font-weight: 850;
}

.recruiting-completed-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recruiting-completed-note-head .small-button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 11px;
}

.recruiting-completed-card-notes p,
.recruiting-completed-card-log p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recruiting-completed-progress-open {
  display: grid;
  gap: 7px;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.recruiting-completed-progress-open:hover .recruiting-completed-card-log,
.recruiting-completed-progress-open:focus-visible .recruiting-completed-card-log {
  border-color: rgba(7, 149, 167, 0.5);
  box-shadow: 0 0 0 3px rgba(7, 149, 167, 0.1);
}

.recruiting-completed-card-notes .recruiting-progress-history-empty {
  padding: 10px;
  font-size: 12px;
}

.recruiting-completed-card-log {
  display: grid;
  gap: 5px;
  border: 1px solid #dce7ef;
  border-radius: 7px;
  padding: 8px;
  background: #fbfdff;
}

.recruiting-completed-card-log strong {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--teal-dark);
  background: #e9f8fa;
  font-size: 11px;
  font-weight: 850;
}

.recruiting-completed-progress-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  background: rgba(15, 23, 42, 0.22);
}

.recruiting-completed-progress-popup {
  position: absolute;
  z-index: 21;
  top: 64px;
  right: 24px;
  width: min(560px, calc(100% - 48px));
  max-height: calc(100% - 96px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #bdd1df;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.24);
}

.recruiting-completed-progress-popup-head,
.recruiting-completed-progress-popup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #dbe6ee;
}

.recruiting-completed-progress-popup-head strong {
  display: block;
  color: #17213a;
  font-size: 16px;
  font-weight: 900;
}

.recruiting-completed-progress-popup-head span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.recruiting-completed-progress-popup-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  background: #f8fbfd;
}

.recruiting-completed-progress-popup-foot {
  justify-content: flex-end;
  border-top: 1px solid #dbe6ee;
  border-bottom: 0;
  background: #ffffff;
}

.recruiting-completed-archive-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.recruiting-completed-archive-summary div {
  min-width: 0;
}

.recruiting-completed-archive-summary .full {
  grid-column: 1 / -1;
}

.recruiting-completed-archive-summary dt {
  color: #7b8798;
  font-size: 11px;
  font-weight: 800;
}

.recruiting-completed-archive-summary dd {
  margin: 3px 0 0;
  color: #22304a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recruiting-completed-video-wrap {
  position: relative;
  display: inline-flex;
}

.recruiting-completed-video-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 36px;
  height: 28px;
  border: 1px solid #fecaca;
  border-radius: 7px;
  padding: 0 8px;
  color: #b91c1c;
  background: #fff5f5;
  text-decoration: none;
}

.recruiting-completed-video-button .youtube-icon {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 13px;
  border-radius: 4px;
  background: #ff0033;
  box-shadow: 0 3px 8px rgba(255, 0, 51, 0.18);
}

.recruiting-completed-video-button .youtube-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 0;
  height: 0;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 6px solid #ffffff;
}

.recruiting-completed-video-button em {
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.recruiting-completed-video-preview {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: none;
  width: min(340px, calc(100vw - 44px));
  max-height: 360px;
  overflow: auto;
  border: 1px solid #b8c9d8;
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

.recruiting-completed-video-preview[hidden] {
  display: none !important;
}

.recruiting-completed-video-preview:not([hidden]) {
  display: grid;
  gap: 8px;
}

.small-button {
  min-height: 28px;
  border-radius: 7px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 950;
}

.recruiting-filter-menu {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
}

.recruiting-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 170px;
  min-width: 0;
  cursor: pointer;
}

.recruiting-filter-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid #718096;
  border-bottom: 1.5px solid #718096;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.16s ease;
}

.recruiting-filter-menu.open .recruiting-filter-trigger::after {
  transform: translateY(2px) rotate(225deg);
}

.recruiting-filter-trigger strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
}

.recruiting-filter-menu-list {
  position: fixed;
  top: var(--recruiting-filter-popover-top, 0);
  left: var(--recruiting-filter-popover-left, 0);
  z-index: 10020;
  display: grid;
  gap: 4px;
  width: var(--recruiting-filter-popover-width, 176px);
  min-width: 176px;
  max-height: min(360px, calc(100vh - 20px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(21, 38, 64, 0.14);
}

.recruiting-filter-menu-list::-webkit-scrollbar {
  width: 8px;
}

.recruiting-filter-menu-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #b6c8d8;
}

.recruiting-filter-menu-list[hidden] {
  display: none;
}

.recruiting-filter-menu-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 8px;
  text-align: left;
}

.recruiting-filter-menu-list button.active {
  border-color: rgba(7, 149, 167, 0.26);
  background: #e9f8fa;
}

.recruiting-filter-menu-list em {
  color: var(--teal);
  font-style: normal;
  font-size: 11px;
}

.recruiting-filter-mode-label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 28px;
}

.recruiting-filter-mode-label select {
  appearance: none;
  -webkit-appearance: none;
  height: 28px;
  width: 50px;
  min-width: 50px;
  border: 1px solid #dbe5ef;
  border-radius: 999px;
  padding: 0;
  color: var(--teal-dark);
  background: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
  text-align: center;
  text-align-last: center;
}

.recruiting-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.recruiting-tools > * {
  flex-shrink: 0;
}

.recruiting-owner-filters:empty {
  display: none;
}

.recruiting-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 32px;
  border: 1px solid #d9e3ed;
  border-radius: 7px;
  padding: 0 9px;
  color: #25324a;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.recruiting-tools button:disabled {
  opacity: 0.55;
  cursor: default;
}

.recruiting-tools button.active {
  border-color: rgba(7, 149, 167, 0.38);
  color: var(--teal-dark);
  background: #e9f8fa;
}

#recruitingDeleteSelectedButton {
  min-width: 104px;
  border-color: #fecaca;
  color: #b91c1c;
  background: #fff1f2;
}

#recruitingSelectModeButton {
  min-width: 44px;
  padding: 0 8px;
}

.recruiting-tools .recruiting-add-button {
  min-width: 112px;
  border-color: rgba(7, 149, 167, 0.26);
  color: #ffffff;
  background: var(--teal);
  box-shadow: 0 8px 18px rgba(7, 149, 167, 0.18);
}


.recruiting-tools .recruiting-sort-reset-button {
  min-width: 76px;
  padding: 0 8px;
  color: #42536d;
  background: #f8fbfd;
}

.recruiting-tools .recruiting-priority-toggle-button {
  min-width: 98px;
  padding: 0 8px;
}

.recruiting-owner-filters {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 0;
}

.recruiting-owner-select-label,
.recruiting-search-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #344256;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.recruiting-owner-select-label select,
.recruiting-search-label input {
  min-height: 32px;
  border: 1px solid #dbe5ef;
  border-radius: 7px;
  color: #344256;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.recruiting-owner-select-label select {
  min-width: 118px;
  padding: 0 24px 0 8px;
}

.recruiting-search-label input {
  width: 210px;
  padding: 0 8px;
}

@media (max-width: 1024px) {
  body.recruiting-mode {
    min-width: 0;
    overflow-x: hidden;
  }

  body.recruiting-mode .recruiting-page {
    padding-right: 16px;
    padding-left: 16px;
  }

  body.recruiting-mode .recruiting-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .recruiting-search-label > span {
    display: none;
  }

  .recruiting-search-label input {
    width: 100px;
  }

  .recruiting-tools button {
    min-width: 56px;
    padding-right: 7px;
    padding-left: 7px;
    font-size: 11px;
  }

  .recruiting-tools .recruiting-add-button {
    min-width: 96px;
  }

  .recruiting-tools .recruiting-sort-reset-button {
    min-width: 68px;
  }

  #recruitingSelectModeButton {
    min-width: 40px;
  }
}

@media (max-width: 1400px) {
  .recruiting-tabs-row {
    gap: 4px;
    min-height: 48px;
    padding: 4px;
  }

  .recruiting-tabs-row .recruiting-tools {
    gap: clamp(2px, .4vw, 5px);
  }

  .recruiting-tabs-row .recruiting-search-label > span {
    display: none;
  }

  .recruiting-tabs-row .recruiting-tools :is(button, #recruitingSelectModeButton, #recruitingDeleteSelectedButton) {
    min-width: 0;
    min-height: 28px;
    height: 28px;
    padding: 0 clamp(3px, .45vw, 6px);
    font-size: clamp(9px, calc(8px + .3vw), 11px);
    gap: 3px;
  }

  .recruiting-tabs-row .pool-toolbar-group {
    gap: 3px;
  }

  .recruiting-tabs-row .recruiting-pool-filter span {
    max-width: clamp(36px, 6vw, 80px);
  }

  .recruiting-status-tabs {
    gap: 4px;
  }

  .recruiting-status-choices {
    gap: 3px;
  }

  .recruiting-status-tabs button {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 11px;
  }
}

@media (max-width: 1100px) {
  .recruiting-tools .pool-folder-icon,
  .recruiting-tools .pool-button-count,
  .recruiting-tools .pool-chevron {
    display: none;
  }
}

@media (max-width: 640px) {
  .recruiting-tabs-row {
    gap: 3px;
  }

  .recruiting-tabs-row .recruiting-tools :is(button, #recruitingSelectModeButton, #recruitingDeleteSelectedButton) {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 9px;
  }

  .recruiting-tabs-row .recruiting-search-label input {
    padding: 0 4px;
    font-size: 10px;
  }

  .recruiting-status-choices > button {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 10px;
  }

  .recruiting-status-choices > button span {
    margin-left: 2px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .recruiting-status-choices .recruiting-status-expand {
    width: 22px;
    min-width: 22px;
    height: 22px !important;
  }

  body.recruiting-mode .recruiting-summary-grid {
    grid-template-columns: 1fr;
  }
}

.recruiting-scroll-top {
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid #e6edf4;
  background: #f8fbfd;
}

.recruiting-scroll-top > div {
  height: 1px;
}

#recruitingPage.active {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  box-sizing: border-box;
}

#recruitingPage.active .recruiting-list-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#recruitingPage.active .recruiting-table {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.recruiting-table {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  overflow: auto;
  resize: vertical;
  background: #ffffff;
}

.recruiting-table-head,
.recruiting-row {
  display: grid;
  grid-template-columns: var(--recruiting-columns);
  align-items: center;
  width: max-content;
  min-width: 100%;
}

.recruiting-row.selecting {
  background: #fbfdff;
}

.recruiting-table-head {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 54px;
  border-bottom: 1px solid #e6edf4;
  background: #f1f5f9;
  color: #1f2a3d;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 1px 0 #dbe5ef;
}

.recruiting-table-head > div,
.recruiting-row > div {
  padding: 0 12px;
}

.recruiting-table-head > .align-center,
.recruiting-row > .align-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.recruiting-th {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 54px;
  border-right: 1px solid #dbe5ef;
  white-space: nowrap;
}

.recruiting-th-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recruiting-th[draggable="true"] {
  cursor: grab;
}

.recruiting-th.drag-over,
.recruiting-row.drag-over {
  outline: 2px solid rgba(7, 149, 167, 0.28);
  outline-offset: -2px;
}

.recruiting-row.dragging {
  opacity: 0.56;
}

.recruiting-header-sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #dbe5ef;
  border-radius: 999px;
  padding: 0;
  color: #25324a;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  cursor: pointer;
}

.recruiting-header-sort.active {
  border-color: rgba(7, 149, 167, 0.35);
  color: var(--teal-dark);
  background: #e9f8fa;
}

.recruiting-table-head .sticky-select,
.recruiting-table-head .sticky-priority,
.recruiting-table-head .sticky-grade,
.recruiting-table-head .sticky-name,
.recruiting-table-head .sticky-title,
.recruiting-table-head .sticky-field,
.recruiting-row > .sticky-select,
.recruiting-row > .sticky-priority,
.recruiting-row > .sticky-grade,
.recruiting-row > .sticky-name,
.recruiting-row > .sticky-title,
.recruiting-row > .sticky-field {
  position: sticky;
  z-index: 4;
  background: inherit;
}

.recruiting-table-head .sticky-select,
.recruiting-row > .sticky-select { left: var(--sticky-select-left); }
.recruiting-table-head .sticky-priority,
.recruiting-row > .sticky-priority { left: var(--sticky-priority-left); }
.recruiting-table-head .sticky-grade,
.recruiting-row > .sticky-grade { left: var(--sticky-grade-left); }
.recruiting-table-head .sticky-name,
.recruiting-row > .sticky-name { left: var(--sticky-name-left); }
.recruiting-table-head .sticky-title,
.recruiting-row > .sticky-title { left: var(--sticky-title-left); }
.recruiting-table-head .sticky-field,
.recruiting-row > .sticky-field { left: var(--sticky-field-left); }

.recruiting-table-head .sticky-select,
.recruiting-table-head .sticky-priority,
.recruiting-table-head .sticky-grade,
.recruiting-table-head .sticky-name,
.recruiting-table-head .sticky-title,
.recruiting-table-head .sticky-field {
  z-index: 7;
  background: #f1f5f9;
}

.recruiting-row > .sticky-select,
.recruiting-row > .sticky-priority,
.recruiting-row > .sticky-grade,
.recruiting-row > .sticky-name,
.recruiting-row > .sticky-title,
.recruiting-row > .sticky-field {
  background: #ffffff;
}

.recruiting-row:hover > .sticky-select,
.recruiting-row:hover > .sticky-priority,
.recruiting-row:hover > .sticky-grade,
.recruiting-row:hover > .sticky-name,
.recruiting-row:hover > .sticky-title,
.recruiting-row:hover > .sticky-field {
  background: #f8fbfc;
}

.recruiting-row.editing-inline > .sticky-select,
.recruiting-row.editing-inline > .sticky-priority,
.recruiting-row.editing-inline > .sticky-grade,
.recruiting-row.editing-inline > .sticky-name,
.recruiting-row.editing-inline > .sticky-title,
.recruiting-row.editing-inline > .sticky-field {
  z-index: 55;
  overflow: visible;
  background: #ffffff;
}

.recruiting-table-head .sticky-title,
.recruiting-row > .sticky-title {
  border-right: 2px solid rgba(7, 149, 167, 0.35);
  box-shadow: 10px 0 14px -14px rgba(15, 23, 42, 0.35);
}

.recruiting-row > .recruiting-inline-layer,
.recruiting-row.editing-inline > .recruiting-inline-layer {
  z-index: 160 !important;
  overflow: visible !important;
  background: #ffffff;
}

.recruiting-th i {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 6;
  width: 8px;
  height: 100%;
  cursor: col-resize;
}

.recruiting-th i::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 3px;
  width: 1px;
  height: 28px;
  background: #c8d3df;
}

.recruiting-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}

.recruiting-row {
  position: relative;
  min-height: 62px;
  border-bottom: 1px solid #edf1f5;
  color: #42526a;
  font-size: 14px;
  font-weight: 500;
  cursor: default;
}

.recruiting-row.editing-inline {
  z-index: 40;
}

.recruiting-row:hover {
  background: #f8fbfc;
}

.recruiting-name strong {
  color: #111827;
  font-size: 15px;
  font-weight: 700;
}

.recruiting-cell-button {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 8px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-cell-button:hover,
.recruiting-owner button:hover,
.recruiting-url-edit:hover {
  border-color: #cfe0eb;
  background: #f6fafc;
}

.recruiting-row > .align-center .recruiting-editable-cell {
  justify-content: center;
}

.recruiting-row > .align-center .recruiting-cell-button {
  justify-content: center;
  text-align: center;
}

.recruiting-editable-cell {
  position: relative;
  min-height: 62px;
  display: flex;
  align-items: center;
  overflow: visible;
}

.recruiting-editable-cell.editing {
  align-items: flex-start;
  padding-top: 8px;
  z-index: 70;
}

.recruiting-inline-form {
  position: absolute;
  top: 42px;
  left: 8px;
  z-index: 120;
  display: grid;
  grid-template-columns: minmax(132px, 1fr) auto auto;
  gap: 6px;
  min-width: min(330px, 80vw);
  border: 1px solid #cfe0eb;
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
}

.recruiting-inline-form input {
  min-height: 34px;
  border: 1px solid #dbe5ef;
  border-radius: 7px;
  padding: 0 10px;
  font: inherit;
  font-weight: 850;
}

.recruiting-inline-form button,
.recruiting-inline-choices button {
  min-height: 34px;
  border: 1px solid #dbe5ef;
  border-radius: 7px;
  padding: 0 10px;
  background: #ffffff;
  color: #25324a;
  font-weight: 900;
}

.recruiting-inline-choices {
  position: absolute;
  top: 42px;
  left: 8px;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 154px;
  max-width: min(210px, 80vw);
  border: 1px solid #cfe0eb;
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
}

.recruiting-inline-choices.is-fixed {
  position: fixed;
  top: var(--recruiting-inline-top, auto);
  left: var(--recruiting-inline-left, auto);
  z-index: 10030;
  max-height: min(320px, calc(100vh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.recruiting-inline-choices.is-fixed::-webkit-scrollbar {
  width: 8px;
}

.recruiting-inline-choices.is-fixed::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #b6c8d8;
}

.recruiting-inline-choices button.selected {
  border-color: rgba(7, 149, 167, 0.4);
  color: var(--teal-dark);
  background: #e9f8fa;
}

.recruiting-inline-choices .recruiting-inline-config {
  width: 34px;
  min-width: 34px;
  justify-self: end;
  padding: 0;
  border-color: rgba(7, 149, 167, 0.28);
  color: var(--teal-dark);
  background: #f0fbfc;
  font-size: 15px;
}

.recruiting-priority {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  justify-content: center;
  border-radius: 999px;
  padding: 0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.recruiting-priority.priority-1 { background: #dc2626; }
.recruiting-priority.priority-2 { background: #f59e0b; }
.recruiting-priority.priority-3 { background: #64748b; }
.recruiting-priority.is-empty {
  color: #94a3b8;
  background: #f1f5f9;
}

.recruiting-grade,
.recruiting-target,
.recruiting-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 950;
}

.recruiting-grade {
  min-width: 28px;
}

.recruiting-grade.grade-s { color: #ffffff; background: #d60f18; }
.recruiting-grade.grade-a { color: #ffffff; background: #ff7a00; }
.recruiting-grade.grade-b { color: #7a5200; background: #ffd43b; }
.recruiting-grade.grade-c { color: #475569; background: #e2e8f0; }
.recruiting-grade.grade-undecided { color: #475569; background: #f1f5f9; }

.recruiting-target.target-month-5 { color: #15803d; background: #dcfce7; }
.recruiting-target.target-month-6 { color: #1d4ed8; background: #dbeafe; }
.recruiting-target.target-month-7 { color: #7e22ce; background: #f3e8ff; }
.recruiting-target.target-month-8 { color: #c2410c; background: #ffedd5; }
.recruiting-target.target-month-9 { color: #be185d; background: #fce7f3; }
.recruiting-target.target-month-10 { color: #0f766e; background: #ccfbf1; }
.recruiting-target.target-month-11 { color: #4338ca; background: #e0e7ff; }
.recruiting-target.target-month-12 { color: #b91c1c; background: #fee2e2; }
.recruiting-target.target-waiting { color: #64748b; background: #f1f5f9; }

.recruiting-status.status-contact-plan { color: #1d4ed8; background: #dbeafe; }
.recruiting-status.status-contact { color: #854d0e; background: #fef3c7; }
.recruiting-status.status-adjusting { color: #0369a1; background: #e0f2fe; }
.recruiting-status.status-no-reply { color: #c2410c; background: #ffedd5; }
.recruiting-status.status-done { color: #15803d; background: #dcfce7; }
.recruiting-status.status-rejected { color: #b91c1c; background: #fee2e2; }
.recruiting-status.status-canceled { color: #7c2d12; background: #fed7aa; }
.recruiting-status.status-waiting { color: #475569; background: #f1f5f9; }

.recruiting-status-cell {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.recruiting-channel {
  border-color: transparent;
  color: var(--channel-color);
  background: var(--channel-bg);
}

.recruiting-cell-button.is-placeholder,
.recruiting-url-open.is-placeholder,
.recruiting-owner-empty {
  color: #94a3b8;
}

.recruiting-owner-empty {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-weight: 600;
}

.recruiting-memo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-height: 34px;
  border: 1px solid #e3e9f0;
  border-radius: 7px;
  padding: 0 10px;
  color: #4d5d74;
  background: #fbfdff;
  font: inherit;
  font-weight: 500;
}

.recruiting-memo-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-memo-chip i {
  color: #62748e;
  font-style: normal;
}

.recruiting-owner {
  position: relative;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.recruiting-owner button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 8px;
  color: #42526a;
  background: transparent;
  font: inherit;
  font-weight: 600;
}

.recruiting-owner .recruiting-owner-history-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-height: 20px;
  width: 100%;
  border: 0;
  padding: 0 8px;
  color: #64748b;
  background: transparent;
  font-size: 10px;
  font-weight: 650;
}

.recruiting-owner-history-link span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-owner-history-link strong {
  flex: 0 0 auto;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 900;
}

.recruiting-owner .recruiting-owner-history-link:hover {
  color: #334155;
  background: #edf8fa;
}

.recruiting-owner-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--owner-avatar-color, #334155);
  font-size: 12px;
  font-weight: 950;
}

.recruiting-owner button > span:not(.recruiting-owner-avatar) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-owner-history-popup {
  position: fixed;
  z-index: 2200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #b9cddd;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.24);
}

.recruiting-owner-history-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
  border-bottom: 1px solid #dce6ee;
}

.recruiting-owner-history-popup-head strong,
.recruiting-owner-history-popup-head span {
  display: block;
}

.recruiting-owner-history-popup-head strong {
  color: #17213a;
  font-size: 15px;
  font-weight: 900;
}

.recruiting-owner-history-popup-head span {
  margin-top: 2px;
  color: #708095;
  font-size: 11px;
  font-weight: 600;
}

.recruiting-owner-history-popup-body {
  display: grid;
  gap: 9px;
  min-height: 0;
  overflow-y: auto;
  padding: 11px;
  background: #f7fafc;
}

.recruiting-owner-history-round {
  display: grid;
  gap: 9px;
  border: 1px solid #cfdee8;
  border-radius: 7px;
  padding: 10px;
  background: #ffffff;
}

.recruiting-owner-history-round-head,
.recruiting-owner-history-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recruiting-owner-history-round-head > strong {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
}

.recruiting-owner-history-round-head > span {
  color: #708095;
  font-size: 11px;
  font-weight: 650;
}

.recruiting-owner-history-round ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 17px;
  list-style: none;
  border-left: 2px solid #bde3e8;
}

.recruiting-owner-history-round li {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 3px 8px;
}

.recruiting-owner-history-round li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -22px;
  width: 8px;
  height: 8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 1px #8ccfd7;
}

.recruiting-owner-history-round li > span {
  color: #7b8798;
  font-size: 10px;
  font-weight: 650;
}

.recruiting-owner-history-round li > strong {
  color: #25324a;
  font-size: 11px;
  font-weight: 800;
}

.recruiting-owner-history-round li > small {
  grid-column: 2;
  color: #8793a5;
  font-size: 10px;
}

.recruiting-owner-history-final {
  border-top: 1px solid #e2eaf0;
  padding-top: 8px;
}

.recruiting-owner-history-final span {
  color: #708095;
  font-size: 11px;
  font-weight: 650;
}

.recruiting-owner-history-final strong {
  color: #17213a;
  font-size: 12px;
  font-weight: 900;
}

.recruiting-owner-history-popup > p {
  margin: 0;
  padding: 9px 12px;
  border-top: 1px solid #dce6ee;
  color: #64748b;
  background: #ffffff;
  font-size: 10px;
  font-weight: 650;
}

.recruiting-title-field-cell {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding-right: 8px;
}

.recruiting-title-field-cell .recruiting-editable-cell {
  min-width: 0;
  flex: 0 1 auto;
}

.recruiting-field-chip {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 50%;
  color: var(--field-chip-color);
  background: var(--field-chip-bg);
  font-size: 12px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.recruiting-field-chip:hover {
  border-color: rgba(7, 149, 167, 0.4);
  filter: saturate(1.08) brightness(0.98);
}

.recruiting-url-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.recruiting-url-open,
.recruiting-url-edit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid #dbe6ef;
  border-radius: 7px;
  padding: 0 9px;
  color: #0d7483;
  background: #f3fbfc;
  font-size: 12px;
  font-weight: 700;
  overflow: visible;
}

.recruiting-url-edit {
  color: #42526a;
  background: #ffffff;
}

.recruiting-url-open .youtube-icon {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 17px;
  border-radius: 5px;
  background: #ff0033;
  box-shadow: 0 4px 10px rgba(255, 0, 51, 0.18);
}

.recruiting-url-open .youtube-icon::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #ffffff;
}

.recruiting-url-open.is-placeholder .youtube-icon {
  background: #cbd5e1;
  box-shadow: none;
}

.recruiting-url-thumbnail,
.recruiting-url-thumb-placeholder {
  position: relative;
  display: block;
  width: 94px;
  min-width: 94px;
  overflow: hidden;
  border-radius: 7px;
  background: #e2e8f0;
}

.recruiting-url-thumbnail img,
.recruiting-url-thumb-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.recruiting-url-thumb-placeholder {
  display: grid;
  place-items: center;
}

.recruiting-url-thumb-placeholder .youtube-icon {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 17px;
  border-radius: 5px;
  background: #cbd5e1;
  transform: scale(1.12);
}

.recruiting-url-thumb-placeholder .youtube-icon::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #ffffff;
}

.recruiting-link-body {
  display: grid;
  gap: 14px;
}

.recruiting-link-body label {
  display: grid;
  gap: 8px;
  color: #34445f;
  font-weight: 900;
}

.recruiting-link-body input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 12px;
  color: #17213a;
  background: #ffffff;
  font-weight: 850;
}

.recruiting-url-editor {
  display: grid;
  gap: 10px;
}

.recruiting-url-editor-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.recruiting-url-editor-head strong,
.recruiting-url-editor-head span {
  color: #34445f;
  font-weight: 900;
}

.recruiting-url-add {
  min-height: 32px;
  padding: 0 10px;
  white-space: nowrap;
}

.recruiting-url-list {
  display: grid;
  gap: 8px;
}

.recruiting-url-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.recruiting-url-input-row.has-url-card {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.recruiting-url-input-row input {
  min-width: 0;
}

.recruiting-url-input-row .icon-button {
  border: 1px solid #ffd4d4;
  background: #fffafa;
  color: var(--red);
  font-size: 19px;
}

.recruiting-url-card {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid #dbe6ef;
  border-radius: 8px;
  padding: 7px;
  color: #17213a;
  background: #ffffff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.recruiting-url-card:hover {
  border-color: rgba(7, 149, 167, 0.38);
  background: #f3fbfc;
}

.recruiting-url-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.recruiting-url-card-copy strong,
.recruiting-url-card-copy em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-url-card-copy strong {
  color: #17213a;
  font-size: 13px;
  font-weight: 950;
}

.recruiting-url-card-copy em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.recruiting-url-hover-preview {
  position: fixed;
  z-index: 500;
  width: min(var(--recruiting-url-preview-width, 360px), calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  border: 1px solid #dbe6ef;
  border-radius: 10px;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.22);
  pointer-events: none;
}

.recruiting-url-hover-preview[hidden] {
  display: none;
}

.recruiting-url-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.recruiting-url-preview-head strong {
  min-width: 0;
  overflow: hidden;
  color: #17213a;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-url-preview-head span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 2px 7px;
  color: #0d7483;
  background: #e9f8fa;
  font-size: 11px;
  font-weight: 950;
}

.recruiting-url-preview-list {
  display: grid;
  gap: 8px;
  max-height: min(420px, calc(100vh - 120px));
  overflow: hidden;
}

.recruiting-url-preview-list.multi {
  overflow-y: auto;
}

/* 李멸퀬?곸긽 ?몃쾭 誘몃━蹂닿린??鍮꾩쑉(16:9)???좎???梨????ш쾶 ?쒖떆?쒕떎. */
.recruiting-url-hover-preview .recruiting-url-card {
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 13px;
  padding: 9px;
}

.recruiting-url-hover-preview .recruiting-url-thumbnail,
.recruiting-url-hover-preview .recruiting-url-thumb-placeholder {
  width: 168px;
  min-width: 168px;
  border-radius: 9px;
}

.recruiting-url-hover-preview .recruiting-url-card-copy {
  gap: 6px;
}

.recruiting-url-hover-preview .recruiting-url-card-copy strong {
  font-size: 15px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.recruiting-url-hover-preview .recruiting-url-card-copy em {
  font-size: 12px;
}

.recruiting-url-hover-preview .recruiting-url-preview-list {
  max-height: min(520px, calc(100vh - 96px));
}

@media (max-width: 720px) {
  .recruiting-url-card {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .recruiting-url-thumbnail,
  .recruiting-url-thumb-placeholder {
    width: 78px;
    min-width: 78px;
  }
}

.recruiting-history-trigger {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 6px;
  width: calc(100% - 8px);
  min-width: 0;
  min-height: 38px;
  border: 1px solid #dce4ec;
  border-radius: 10px;
  padding: 0 7px;
  color: #405169;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.recruiting-history-trigger:hover,
.recruiting-history-trigger[aria-expanded="true"] {
  border-color: #a8bacb;
  color: #17324f;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(25, 45, 72, .09);
}

.recruiting-history-trigger > i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #71849a;
}

.recruiting-history-trigger > i svg { width: 16px; height: 16px; }
.recruiting-history-trigger.has-history > i { color: #34758a; }
.recruiting-history-trigger.attention > i { color: #a86c18; }
.recruiting-history-trigger.empty { color: #77869a; }
.recruiting-history-trigger > span { overflow: hidden; min-width: 0; color: inherit; font-size: 12px; font-weight: 650; text-align: left; text-overflow: ellipsis; }
.recruiting-history-trigger > b { display: grid; place-items: center; width: 12px; height: 14px; color: #8a99aa; }
.recruiting-history-trigger > b svg { width: 12px; height: 12px; transition: transform .16s ease; }
.recruiting-history-trigger[aria-expanded="true"] > b svg { transform: rotate(180deg); }

.recruiting-history-menu {
  position: fixed;
  z-index: 1250;
  overflow: auto;
  border: 1px solid rgba(205, 216, 227, .9);
  border-radius: 14px;
  padding: 8px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 55px rgba(23, 36, 56, .16), 0 3px 10px rgba(23, 36, 56, .06);
  backdrop-filter: blur(18px);
}

.recruiting-history-menu > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 3px 3px 8px 10px;
  color: #1d2d42;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.recruiting-history-menu > button:not(.icon-button) {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 10px 9px 8px;
  color: #26364f;
  background: transparent;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.recruiting-history-menu > button:not(.icon-button):hover { border-color: #e1e8ef; background: #f7f9fb; }
.recruiting-history-menu > button.is-add { color: #286579; }
.recruiting-history-menu > button > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #5e7389; background: #f0f4f7; font-style: normal; }
.recruiting-history-menu > button > i svg { width: 18px; height: 18px; }
.recruiting-history-menu > button > i.is-insight { color: #9a6a25; background: #fff7e8; }
.recruiting-history-menu > button.is-add > i { color: #287088; background: #edf7f9; }
.recruiting-history-menu > button > span { display: grid; gap: 4px; min-width: 0; }
.recruiting-history-menu > button strong { display: flex; align-items: center; gap: 7px; color: #24364d; font-size: 13px; font-weight: 700; }
.recruiting-history-menu > button strong em { width: 7px; height: 7px; border-radius: 999px; background: #f59e0b; }
.recruiting-history-menu > button small { overflow: hidden; color: #6f7f93; font-size: 11px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.recruiting-history-menu > button > b { min-width: 32px; border-radius: 999px; padding: 4px 7px; color: #53667c; background: #f1f4f7; font-size: 11px; font-weight: 650; text-align: center; }
.recruiting-history-menu > div[role="separator"] { height: 1px; margin: 6px 8px; background: #e9eef3; }

.recruiting-empty {
  padding: 36px;
  color: var(--muted);
  text-align: center;
  font-weight: 900;
}

.recruiting-edit-modal,
.recruiting-candidate-modal,
.recruiting-progress-modal {
  width: min(780px, calc(100vw - 48px));
}

.recruiting-detail-text-modal,
.recruiting-column-reset-modal {
  width: min(620px, calc(100vw - 48px));
}

.recruiting-candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.recruiting-candidate-grid label,
.recruiting-candidate-grid .recruiting-form-field,
.recruiting-single-field label,
.recruiting-progress-editor {
  display: grid;
  gap: 8px;
  color: #34445f;
  font-weight: 900;
}

.recruiting-candidate-grid .full {
  grid-column: 1 / -1;
}

.recruiting-name-fee-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 12px;
}

.recruiting-grade-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
}

.recruiting-modal-quick-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 1px;
}

.recruiting-modal-quick-actions button {
  min-height: 36px;
  white-space: nowrap;
}

.recruiting-form-field > span {
  color: #34445f;
  font-weight: 900;
}

.recruiting-candidate-grid input,
.recruiting-candidate-grid select,
.recruiting-candidate-grid textarea,
.recruiting-single-field input,
.recruiting-single-field select,
.recruiting-progress-editor textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 12px;
  color: #17213a;
  background: #ffffff;
  font: inherit;
  font-weight: 800;
}

.recruiting-modal-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recruiting-modal-choices label {
  display: inline-flex;
  gap: 0;
}

.recruiting-modal-choices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.recruiting-modal-choices span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid #dbe5ef;
  border-radius: 999px;
  padding: 0 12px;
  color: #34445f;
  background: #ffffff;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.recruiting-modal-choices input:checked + span {
  border-color: rgba(7, 149, 167, 0.42);
  color: var(--teal-dark);
  background: #e9f8fa;
}

.recruiting-owner-dropdown {
  position: relative;
}

.recruiting-owner-dropdown summary {
  display: flex;
  align-items: center;
  min-height: 58px;
  border: 1px solid #d7e2ec;
  border-radius: 11px;
  padding: 8px 42px 8px 10px;
  color: #263449;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  cursor: pointer;
  list-style: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.recruiting-owner-dropdown summary:hover,
.recruiting-owner-dropdown[open] summary {
  border-color: rgba(7, 149, 167, 0.48);
  background: #f4fcfd;
  box-shadow: 0 0 0 3px rgba(7, 149, 167, 0.1);
}

.recruiting-owner-dropdown summary::-webkit-details-marker {
  display: none;
}

.recruiting-owner-dropdown summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #718096;
  border-bottom: 2px solid #718096;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.16s ease;
}

.recruiting-owner-dropdown[open] summary::after {
  transform: translateY(3px) rotate(225deg);
}

.recruiting-owner-selection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.recruiting-owner-selection-copy,
.recruiting-owner-selection-copy strong,
.recruiting-owner-selection-copy small {
  display: block;
  min-width: 0;
}

.recruiting-owner-selection-copy strong {
  overflow: hidden;
  color: #1f2b3d;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-owner-selection-copy small {
  margin-top: 2px;
  color: #8190a4;
  font-size: 10px;
  font-weight: 750;
}

.recruiting-owner-selection.is-empty .recruiting-owner-avatar,
.recruiting-owner-option.is-empty .recruiting-owner-avatar {
  color: #7b8798;
  background: #e9eef4;
}

.recruiting-owner-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 180;
  display: grid;
  gap: 5px;
  border: 1px solid #cfdee9;
  border-radius: 14px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.2);
}

.recruiting-owner-dropdown.is-fixed-open .recruiting-owner-dropdown-menu {
  position: fixed;
  top: var(--recruiting-owner-menu-top, auto);
  left: var(--recruiting-owner-menu-left, auto);
  right: auto;
  z-index: 10040;
  width: min(420px, calc(100vw - 20px));
  max-height: min(360px, calc(100vh - 20px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.recruiting-owner-dropdown.is-fixed-open .recruiting-owner-dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.recruiting-owner-dropdown.is-fixed-open .recruiting-owner-dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #b6c8d8;
}

.recruiting-owner-dropdown-menu label {
  display: block;
}

.recruiting-owner-dropdown-menu input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.recruiting-owner-dropdown-head {
  display: grid;
  gap: 3px;
  margin: -2px -2px 3px;
  border-bottom: 1px solid #e8eef4;
  padding: 8px 10px 11px;
}

.recruiting-owner-dropdown-head strong {
  color: #1f2b3d;
  font-size: 13px;
  font-weight: 950;
}

.recruiting-owner-dropdown-head small {
  color: #8290a3;
  font-size: 10px;
  font-weight: 750;
}

.recruiting-owner-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 7px 9px;
  color: #42526a;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}

.recruiting-owner-option:hover {
  transform: translateX(2px);
  border-color: #d8e7ee;
  background: #f7fbfc;
}

.recruiting-owner-dropdown-menu input:checked + .recruiting-owner-option {
  border-color: rgba(7, 149, 167, 0.36);
  color: #17213a;
  background: #edfafb;
}

.recruiting-owner-option-copy,
.recruiting-owner-option-copy strong,
.recruiting-owner-option-copy small {
  display: block;
  min-width: 0;
}

.recruiting-owner-option-copy strong {
  overflow: hidden;
  color: #243148;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-owner-option-copy small {
  margin-top: 3px;
  color: #8491a4;
  font-size: 10px;
  font-weight: 750;
}

.recruiting-owner-option > i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #d9e3eb;
  border-radius: 50%;
  color: transparent;
  background: #ffffff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.recruiting-owner-dropdown-menu input:checked + .recruiting-owner-option > i {
  border-color: var(--teal);
  color: #ffffff;
  background: var(--teal);
}

.recruiting-owner-dropdown .recruiting-owner-avatar,
.recruiting-owner-option .recruiting-owner-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-height: 0;
  border-radius: 10px;
  padding: 0;
  font-size: 12px;
  cursor: default;
}

.recruiting-modal-choices.grade-choice label:nth-child(1) span { color: #ffffff; background: #d60f18; }
.recruiting-modal-choices.grade-choice label:nth-child(2) span { color: #ffffff; background: #ff7a00; }
.recruiting-modal-choices.grade-choice label:nth-child(3) span { color: #7a5200; background: #ffd43b; }
.recruiting-modal-choices.grade-choice label:nth-child(4) span { color: #475569; background: #e2e8f0; }
.recruiting-modal-choices.grade-choice label:nth-child(5) span { color: #475569; background: #f1f5f9; }

.recruiting-schedule-choice-modal {
  width: min(520px, calc(100vw - 48px));
}

.recruiting-close-modal {
  width: min(620px, calc(100vw - 44px));
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.28);
}

.recruiting-close-modal .modal-head {
  padding: 24px 30px 12px;
  border-bottom: 0;
}

.recruiting-close-modal .modal-head h2 {
  margin: 0;
  color: #111c33;
  font-size: 24px;
  font-weight: 950;
}

.recruiting-close-body {
  display: grid;
  gap: 14px;
  padding: 0 30px 18px;
}

.recruiting-close-profile {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid #d7e1ec;
  border-radius: 9px;
  padding: 20px;
  background: #ffffff;
}

.recruiting-close-photo {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #0795a7, #2679ee);
  font-size: 28px;
  font-weight: 950;
}

.recruiting-close-profile dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0;
}

.recruiting-close-profile dt {
  margin-bottom: 8px;
  color: #66758d;
  font-size: 13px;
  font-weight: 900;
}

.recruiting-close-profile dd {
  margin: 0;
  color: #15213a;
  font-size: 16px;
  font-weight: 950;
}

.recruiting-close-profile .recruiting-owner-avatar {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.recruiting-close-profile dd > .recruiting-owner-avatar {
  margin-right: 6px;
  vertical-align: middle;
}

.recruiting-close-choices {
  display: grid;
  gap: 12px;
}

.recruiting-close-choice {
  position: relative;
  display: grid;
  grid-template-columns: 28px 50px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 82px;
  border: 1px solid #d7e1ec;
  border-radius: 9px;
  padding: 14px 18px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.recruiting-close-choice:hover,
.recruiting-close-choice:has(input:checked) {
  border-color: rgba(7, 149, 167, 0.5);
  background: #f5fcfd;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.recruiting-close-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.recruiting-close-radio {
  width: 24px;
  height: 24px;
  border: 2px solid #b8c5d5;
  border-radius: 50%;
  background: #ffffff;
}

.recruiting-close-choice input:checked + .recruiting-close-radio {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 6px #ffffff;
  background: var(--teal);
}

.recruiting-close-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--teal-dark);
  background: #dff7fa;
  font-size: 22px;
  font-weight: 950;
}

.recruiting-close-choice:nth-child(2) .recruiting-close-icon {
  color: #2679ee;
  background: #eaf2ff;
}

.recruiting-close-choice:nth-child(3) .recruiting-close-icon {
  color: #64748b;
  background: #eef2f7;
}

.recruiting-close-copy {
  display: grid;
  gap: 5px;
}

.recruiting-close-copy strong {
  color: #17213a;
  font-size: 17px;
  font-weight: 950;
}

.recruiting-close-copy em {
  color: #64748b;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.recruiting-close-reset {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
  color: #34445f;
  font-size: 14px;
  font-weight: 900;
}

.recruiting-close-reset input {
  width: 20px;
  height: 20px;
  accent-color: var(--teal);
}

.recruiting-close-modal .modal-foot {
  padding: 18px 30px 26px;
  border-top: 0;
}

.recruiting-close-modal .modal-foot button {
  min-width: 120px;
  min-height: 48px;
  border-radius: 8px;
  font-size: 16px;
}

.recruiting-history-modal {
  width: min(760px, calc(100vw - 48px));
}

.recruiting-history-body {
  display: grid;
  gap: 18px;
}

.recruiting-insight-modal,
.recruiting-experience-form,
.recruiting-appearance-modal,
.recruiting-manual-appearance-modal {
  width: min(680px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid #dbe3eb;
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(19, 35, 57, .2);
}

.recruiting-experience-modal {
  width: min(900px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid #dbe3eb;
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(19, 35, 57, .2);
}

.recruiting-modal-head-pro {
  align-items: flex-start;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #e8edf2;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.recruiting-modal-head-pro > div { display: grid; gap: 3px; }
.recruiting-modal-head-pro h2 { margin: 0; color: #192a40; font-size: 21px; font-weight: 750; letter-spacing: -.025em; }
.recruiting-modal-head-pro .muted { margin: 3px 0 0; color: #6f7e91; font-size: 13px; font-weight: 500; line-height: 1.55; }
.recruiting-modal-kicker { color: #637b92; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.recruiting-modal-head-pro .icon-button { width: 32px; height: 32px; border-radius: 9px; color: #78879a; background: #f3f6f8; }
.recruiting-modal-head-pro .icon-button:hover { color: #2b3e56; background: #e9eef3; }

.recruiting-insight-body label {
  display: grid;
  gap: 9px;
  color: #273952;
  font-weight: 700;
}

.recruiting-insight-body { padding: 26px; background: #f6f8fb; }

.recruiting-insight-note {
  position: relative;
  overflow: hidden;
  border: 1px solid #d9e1e9;
  border-radius: 14px;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(37, 55, 78, .06);
}

.recruiting-insight-note::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #4f8292 0%, #8fb6c1 100%);
}

.recruiting-insight-note > span { color: #344960; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }

.recruiting-insight-body textarea,
.recruiting-experience-form-body textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #cfdce8;
  border-radius: 8px;
  padding: 12px;
  color: #17213a;
  background: #fbfdff;
  font: inherit;
  line-height: 1.55;
}

.recruiting-insight-body textarea {
  min-height: 190px;
  border: 0;
  border-radius: 0;
  padding: 12px 0;
  outline: 0;
  color: #1e3047;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
}

.recruiting-insight-body textarea::placeholder { color: #9aa8b7; font-weight: 400; }
.recruiting-insight-body textarea:focus { box-shadow: inset 0 -1px 0 #8eabb7; }

.recruiting-insight-body small { padding-top: 12px; border-top: 1px solid #edf1f4; color: #748398; font-size: 12px; font-weight: 500; line-height: 1.5; }
.recruiting-experience-body { display: grid; gap: 20px; }

.recruiting-insight-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #f1c97f;
  border-radius: 10px;
  padding: 15px 16px;
  background: #fffaf0;
}

.recruiting-insight-summary.is-empty { border-color: #dbe5ef; background: #f8fbfd; }
.recruiting-insight-summary > div { display: grid; gap: 5px; min-width: 0; }
.recruiting-insight-summary span { color: #a96808; font-size: 12px; font-weight: 700; }
.recruiting-insight-summary strong { color: #2b3447; font-size: 15px; font-weight: 600; line-height: 1.5; }
.recruiting-insight-summary button { flex: 0 0 auto; min-height: 36px; border: 1px solid #cbd8e4; border-radius: 7px; padding: 0 13px; color: #35455e; background: #ffffff; font-size: 12px; font-weight: 650; }

.recruiting-experience-section { display: grid; gap: 12px; }
.recruiting-experience-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.recruiting-experience-section > header > div { display: flex; align-items: center; gap: 7px; }
.recruiting-experience-section h3 { margin: 0; color: #17213a; font-size: 17px; font-weight: 750; }
.recruiting-experience-section > header span { border-radius: 999px; padding: 3px 8px; color: #087885; background: #eaf8fa; font-size: 11px; font-weight: 650; }
.recruiting-experience-list { display: grid; gap: 10px; }

.recruiting-experience-item {
  display: grid;
  gap: 9px;
  border: 1px solid #dbe5ef;
  border-left: 4px solid #7b93ad;
  border-radius: 9px;
  padding: 13px 14px;
  background: #ffffff;
}

.recruiting-experience-item.attention { border-left-color: #f59e0b; }
.recruiting-experience-item.resolved { border-left-color: #17a673; }
.recruiting-experience-item > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recruiting-experience-item > header > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.recruiting-experience-item time { color: #52657d; font-size: 12px; font-weight: 600; }
.recruiting-experience-item header span,
.recruiting-experience-item header em,
.recruiting-experience-item header b { border-radius: 999px; padding: 4px 8px; font-size: 11px; font-style: normal; font-weight: 600; }
.recruiting-experience-item header span { color: #53657b; background: #eef3f7; }
.recruiting-experience-item header em { color: #a76000; background: #fff3d8; }
.recruiting-experience-item header b { color: #60748d; background: #eef3f7; }
.recruiting-experience-item.attention header b { color: #b76800; background: #fff1d6; }
.recruiting-experience-item.resolved header b { color: #087453; background: #e8f8f1; }
.recruiting-experience-item h4 { margin: 0; color: #17213a; font-size: 15px; font-weight: 700; }
.recruiting-experience-item dl { display: grid; gap: 6px; margin: 0; }
.recruiting-experience-item dl div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; }
.recruiting-experience-item dt { color: #65778e; font-size: 12px; font-weight: 650; }
.recruiting-experience-item dd { margin: 0; color: #42536c; font-size: 13px; font-weight: 500; line-height: 1.55; }
.recruiting-experience-item footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #77879b; font-size: 11px; font-weight: 500; }
.recruiting-experience-item footer button { border: 0; color: #965858; background: transparent; font-size: 11px; font-weight: 650; }

.recruiting-experience-empty { display: grid; justify-items: start; gap: 6px; border: 1px dashed #cbd8e4; border-radius: 9px; padding: 18px; color: #738298; background: #fbfdff; }
.recruiting-experience-empty strong { color: #354960; font-size: 14px; font-weight: 650; }
.recruiting-experience-empty span { color: #65768b; font-size: 13px; font-weight: 500; line-height: 1.5; }
.recruiting-experience-empty button { margin-top: 5px; }
.recruiting-experience-form-body { gap: 12px; }
.recruiting-experience-form-body > label { color: #34495f; font-size: 13px; font-weight: 650; }
.recruiting-experience-form-body input,
.recruiting-experience-form-body select,
.recruiting-experience-form-body textarea { font-size: 13px; font-weight: 500; }
.recruiting-experience-check { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px; }
.recruiting-experience-check input { width: 18px; height: 18px; accent-color: #0795a7; }
.recruiting-experience-check span { color: #50647a; font-size: 13px; font-weight: 500; line-height: 1.45; }

.recruiting-appearance-list { display: grid; gap: 10px; padding: 20px 22px 24px; background: #f7f9fb; }
.recruiting-appearance-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; padding: 0 2px 8px; }
.recruiting-appearance-toolbar > div { display: flex; align-items: center; gap: 8px; }
.recruiting-appearance-toolbar strong { color: #23364c; font-size: 16px; font-weight: 700; }
.recruiting-appearance-toolbar span { border-radius: 999px; padding: 3px 8px; color: #5b6e83; background: #e9eef3; font-size: 11px; font-weight: 650; }
.recruiting-appearance-toolbar button { min-height: 36px; border-color: #cdd9e3; border-radius: 8px; color: #34586b; background: #ffffff; font-size: 12px; font-weight: 650; }
.recruiting-appearance-list article { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid #dde5ec; border-radius: 12px; padding: 14px 15px; background: #ffffff; box-shadow: 0 3px 10px rgba(29, 45, 66, .035); }
.recruiting-appearance-list article.is-latest { border-color: #b7cbd4; box-shadow: 0 5px 16px rgba(43, 84, 101, .07); }
.recruiting-appearance-list article.source-deleted { border-style: dashed; background: #f8fafc; }
.recruiting-appearance-list article.is-manual { border-color: #d7dfe8; }
.recruiting-appearance-list time { color: #536a82; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.recruiting-appearance-list article > div { display: grid; gap: 4px; min-width: 0; }
.recruiting-appearance-list strong { overflow: hidden; color: #1c2e45; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.recruiting-appearance-list span { color: #63748a; font-size: 12px; font-weight: 500; }
.recruiting-appearance-list p { margin: 2px 0 0; color: #53657b; font-size: 12px; font-weight: 500; line-height: 1.55; }
.recruiting-appearance-list em { width: max-content; border-radius: 999px; padding: 4px 8px; color: #416b7a; background: #edf5f6; font-size: 10px; font-style: normal; font-weight: 600; }
.recruiting-appearance-list .source-deleted em { color: #7b8798; background: #edf1f5; }
.recruiting-appearance-actions { display: flex !important; align-items: center; justify-content: flex-end; gap: 5px !important; }
.recruiting-appearance-list article button { min-height: 32px; border: 1px solid #d3dde6; border-radius: 7px; padding: 0 10px; color: #496579; background: #ffffff; font-size: 11px; font-weight: 650; }
.recruiting-appearance-list article button:hover { border-color: #aebdca; color: #27485c; background: #f8fafb; }
.recruiting-appearance-list article button.danger { border-color: transparent; color: #9b6666; background: transparent; }
.recruiting-appearance-empty { background: #ffffff; }

.recruiting-manual-appearance-form { gap: 14px; padding: 24px; background: #f8fafc; }
.recruiting-manual-appearance-form label { display: grid; gap: 7px; color: #34495f; font-size: 13px; font-weight: 650; }
.recruiting-manual-appearance-form label > span { display: flex; align-items: center; gap: 6px; }
.recruiting-manual-appearance-form label em { color: #7f8d9f; font-size: 11px; font-style: normal; font-weight: 500; }
.recruiting-manual-appearance-form input,
.recruiting-manual-appearance-form select,
.recruiting-manual-appearance-form textarea { width: 100%; border: 1px solid #d4dee7; border-radius: 9px; padding: 10px 11px; color: #23364d; background: #ffffff; font: inherit; font-size: 13px; font-weight: 500; }
.recruiting-manual-appearance-form input:focus,
.recruiting-manual-appearance-form select:focus,
.recruiting-manual-appearance-form textarea:focus { border-color: #8daeba; outline: 3px solid rgba(74, 125, 142, .1); }

.recruiting-insight-modal .modal-foot,
.recruiting-experience-modal .modal-foot,
.recruiting-experience-form .modal-foot,
.recruiting-appearance-modal .modal-foot,
.recruiting-manual-appearance-modal .modal-foot { padding: 15px 22px 18px; border-top: 1px solid #e9eef3; background: #ffffff; }

.recruiting-insight-modal .modal-foot button,
.recruiting-experience-modal .modal-foot button,
.recruiting-experience-form .modal-foot button,
.recruiting-appearance-modal .modal-foot button,
.recruiting-manual-appearance-modal .modal-foot button { min-height: 40px; border-radius: 9px; padding-inline: 16px; font-size: 13px; font-weight: 650; }

@media (max-width: 720px) {
  .recruiting-appearance-list article { grid-template-columns: 1fr; gap: 8px; }
  .recruiting-appearance-actions { justify-content: flex-start; }
  .recruiting-appearance-toolbar { align-items: flex-start; }
  .recruiting-manual-appearance-form { grid-template-columns: 1fr; }
}

.recruiting-past-rounds-modal {
  width: min(420px, calc(100vw - 48px));
}

.recruiting-past-rounds-body {
  display: grid;
  gap: 10px;
}

.recruiting-past-rounds-list {
  display: grid;
  gap: 8px;
}

.recruiting-past-round-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #d7e4f0;
  border-radius: 8px;
  padding: 11px 12px;
  background: #fbfdff;
}

.recruiting-past-round-item strong {
  color: #17213a;
  font-size: 14px;
  font-weight: 900;
}

.recruiting-past-round-item .recruiting-status {
  flex: 0 0 auto;
}

.recruiting-history-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
  gap: 18px;
  border: 1px solid #dbe5ef;
  border-radius: 10px;
  padding: 18px;
  background: #f8fbfd;
}

.recruiting-history-profile strong {
  display: block;
  margin-top: 10px;
  color: #17213a;
  font-size: 22px;
  font-weight: 950;
}

.recruiting-history-profile p,
.recruiting-history-info p,
.recruiting-month-history p {
  margin: 0;
  color: #5b6b83;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
}

.recruiting-history-profile dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.recruiting-history-profile dt {
  color: #6a7a92;
  font-size: 12px;
  font-weight: 900;
}

.recruiting-history-profile dd {
  margin: 5px 0 0;
  color: #17213a;
  font-weight: 950;
}

.recruiting-history-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.recruiting-history-info > div {
  min-height: 104px;
  border: 1px solid #dbe5ef;
  border-radius: 9px;
  padding: 14px;
  background: #ffffff;
}

.recruiting-history-info strong,
.recruiting-month-history h3 {
  display: block;
  margin: 0 0 8px;
  color: #17213a;
  font-size: 14px;
  font-weight: 950;
}

.recruiting-history-info a {
  color: var(--teal-dark);
  font-weight: 900;
  word-break: break-all;
}

.recruiting-month-history {
  display: grid;
  gap: 12px;
}

.recruiting-month-history-item {
  display: grid;
  gap: 12px;
  border: 1px solid #dbe5ef;
  border-radius: 10px;
  padding: 14px;
  background: #ffffff;
}

.recruiting-month-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.recruiting-month-history-head strong {
  color: #17213a;
  font-size: 15px;
  font-weight: 700;
}

.recruiting-month-history-head span {
  color: #0795a7;
  font-size: 13px;
  font-weight: 600;
}

.recruiting-month-history-item dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.recruiting-month-history-item dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.recruiting-month-history-item dd {
  margin: 4px 0 0;
  color: #17213a;
  font-size: 13px;
  font-weight: 600;
}

.recruiting-month-history-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.recruiting-month-history-notes section {
  border-radius: 8px;
  padding: 12px;
  background: #f8fbfd;
}

.recruiting-month-history-notes h4 {
  margin: 0 0 6px;
  color: #34445f;
  font-size: 13px;
  font-weight: 650;
}

.recruiting-month-history-notes p {
  white-space: pre-wrap;
}

.recruiting-context-menu button {
  color: #087d89;
  border-color: #bfe6ec;
  background: #effcfd;
}

.recruiting-schedule-choice-body {
  display: grid;
  gap: 12px;
}

.recruiting-schedule-choice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  width: 100%;
  border: 1px solid #dbe5ef;
  border-radius: 10px;
  padding: 14px;
  color: #17213a;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.recruiting-schedule-choice:hover {
  border-color: rgba(7, 149, 167, 0.34);
  background: #f4fcfd;
  box-shadow: 0 10px 24px rgba(7, 149, 167, 0.11);
}

.recruiting-schedule-choice > span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--teal);
  font-weight: 950;
}

.recruiting-schedule-choice strong {
  font-size: 15px;
  font-weight: 950;
}

.recruiting-schedule-choice em {
  color: #64748b;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.recruiting-channel-color-grid {
  display: grid;
  gap: 14px;
}

.recruiting-corner-config-list {
  display: grid;
  gap: 10px;
}

.recruiting-corner-config-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 64px 52px;
  align-items: center;
  gap: 10px;
}

.recruiting-corner-config-row input[type="text"] {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  background: #ffffff;
  color: #34445f;
  font-weight: 800;
}

.recruiting-corner-config-row input[type="color"] {
  width: 54px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px;
  background: #ffffff;
}

.recruiting-corner-remove {
  min-height: 36px;
  border: 0;
  color: #b91c1c;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}

.recruiting-corner-order-controls {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.recruiting-corner-order-controls button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #d7e3de;
  border-radius: 8px;
  background: #f8fbfa;
  color: #35655c;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.recruiting-corner-order-controls button:hover:not(:disabled) {
  border-color: #8fc7b8;
  background: #eaf7f2;
}

.recruiting-corner-order-controls button:disabled {
  opacity: .3;
  cursor: default;
}

.recruiting-corner-add {
  justify-self: start;
}

.recruiting-candidate-grid textarea,
.recruiting-progress-editor textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.6;
}

.recruiting-compact-editor textarea {
  min-height: 126px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.recruiting-candidate-grid .compact-note textarea {
  min-height: 74px;
}

.recruiting-candidate-grid .large-note textarea {
  min-height: 154px;
}

.recruiting-progress-modal {
  width: min(680px, calc(100vw - 48px));
}

.recruiting-progress-help {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.recruiting-progress-body {
  display: grid;
  gap: 16px;
}

.recruiting-progress-history {
  display: grid;
  gap: 10px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.recruiting-progress-history-item {
  display: grid;
  gap: 8px;
  border: 1px solid #e5edf5;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
}

.recruiting-progress-history-item.archived {
  border-color: #cfe9ed;
  background: #f6fcfd;
}

.recruiting-history-edit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.recruiting-history-edit > label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;
}

.recruiting-history-edit input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.recruiting-history-edit-button span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid #bfdae6;
  border-radius: 7px;
  padding: 0 9px;
  color: #087d89;
  background: #f0fbfc;
  font-size: 12px;
  font-weight: 950;
}

.recruiting-history-edit-button:hover span,
.recruiting-history-edit-button input:checked + span {
  border-color: #8fd0dc;
  background: #dcf7fa;
}

.recruiting-history-edit-box {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  border: 1px solid #dbe8f0;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.recruiting-history-delete-button {
  min-height: 28px;
  border: 1px solid #fecaca;
  border-radius: 7px;
  padding: 0 9px;
  color: #b91c1c;
  background: #fff5f5;
  font-size: 12px;
  font-weight: 950;
}

.recruiting-history-delete-button:hover {
  border-color: #fca5a5;
  background: #fee2e2;
}

.recruiting-history-edit-box[hidden] {
  display: none !important;
}

.recruiting-history-edit-box textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid #dbe6ef;
  border-radius: 7px;
  padding: 9px 10px;
  color: #17213a;
  background: #fbfdff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  resize: vertical;
}

.recruiting-history-edit-box button {
  min-height: 38px;
  white-space: nowrap;
}

.recruiting-progress-history-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recruiting-progress-label-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.recruiting-progress-label-control input {
  width: 128px;
  min-height: 30px;
  border: 1px solid #dbe6ef;
  border-radius: 7px;
  padding: 0 9px;
  color: #17213a;
  background: #fbfdff;
  font-size: 12px;
  font-weight: 900;
}

.recruiting-progress-history-meta strong {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 11px;
  color: var(--teal-dark);
  background: #e9f8fa;
  font-size: 12px;
  font-weight: 950;
}

.recruiting-progress-history-item p {
  margin: 0;
  color: #17213a;
  font-weight: 850;
  line-height: 1.55;
  white-space: pre-wrap;
}

.recruiting-history-snapshot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.recruiting-history-snapshot div {
  min-width: 0;
  border: 1px solid #dbeaf0;
  border-radius: 7px;
  padding: 8px 9px;
  background: #ffffff;
}

.recruiting-history-snapshot dt {
  margin-bottom: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.recruiting-history-snapshot dd {
  margin: 0;
  color: #17213a;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.recruiting-history-snapshot-notes {
  display: grid;
  gap: 8px;
}

.recruiting-history-snapshot-notes section {
  border: 1px solid #dbeaf0;
  border-radius: 7px;
  padding: 9px 10px;
  background: #ffffff;
}

.recruiting-history-snapshot-notes h4 {
  margin: 0 0 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.recruiting-history-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recruiting-history-links a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--teal-dark);
  background: #e9f8fa;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.recruiting-progress-history-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 18px;
  color: #94a3b8;
  background: #ffffff;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}

.recruiting-progress-editor-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.recruiting-progress-editor-title strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--teal-dark);
  background: #e9f8fa;
  font-size: 12px;
  font-weight: 950;
}

body.is-resizing-recruiting-column {
  cursor: col-resize;
  user-select: none;
}

.dashboard-redesign-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
  margin: 0 8px;
}

.dashboard-main-panel,
.dashboard-side-panel {
  min-width: 0;
}

.dashboard-side-panel {
  display: grid;
  gap: 14px;
}

.monthly-timeline-card,
.quick-check-card,
.workload-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(24, 58, 92, 0.06);
}

.monthly-timeline-card {
  overflow: hidden;
}

.timeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.timeline-toolbar h2 {
  color: #17213a;
  font-size: 20px;
}

.timeline-toolbar p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.timeline-controls {
  display: inline-flex;
  gap: 7px;
}

.timeline-controls button {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  background: #fff;
  color: #31415f;
  font-weight: 900;
}

.timeline-controls button:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.timeline-legend {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: #50607a;
  font-size: 12px;
  font-weight: 900;
}

.timeline-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.timeline-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.timeline-legend .active { background: var(--teal); }
.timeline-legend .waiting { background: var(--orange); }
.timeline-legend .review { background: var(--violet); }
.timeline-legend .risk { background: var(--red); }
.timeline-legend .done { background: #9aa8b8; }

.timeline-grid {
  overflow: auto;
  max-height: calc(100vh - 330px);
  min-height: 560px;
  background: #f7fafc;
}

.timeline-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f8fbff;
}

.timeline-scroll-top > div {
  height: 1px;
  min-width: calc(var(--fixed-cols, 434px) + (var(--days, 1) * var(--day-width, 48px)));
}

.monthly-timeline-card .timeline-controls {
  display: none;
}

.timeline-header,
.timeline-row {
  display: grid;
  grid-template-columns: var(--task-col, 230px) var(--owner-col, 118px) var(--status-col, 86px) repeat(var(--days), minmax(var(--day-width), 1fr));
  min-width: calc(var(--fixed-cols, 434px) + (var(--days) * var(--day-width)));
}

.timeline-header {
  position: sticky;
  top: 0;
  z-index: 12;
  min-height: 42px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}

.timeline-head-cell,
.timeline-day-head {
  display: grid;
  place-items: center;
  justify-content: center;
  justify-items: center;
  text-align: center;
  border-right: 1px solid var(--line);
  color: #40516b;
  font-size: 12px;
  font-weight: 900;
}

.timeline-head-cell {
  position: sticky;
  z-index: 14;
  align-items: center;
  justify-content: center;
  background: #fbfdff;
}

.timeline-col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 25;
  width: 8px;
  height: 100%;
  cursor: col-resize;
}

.timeline-col-resizer::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 3px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

.timeline-col-resizer:hover::after,
.is-resizing-dashboard-column .timeline-col-resizer::after {
  background: var(--teal);
}

.is-resizing-dashboard-column {
  cursor: col-resize;
  user-select: none;
}

.timeline-head-cell.task { left: 0; }
.timeline-head-cell.owner { left: var(--task-col, 230px); }
.timeline-head-cell.status { left: calc(var(--task-col, 230px) + var(--owner-col, 118px)); }

.timeline-day-head.weekend {
  color: #ef4444;
  background: #fff8f8;
}

.timeline-day-head.today-column {
  position: relative;
  color: var(--teal-dark);
  background: #e5f6f5;
}

.timeline-day-head em {
  position: absolute;
  bottom: 2px;
  border-radius: 999px;
  padding: 1px 6px;
  color: #fff;
  background: var(--teal);
  font-size: 10px;
  font-style: normal;
}

.timeline-body {
  display: grid;
}

.timeline-row {
  position: relative;
  min-height: 124px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.timeline-row:hover {
  background: #fbfdff;
}

.timeline-row[data-dashboard-group] {
  cursor: pointer;
}

.timeline-row.selected-group {
  background: #f0fbfc;
}

.timeline-task-name,
.timeline-owner,
.timeline-status {
  position: sticky;
  z-index: 18;
  display: grid;
  align-content: center;
  border-right: 1px solid var(--line);
  background: #fff;
}

.timeline-task-name {
  left: 0;
  gap: 3px;
  padding: 0 12px;
}

.timeline-task-name strong {
  overflow: hidden;
  color: #17213a;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-task-name small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-owner {
  left: var(--task-col, 230px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  text-align: center;
}

.timeline-owner .owner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  max-width: 94px;
  font-size: 10px;
  line-height: 1.1;
}

.timeline-owner .owner-badge > span:last-child {
  max-width: 62px;
  white-space: nowrap;
}

.timeline-owner .mini-avatar {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.timeline-status {
  left: calc(var(--task-col, 230px) + var(--owner-col, 118px));
  justify-items: center;
}

.timeline-status span {
  border-radius: 999px;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.timeline-status .active { color: var(--teal-dark); background: var(--teal-soft); }
.timeline-status .waiting { color: #b45309; background: var(--orange-soft); }
.timeline-status .review { color: var(--violet); background: var(--violet-soft); }
.timeline-status .risk { color: var(--red); background: var(--red-soft); }
.timeline-status .done { color: #64748b; background: #eef2f7; }

.timeline-day-cell {
  grid-row: 1;
  z-index: 1;
  min-height: 124px;
  border-right: 1px solid #e8eef5;
  background: #fff;
}

.timeline-day-cell.weekend {
  background: #fffafa;
}

.timeline-day-cell.today-column {
  border-left: 1px dashed var(--teal);
  background: linear-gradient(90deg, rgba(7, 149, 167, 0.08), rgba(7, 149, 167, 0.02));
}

.timeline-bar {
  grid-row: 1;
  align-self: center;
  position: relative;
  z-index: 6;
  min-height: 4px;
  border-radius: 999px;
  box-shadow: none;
}

.timeline-bar span {
  display: none;
}

.timeline-bar.active { background: var(--teal); }
.timeline-bar.waiting { background: #aeb8c5; }
.timeline-bar.review { background: var(--violet); }
.timeline-bar.risk { background: var(--red); }
.timeline-bar.done { background: #9aa8b8; opacity: 0.72; box-shadow: none; }

.timeline-marker {
  grid-row: 1;
  z-index: 9;
  align-self: stretch;
  justify-self: center;
  position: relative;
  transform: none;
  display: block;
  width: 82px;
  min-width: 0;
  height: 100%;
  color: #17213a;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
}

.timeline-marker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
}

.timeline-marker b {
  position: absolute;
  top: calc(50% + 13px + (var(--marker-row) * 18px));
  left: 50%;
  max-width: 78px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-marker.deadline {
  color: var(--red);
}

.timeline-marker.deadline::before {
  border-color: var(--red);
}

.timeline-marker.uploadDate::before { border-color: var(--teal); }
.timeline-marker.shootDate::before { border-color: var(--blue); }
.timeline-marker.reviewDueDate::before { border-color: var(--violet); }
.timeline-marker.subtitleDueDate::before { border-color: var(--orange); }
.timeline-marker.vendorDueDate::before { border-color: #64748b; }
.timeline-marker.stagePoint::before { border-color: #94a3b8; }
.timeline-marker.currentStagePoint::before { border-color: var(--teal); background: var(--teal); }
.timeline-marker.waitingPoint {
  color: #b45309;
}
.timeline-marker.waitingPoint::before {
  border-color: var(--orange);
  background: var(--orange);
}

.timeline-marker small { display: none; }

.timeline-linked-tasks {
  display: none;
  border-top: 1px solid var(--line);
  background: #fff;
}

.timeline-linked-inline {
  display: block;
  min-width: calc(var(--fixed-cols, 434px) + (var(--days) * var(--day-width)));
  border-bottom: 1px solid var(--line);
  background: #f8fbff;
}

.timeline-linked-band {
  position: sticky;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--fixed-cols, 434px);
  min-height: 32px;
  padding: 0 12px;
  border-left: 3px solid var(--teal);
  background: linear-gradient(90deg, rgba(7, 149, 167, 0.06), rgba(255, 255, 255, 0.96) 220px);
}

.timeline-linked-band strong {
  overflow: hidden;
  color: #17213a;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-linked-band span {
  margin-left: auto;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.timeline-row.linked-child-row {
  min-height: 108px;
  border-left: 3px solid rgba(7, 149, 167, 0.3);
  background: #fbfdff;
}

.timeline-row.linked-child-row .timeline-day-cell {
  min-height: 108px;
  background: #fbfdff;
}

.timeline-row.linked-child-row .timeline-task-name {
  padding-left: 22px;
  background: #fbfdff;
}

.timeline-row.linked-child-row .timeline-task-name strong {
  font-size: 11px;
}

.timeline-row.linked-child-row .timeline-task-name small {
  font-size: 9px;
}

.timeline-row.linked-child-row .timeline-owner,
.timeline-row.linked-child-row .timeline-status {
  background: #fbfdff;
}

.timeline-linked-empty {
  padding: 13px 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.timeline-linked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 6px;
}

.timeline-linked-head strong {
  color: #17213a;
  font-size: 12px;
}

.timeline-linked-head span {
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 900;
}

.timeline-linked-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  padding: 0 14px 12px;
}

.timeline-linked-item {
  display: grid;
  grid-template-columns: minmax(0, 82px) minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  background: #fbfdff;
  color: #24304a;
  font: inherit;
  text-align: left;
}

.timeline-linked-item .owner-badge {
  max-width: 82px;
  gap: 5px;
  font-size: 10px;
}

.timeline-linked-item .mini-avatar {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.timeline-linked-item strong,
.timeline-linked-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-linked-item strong {
  font-size: 11px;
}

.timeline-linked-item em {
  border-radius: 999px;
  padding: 3px 6px;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.timeline-linked-item small {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.timeline-empty {
  display: grid;
  place-items: center;
  min-height: 360px;
  color: var(--muted);
  background: #fff;
  font-weight: 900;
}

.side-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.side-card-head h2 {
  color: #17213a;
  font-size: 18px;
}

.side-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.quick-check-list,
.workload-list {
  display: grid;
}

.quick-check-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.quick-check-row:last-child {
  border-bottom: 0;
}

.quick-check-row span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-weight: 950;
}

.quick-check-row strong {
  color: #24304a;
  font-size: 14px;
}

.quick-check-row em {
  font-style: normal;
  font-size: 18px;
  font-weight: 950;
}

.quick-check-row.red span,
.quick-check-row.red em { color: var(--red); background: var(--red-soft); }
.quick-check-row.orange span,
.quick-check-row.orange em { color: var(--orange); background: var(--orange-soft); }
.quick-check-row.violet span,
.quick-check-row.violet em { color: var(--violet); background: var(--violet-soft); }
.quick-check-row.muted span,
.quick-check-row.muted em { color: #64748b; background: #eef2f7; }

.workload-list {
  gap: 14px;
  padding: 16px;
}

.workload-row {
  display: grid;
  gap: 8px;
}

.workload-person {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.workload-person strong,
.workload-person small {
  display: block;
}

.workload-person strong {
  overflow: hidden;
  color: #24304a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workload-person small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.workload-person em {
  color: #24304a;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.workload-bar {
  height: 8px;
  border-radius: 999px;
  background: #e8eef5;
  overflow: hidden;
}

.workload-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.workload-row.orange .workload-bar i { background: var(--orange); }
.workload-row.red .workload-bar i { background: var(--red); }

.side-empty {
  padding: 18px;
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

#dashboardPage .summary-card {
  gap: 8px;
  padding: 14px 12px;
}

#dashboardPage .summary-icon {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  font-size: 18px;
}

#dashboardPage .summary-card p,
#dashboardPage .summary-card small {
  word-break: keep-all;
}

#dashboardPage .summary-card p {
  font-size: 12px;
}

#dashboardPage .summary-card small {
  font-size: 11px;
}

#dashboardPage .summary-card strong {
  font-size: 28px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  min-width: 0;
  overflow-x: hidden;
}

body.auth-locked .app-shell {
  display: none;
}

.auth-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f7fafc;
}

.auth-card {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-card h1 {
  margin-bottom: 8px;
}

.auth-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.auth-card label {
  display: grid;
  gap: 6px;
  color: #34445f;
  font-weight: 800;
}

.auth-card input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 11px;
}

.auth-card .auth-remember {
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.auth-card .auth-remember input {
  width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
}

.auth-message {
  min-height: 18px;
  color: var(--red) !important;
  font-size: 13px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button:disabled,
select:disabled,
.disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
  min-width: 0;
  width: 100%;
  transition: grid-template-columns 0.18s ease;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: linear-gradient(180deg, #071728 0%, #0d2135 52%, #071728 100%);
  border-right: 0;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  padding: 24px 14px 18px;
  overflow: hidden;
  transition: padding 0.18s ease;
}

.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 80px; margin: 0 0 34px 8px; color: #f8fbff; letter-spacing: -.02em; }
.logo-mark { display: grid; width: 76px; height: 44px; flex: 0 0 44px; place-items: center; }
.logo-wordmark { display: grid; gap: 5px; line-height: 1; }.logo-wordmark strong, .logo-wordmark em { font-style: normal; }.logo-wordmark strong { color: #f7fbff; font-size: 16px; font-weight: 900; letter-spacing: .10em; }.logo-wordmark em { color: #bdd4e4; font-size: 13px; font-weight: 720; letter-spacing: .02em; }

.nav-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.nav-item {
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 11px 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 720;
  color: #d8e4f0;
  cursor: pointer;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(76, 139, 202, .35), rgba(76, 139, 202, .08));
  color: #eaffff;
}

.nav-item.active::before { position: absolute; top: 50%; left: -14px; width: 3px; height: 20px; border-radius: 0 99px 99px 0; background: #72c6ff; box-shadow: 0 0 12px rgba(114, 198, 255, .76); content: ""; transform: translateY(-50%); }

.recruiting-nav-group {
  margin: -4px 0 4px;
}

.recruiting-child-nav {
  position: relative;
  width: calc(100% - 20px);
  min-height: 34px;
  margin: 1px 0 0 20px;
  padding: 7px 8px 7px 18px;
  color: #b8c8d8;
  font-size: 12px;
  font-weight: 720;
}

.recruiting-child-nav::before {
  position: absolute;
  top: -9px;
  bottom: 50%;
  left: 8px;
  width: 1px;
  background: rgba(216, 228, 240, 0.28);
  content: "";
}

.recruiting-child-nav::after {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 9px;
  height: 1px;
  background: rgba(216, 228, 240, 0.28);
  content: "";
}

.recruiting-child-nav.active {
  background: rgba(10, 125, 140, .14);
  color: #dfffff;
}

.nav-icon {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #a9c5d1;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  transition: color .18s ease, transform .18s ease;
}

.nav-item:hover .nav-icon {
  border: 0;
  background: transparent;
  color: #d8f8f5;
  transform: translateY(-1px);
}

.nav-item.active .nav-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #8bd0ff;
}

.recruiting-child-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 0;
  color: #9ee9e8;
  background: transparent;
  box-shadow: none;
}

.sidebar .recruiting-child-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

.workspace {
  min-width: 0;
  overflow: hidden;
}

body.sidebar-collapsed {
  --sidebar: 64px;
}

body.sidebar-collapsed .app-shell {
  min-width: 0;
}

body.sidebar-collapsed .workspace {
  min-width: 0;
}

body.sidebar-collapsed .sidebar {
  padding: 20px 8px 14px;
}

body.sidebar-collapsed .logo {
  width: 38px;
  min-height: 34px;
  margin: 0 auto 28px;
}

body.sidebar-collapsed .logo-wordmark {
  display: none;
}

body.sidebar-collapsed .logo-mark {
  width: 38px;
  height: 34px;
  flex-basis: 38px;
}


body.sidebar-collapsed .nav-item {
  justify-content: center;
  gap: 0;
  padding: 11px 0;
  font-size: 0;
}

body.sidebar-collapsed .recruiting-nav-group {
  display: contents;
}

body.sidebar-collapsed .recruiting-child-nav {
  display: flex;
  width: 32px;
  min-height: 30px;
  margin: -3px auto 6px;
  padding: 5px;
  align-items: center;
  justify-content: center;
  color: #b8d8e1;
  font-size: 0;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.sidebar-collapsed .recruiting-child-nav::before,
body.sidebar-collapsed .recruiting-child-nav::after { display: none; }

body.sidebar-collapsed .recruiting-child-icon {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.sidebar-collapsed .recruiting-child-icon::after {
  position: absolute;
  top: -5px;
  right: -7px;
  width: 5px;
  height: 5px;
  border: 2px solid #0b2033;
  border-radius: 50%;
  background: #3de0d5;
  box-shadow: 0 0 8px rgba(61, 224, 213, .75);
  content: "";
}

body.sidebar-collapsed .recruiting-child-icon svg {
  width: 15px;
  height: 15px;
}

body.sidebar-collapsed .nav-icon {
  font-size: 18px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 88px;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 0 26px;
  background: #f5f8fc;
  border-bottom: 1px solid #dde6ef;
  backdrop-filter: blur(10px);
}

.menu-button,
.icon-button {
  border: 0;
  background: transparent;
}

.menu-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid #d5e0eb;
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .82);
  color: #213a56;
  font-size: 14px;
  font-weight: 900;
}

.menu-button-icon {
  font-size: 22px;
  line-height: 1;
}

.menu-button-text {
  white-space: nowrap;
}

.top-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #dce6ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 22px rgba(58, 82, 110, .08);
}

.workspace-switcher {
  position: relative;
  min-height: 42px;
  min-width: 190px;
  max-width: 260px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 34px 6px 12px;
  color: #0f1c38;
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.workspace-switcher span,
.workspace-switcher strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-switcher span {
  color: #607089;
  font-size: 10px;
}

.workspace-switcher strong {
  color: #13213a;
  font-size: 13px;
}

.master-view-button {
  min-height: 42px;
  min-width: 138px;
  border: 1px solid #bfe6ec;
  border-radius: 6px;
  padding: 6px 12px;
  color: #087d89;
  background: #effcfd;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.master-view-button span,
.master-view-button strong {
  display: block;
  line-height: 1.15;
}

.master-view-button span {
  color: #0d95a5;
  font-size: 10px;
}

.master-view-button strong {
  color: #0f5f68;
  font-size: 13px;
}

.master-view-button.active {
  border-color: #0ea5b4;
  color: #ffffff;
  background: #0795a7;
}

.master-view-button.active span,
.master-view-button.active strong {
  color: #ffffff;
}

.command-control {
  display: inline-flex;
  min-width: 0;
  min-height: 60px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-right: 1px solid #e1e9f1;
  border-radius: 0;
  padding: 9px 14px;
  color: #17324d;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.workspace-switcher.command-control { min-width: 180px; max-width: 246px; }
.master-view-button.command-control { min-width: 168px; }
.profile.command-control { min-width: 150px; border-right: 0; padding-right: 12px; }
.command-copy { display: grid; min-width: 0; gap: 4px; flex: 1; }
.command-label { display: block; color: #62738a; font-size: 11px; font-weight: 780; line-height: 1; }
.command-copy strong { display: block; overflow: hidden; color: #1b3552; font-size: 14px; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.command-chevron { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid #dbe6ef; border-radius: 9px; color: #284563; background: #f9fbfe; }
.command-chevron svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.command-control:hover { background: #f5f9fd; }
.command-control:hover .command-chevron { border-color: #a9c8e6; color: #0a67b0; background: #edf6ff; }
.master-view-button.command-control.active { border-color: #e1e9f1; color: #17324d; background: #f1f7fe; }
.master-view-button.command-control.active .command-label,
.master-view-button.command-control.active .command-copy strong { color: #1b3552; }

.backup-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #fbfdff;
}

.workspace-picker-modal {
  width: min(420px, calc(100vw - 28px));
}

.transfer-modal {
  width: min(390px, calc(100vw - 28px));
}

.transfer-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px 12px;
  color: #41516a;
}

.transfer-summary strong {
  display: block;
  color: #13213a;
  font-size: 15px;
  line-height: 1.25;
}

.transfer-summary span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.transfer-summary em {
  border-radius: 999px;
  padding: 5px 8px;
  color: #36536b;
  background: #eef4f7;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.workspace-picker-list {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.workspace-picker-list button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: #20304c;
  cursor: pointer;
  text-align: left;
}

.workspace-picker-list button.active {
  border-color: var(--teal);
  background: #eefbfc;
}

.workspace-picker-list button.pending,
.workspace-picker-list button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  background: #f8fafc;
}

.workspace-picker-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-picker-list em {
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--teal-dark);
  background: #dff6f7;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.transfer-target-list {
  gap: 8px;
  padding: 12px 14px 14px;
}

.transfer-target-list button {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 46px;
  padding: 8px 10px;
}

.transfer-target-list button:hover {
  border-color: #a8d7dc;
  background: #f5fbfc;
}

.transfer-target-list .mini-avatar {
  width: 26px;
  height: 26px;
  font-size: 12px;
}

.team-board-head {
  align-items: flex-end;
}

.team-board-shell {
  display: grid;
  gap: 14px;
}

.team-board-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.team-board-summary article {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 33, 58, 0.06);
}

.team-board-summary article.pending {
  grid-column: span 2;
  background: #fffaf0;
}

.team-board-summary span {
  display: block;
  color: #5f6f88;
  font-size: 12px;
  font-weight: 800;
}

.team-board-summary strong {
  display: block;
  margin-top: 8px;
  color: #101f3a;
  font-size: 24px;
  line-height: 1.1;
}

.team-board-summary article.pending strong {
  font-size: 15px;
}

.team-board-list {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(15, 33, 58, 0.06);
}

.team-board-filter-bar {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}

.team-board-filter-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid #d8e3ed;
  border-radius: 999px;
  padding: 0 12px;
  color: #3a4d68;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.team-board-filter-bar button.active {
  border-color: #0795a7;
  color: #087d89;
  background: #e9fbfc;
  box-shadow: 0 8px 20px rgba(7, 149, 167, 0.12);
}

.team-board-filter-bar strong {
  min-width: 22px;
  border-radius: 999px;
  padding: 2px 7px;
  color: #ffffff;
  background: #0795a7;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.team-board-filter-bar button:not(.active) strong {
  color: #52657d;
  background: #edf3f7;
}

.team-board-table {
  min-width: 1060px;
}

.team-board-row {
  display: grid;
  grid-template-columns: 190px minmax(280px, 1.45fr) 140px minmax(220px, 1fr) 180px 110px;
  align-items: center;
  gap: 0;
  min-height: 74px;
  border-bottom: 1px solid #e1e8f0;
}

.team-board-row:last-child {
  border-bottom: 0;
}

.team-board-row > div {
  min-width: 0;
  padding: 12px 14px;
}

.team-board-row-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 44px;
  color: #384b68;
  background: #f6f9fc;
  font-size: 12px;
  font-weight: 900;
}

.team-board-row.is-done {
  color: #6e7d92;
  background: #fbfcfd;
}

.team-board-owner {
  display: grid;
  gap: 5px;
}

.team-board-owner .owner-badge {
  justify-content: flex-start;
}

.team-board-owner small,
.team-board-info span,
.team-board-row small {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-board-info strong {
  display: block;
  overflow: hidden;
  color: #13213a;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-board-info span {
  margin-top: 5px;
}

.team-board-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.team-board-status.active {
  color: #087d89;
  background: #dff6f7;
}

.team-board-status.waiting {
  color: #bd6200;
  background: #fff1dc;
}

.team-board-status.review {
  color: #6740c8;
  background: #eee8ff;
}

.team-board-status.risk {
  color: #dc2626;
  background: #ffe5e5;
}

.team-board-status.done {
  color: #64748b;
  background: #eef2f6;
}

.team-board-action,
.team-board-due {
  overflow: hidden;
  color: #263955;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-board-empty {
  padding: 48px 20px;
  color: #607089;
  font-weight: 800;
  text-align: center;
}

.competitor-page {
  background:
    radial-gradient(circle at 88% 4%, rgba(38, 121, 238, 0.08), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #f4f8fb 100%);
}

.competitor-page-inner {
  display: grid;
  gap: 22px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 30px 38px 44px;
}

#competitorDashboardView {
  display: grid;
  gap: 24px;
}

.competitor-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.competitor-hero h1 {
  margin: 0;
  color: #0f172a;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: 0;
}

.competitor-hero p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.competitor-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.competitor-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 148px;
  height: 48px;
  border-radius: 8px;
  box-shadow: 0 14px 26px rgba(38, 121, 238, 0.18);
}

.competitor-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  height: 48px;
  border-radius: 8px;
  font-weight: 900;
}

.competitor-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 16px;
}

.competitor-stat-card,
.competitor-section,
.competitor-quick-card,
.competitor-report-card {
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.055);
}

.competitor-stat-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 104px;
  padding: 20px 22px;
}

.competitor-stat-icon,
.competitor-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--teal);
  background: var(--teal-soft);
  line-height: 0;
}

.competitor-stat-icon svg,
.competitor-quick-icon svg,
.competitor-report-top > span svg {
  display: block;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.competitor-stat-card.green .competitor-stat-icon {
  color: #0f9f6e;
  background: #e8f8ef;
}

.competitor-stat-card.blue .competitor-stat-icon {
  color: var(--blue);
  background: var(--blue-soft);
}

.competitor-stat-card.violet .competitor-stat-icon {
  color: var(--violet);
  background: var(--violet-soft);
}

.competitor-stat-card.pink .competitor-stat-icon {
  color: #e11d48;
  background: #ffe8ef;
}

.competitor-stat-card p,
.competitor-stat-card small {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-stat-card p {
  color: #334155;
  font-size: 13px;
  line-height: 1.25;
}

.competitor-stat-card strong {
  display: block;
  margin: 6px 0 6px;
  color: #0f172a;
  font-size: 25px;
  font-weight: 820;
  line-height: 1.05;
  letter-spacing: 0;
}

.competitor-stat-card small {
  font-size: 12px;
  line-height: 1.25;
}

.competitor-section {
  padding: 22px;
}

.competitor-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.competitor-section-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 760;
  white-space: nowrap;
}

.competitor-section-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-section-head button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 700;
}

.competitor-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 16px;
}

.competitor-quick-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 18px;
  min-height: 106px;
  padding: 20px 22px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.competitor-quick-card:hover {
  border-color: rgba(38, 121, 238, 0.5);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.09);
  transform: translateY(-1px);
}

.competitor-quick-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.competitor-quick-card strong {
  color: #0f172a;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 760;
  white-space: nowrap;
}

.competitor-quick-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-quick-card em {
  color: #66758d;
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}

.competitor-quick-card b {
  grid-column: 3;
  justify-self: end;
  color: #8493a8;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.competitor-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.7fr) minmax(620px, 1.3fr);
  gap: 14px;
  align-items: stretch;
}

.competitor-group-list {
  display: grid;
  gap: 8px;
}

.competitor-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  border: 1px solid rgba(224, 232, 242, 0.95);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #fff, #fbfdff);
}

.competitor-group-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.competitor-group-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--teal);
  background: var(--teal-soft);
  font-size: 14px;
  font-weight: 950;
}

.competitor-group-main strong,
.competitor-group-main small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-group-main strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

.competitor-group-main small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.competitor-group-meta {
  display: grid;
  gap: 7px;
  color: #5d6c82;
  font-size: 12px;
  font-weight: 850;
}

.competitor-group-meta em {
  overflow: hidden;
  color: #31415f;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-group-meter {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #edf2f7;
}

.competitor-group-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f9f9f, #2679ee);
}

.competitor-new-head {
  display: grid;
  gap: 18px;
}

.competitor-back-button {
  justify-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
}

.competitor-new-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1.18fr) minmax(360px, 0.82fr);
  gap: 30px;
  align-items: start;
}

.competitor-new-form {
  display: grid;
  gap: 28px;
  padding: 28px 30px;
}

.competitor-form-block {
  display: grid;
  gap: 14px;
}

.competitor-form-block h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
}

.competitor-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 14px;
}

.competitor-choice-card {
  position: relative;
  display: grid;
  min-height: 84px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px 16px 14px;
  background: #fff;
  color: #263550;
  text-align: left;
  box-shadow: 0 8px 18px rgba(24, 58, 92, 0.05);
}

.competitor-choice-card.active {
  border-color: var(--blue);
  background: #f7fbff;
  box-shadow: 0 0 0 2px rgba(38, 121, 238, 0.1);
}

.competitor-choice-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 12px;
  font-weight: 950;
}

.competitor-choice-card strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

.competitor-choice-card small,
.competitor-choice-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.competitor-choice-card b {
  position: absolute;
  right: 15px;
  bottom: 13px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 950;
}

.competitor-field,
.competitor-date-row label {
  display: grid;
  gap: 8px;
  color: #263550;
  font-size: 13px;
  font-weight: 900;
}

.competitor-field select,
.competitor-inline-input,
.competitor-date-row input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: #0f172a;
  background: #fff;
  font-size: 15px;
  font-weight: 850;
}

.competitor-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.competitor-date-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 14px;
}

.competitor-chip-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 2px;
}

.competitor-preview-panel {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 18px;
  padding: 28px;
}

.competitor-preview-stack {
  display: grid;
  gap: 16px;
}

.competitor-preview-stack article {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 100px;
  border: 1px solid rgba(224, 232, 242, 0.95);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(24, 58, 92, 0.05);
}

.competitor-preview-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: var(--teal);
  background: var(--teal-soft);
  font-size: 22px;
  font-weight: 950;
}

.competitor-preview-icon.green {
  color: #0f9f6e;
  background: #e8f8ef;
}

.competitor-preview-icon.violet {
  color: var(--violet);
  background: var(--violet-soft);
}

.competitor-preview-icon.blue {
  color: var(--blue);
  background: var(--blue-soft);
}

.competitor-preview-stack small,
.competitor-preview-stack em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.competitor-preview-stack strong {
  display: block;
  margin: 5px 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 950;
}

.competitor-policy-box {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  background: #fbfdff;
  color: #516178;
  font-size: 13px;
  font-weight: 850;
}

.competitor-policy-box strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.competitor-policy-box span::before {
  content: "??;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 999px;
  color: #15803d;
  background: #e8f8ef;
  font-size: 11px;
  font-weight: 950;
}

.competitor-start-button {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
}

.competitor-start-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.competitor-preview-help {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.competitor-channel-hero {
  align-items: center;
  margin-bottom: 8px;
}

.competitor-channel-hero h1 {
  margin-bottom: 12px;
}

.competitor-channel-hero p {
  max-width: 520px;
  color: #52627a;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
}

.competitor-channel-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 8px;
  margin-bottom: 2px;
}

.competitor-channel-summary .competitor-stat-card {
  min-height: 116px;
  padding: 24px 26px;
  gap: 22px;
  border-color: rgba(190, 213, 235, 0.95);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

.competitor-channel-summary .competitor-stat-icon {
  width: 62px;
  height: 62px;
}

.competitor-channel-summary .competitor-stat-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 2.05;
}

.competitor-channel-summary .competitor-stat-card p {
  font-size: 13px;
  font-weight: 560;
}

.competitor-channel-summary .competitor-stat-card strong {
  margin: 7px 0 7px;
  font-size: 28px;
  font-weight: 800;
}

.competitor-channel-summary .competitor-stat-card small {
  font-size: 12px;
  font-weight: 500;
}

.competitor-channel-panel {
  display: grid;
  gap: 18px;
  margin-top: 10px;
  padding: 24px;
  border-color: rgba(203, 215, 229, 0.95);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.07);
}

.competitor-channel-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) auto minmax(300px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 2px;
}

.competitor-channel-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: #7b8aa0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.competitor-channel-search span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #64748b;
  font-size: 14px;
  line-height: 1;
}

.competitor-channel-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #0f172a;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
}

.competitor-channel-filters,
.competitor-channel-groups {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

.competitor-channel-groups .competitor-filter-chip {
  flex: 0 0 auto;
}

.competitor-channel-sort {
  min-height: 42px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.competitor-channel-table {
  overflow: auto hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

.competitor-channel-row {
  display: grid;
  grid-template-columns: minmax(300px, 1.35fr) 150px 104px 158px minmax(240px, 1fr) 158px;
  min-width: 1110px;
  min-height: 68px;
  border-bottom: 1px solid var(--line);
}

.competitor-channel-row:last-child {
  border-bottom: 0;
}

.competitor-channel-row > div {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 13px 16px;
  color: #263550;
  font-size: 13px;
  font-weight: 500;
}

.competitor-channel-head {
  min-height: 48px;
  background: #f8fafc;
}

.competitor-channel-head > div {
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.competitor-channel-name {
  gap: 13px;
}

.competitor-channel-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #0f9f9f, #2563eb);
  font-size: 14px;
  font-weight: 750;
  overflow: hidden;
}

.competitor-channel-badge.has-image {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: #f8fafc;
}

.competitor-channel-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.competitor-channel-name strong,
.competitor-channel-name span,
.competitor-channel-memo {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-channel-name strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.competitor-channel-name span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.competitor-channel-group,
.competitor-channel-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 7px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.competitor-channel-group {
  color: #1d4ed8;
  background: #dbeafe;
}

.competitor-channel-status.active {
  color: #15803d;
  background: #dcfce7;
}

.competitor-channel-status.inactive {
  color: #64748b;
  background: #f1f5f9;
}

.competitor-channel-views {
  color: #0f172a;
  font-weight: 700;
  white-space: nowrap;
}

.competitor-row-menu {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: #5d6c82;
  background: transparent;
  font-size: 20px;
  font-weight: 950;
}

.competitor-row-menu:hover {
  background: #f1f5f9;
}

.competitor-channel-actions {
  gap: 8px;
}

.competitor-channel-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 11px;
  color: #263550;
  background: #fff;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.competitor-channel-actions button:hover {
  border-color: rgba(38, 121, 238, 0.45);
  color: var(--blue);
  background: #f7fbff;
}

.competitor-channel-empty {
  padding: 28px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
  text-align: center;
}

.competitor-channel-modal,
.competitor-group-modal {
  width: min(680px, calc(100vw - 36px));
}

.competitor-channel-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.competitor-channel-form-grid label {
  display: grid;
  gap: 8px;
  color: #263550;
  font-size: 13px;
  font-weight: 900;
}

.competitor-channel-form-grid label.wide,
.competitor-existing-groups.wide {
  grid-column: 1 / -1;
}

.competitor-channel-form-grid input,
.competitor-channel-form-grid select,
.competitor-channel-form-grid textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: #0f172a;
  background: #fff;
  font-size: 14px;
  font-weight: 850;
}

.competitor-channel-form-grid textarea {
  min-height: 88px;
  padding-top: 11px;
  resize: vertical;
}

.competitor-channel-form-grid small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.competitor-active-check {
  align-content: end;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 42px;
}

.competitor-active-check input {
  width: 18px;
  min-height: auto;
  height: 18px;
}

.competitor-existing-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: #fbfdff;
  font-size: 12px;
  font-weight: 850;
}

.competitor-existing-groups span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  color: #263550;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.competitor-existing-groups i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.competitor-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 18px;
}

.competitor-report-card {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
}

.competitor-report-top {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.competitor-report-top > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #475569;
  background: #f1f5f9;
}

.competitor-report-top small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.competitor-report-top strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.competitor-status-badge.completed {
  color: #15803d;
  background: #dcfce7;
}

.competitor-status-badge.running {
  color: #1d4ed8;
  background: #dbeafe;
}

.competitor-status-badge.failed {
  color: #b91c1c;
  background: #fee2e2;
}

.competitor-status-badge.partial {
  color: #b45309;
  background: #fef3c7;
}

.competitor-status-badge.ready {
  color: #475569;
  background: #f1f5f9;
}

.competitor-performance-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 104px;
  min-height: 32px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.competitor-performance-badge em {
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}

.competitor-performance-badge.winner {
  color: #6d28d9;
  background: #f1eafe;
}

.competitor-performance-badge.breakout {
  color: #b91c1c;
  background: #fee2e2;
}

.competitor-performance-badge.good {
  color: #1d4ed8;
  background: #dbeafe;
}

.competitor-performance-badge.normal {
  color: #334155;
  background: #f1f5f9;
}

.competitor-performance-badge.low {
  color: #64748b;
  background: #f8fafc;
}

.competitor-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  color: #263550;
  background: #fff;
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03);
}

.competitor-filter-chip.active {
  border-color: var(--blue);
  color: var(--blue);
  background: #eef5ff;
}

.competitor-filter-chip strong {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  border-radius: 999px;
  padding: 0 6px;
  color: inherit;
  background: rgba(38, 121, 238, 0.1);
  font-size: 12px;
  font-weight: 650;
}

.competitor-report-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.competitor-report-stats div {
  display: grid;
  gap: 7px;
  padding: 13px 10px;
  text-align: center;
}

.competitor-report-stats div + div {
  border-left: 1px solid var(--line);
}

.competitor-report-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.competitor-report-stats strong {
  color: #0f172a;
  font-size: 20px;
  font-weight: 760;
}

.competitor-report-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.competitor-report-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.competitor-report-actions button {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  background: #fff;
  color: var(--blue);
  font-weight: 650;
}

.competitor-report-actions .competitor-report-delete {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fff1f2;
}

.competitor-report-actions .competitor-report-delete:hover {
  border-color: #fca5a5;
  background: #ffe4e6;
}

.competitor-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 150px;
  color: var(--muted);
  font-weight: 900;
}

.competitor-empty strong {
  color: #263550;
  font-size: 15px;
}

.competitor-empty span {
  color: var(--muted);
  font-size: 13px;
}

.competitor-data-table {
  overflow: auto hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}

.competitor-data-row {
  display: grid;
  grid-template-columns: var(--competitor-table-columns, repeat(4, minmax(120px, 1fr)));
  min-width: max-content;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
}

.competitor-data-row:last-child {
  border-bottom: 0;
}

.competitor-data-row > div {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 11px 14px;
  color: #263550;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.35;
}

.competitor-data-row > div + div {
  border-left: 1px solid rgba(203, 213, 225, 0.55);
}

.competitor-data-head {
  min-height: 44px;
  background: #f8fafc;
}

.competitor-data-head > div {
  color: #5d6c82;
  font-size: 12px;
  font-weight: 900;
}

.competitor-sort-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  margin: -4px -6px;
  border: 0;
  border-radius: 6px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.competitor-sort-header:hover {
  color: #0795a7;
  background: rgba(7, 149, 167, 0.08);
}

.competitor-sort-header.active {
  color: #0795a7;
}

.competitor-sort-arrow {
  font-size: 10px;
  line-height: 1;
  opacity: 0.5;
}

.competitor-sort-header.active .competitor-sort-arrow {
  opacity: 1;
}

.competitor-video-title-cell {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.competitor-topic-summary {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  overflow: hidden;
  color: #075985;
  background: #e0f2fe;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #334155;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.competitor-video-hover-preview {
  position: fixed;
  z-index: 2600;
  width: min(var(--competitor-video-preview-width, 360px), calc(100vw - 24px));
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

.competitor-video-hover-preview[hidden] {
  display: none;
}

.competitor-video-hover-preview img,
.competitor-video-preview-empty {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #e2e8f0;
}

.competitor-video-preview-empty {
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.competitor-video-preview-body {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.competitor-video-preview-body strong {
  display: -webkit-box;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.competitor-video-preview-body span {
  overflow: hidden;
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-view-count {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  cursor: help;
}

.competitor-row-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  font-weight: 950;
}

.competitor-video-title-cell {
  display: inline;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none;
}

a.competitor-video-title-cell {
  color: var(--blue);
}

button.competitor-video-title-cell {
  max-width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

a.competitor-video-title-cell,
button.competitor-video-title-cell {
  color: var(--blue);
}

a.competitor-video-title-cell:hover {
  text-decoration: underline;
}

button.competitor-video-title-cell:hover {
  text-decoration: underline;
}

.competitor-video-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.competitor-video-title-wrap .competitor-video-title-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-video-kind-badges {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.competitor-video-kind-badges em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  color: #9f1239;
  background: #ffe4e6;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.competitor-video-preview-link {
  display: grid;
  color: inherit;
  text-decoration: none;
}

.competitor-video-detail-head {
  align-items: center;
  margin-bottom: 10px;
}

.competitor-video-detail-modal {
  width: min(1320px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
}

.competitor-video-detail-modal-head {
  align-items: flex-start;
}

.competitor-video-detail-modal-head > div {
  min-width: 0;
}

.competitor-video-detail-modal-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 850;
}

.competitor-video-detail-modal-head p {
  margin: 6px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-video-detail-modal-body {
  background: #f8fafc;
}

.competitor-video-detail-modal .competitor-video-detail-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
}

.competitor-detail-download {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.competitor-video-detail-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1.08fr) minmax(500px, 0.92fr);
  gap: 24px;
  align-items: start;
}

.competitor-video-detail-left,
.competitor-video-detail-right {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.competitor-video-info-card,
.competitor-video-memo-card,
.competitor-detail-metric,
.competitor-detail-chart-card,
.competitor-detail-recent-card {
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.competitor-video-info-card,
.competitor-video-memo-card,
.competitor-detail-chart-card,
.competitor-detail-recent-card {
  padding: 22px;
}

.competitor-video-info-card h2,
.competitor-video-memo-card h2,
.competitor-detail-card-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 760;
  letter-spacing: 0;
}

.competitor-video-info-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 20px;
}

.competitor-video-detail-media {
  display: block;
  overflow: hidden;
  justify-self: center;
  width: min(100%, 560px);
  border-radius: 8px;
  background: #edf2f7;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.competitor-video-detail-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.competitor-video-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid #edf2f7;
  border-left: 1px solid #edf2f7;
}

.competitor-video-info-list > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 54px;
  border-right: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  padding: 14px 16px;
}

.competitor-video-info-list > div.wide {
  grid-column: 1 / -1;
}

.competitor-video-info-list dt {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}

.competitor-video-info-list dd {
  min-width: 0;
  margin: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 620;
  word-break: keep-all;
}

.competitor-video-info-list dd span {
  margin-left: 8px;
  color: #7b8798;
  font-size: 12px;
  font-weight: 500;
}

.competitor-video-info-list a {
  color: #2563eb;
  text-decoration: none;
  word-break: break-all;
}

.competitor-video-info-list a:hover {
  text-decoration: underline;
}

.competitor-detail-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.competitor-detail-metric {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 108px;
  padding: 18px 18px 18px 88px;
  background: #ffffff;
}

.competitor-detail-metric-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #2563eb;
  background: #eaf2ff;
  line-height: 0;
  transform: translateY(-50%);
}

.competitor-detail-metric-icon svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
}

.competitor-detail-metric.violet .competitor-detail-metric-icon {
  color: #7c3aed;
  background: #f1e8ff;
}

.competitor-detail-metric.blue {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.competitor-detail-metric.violet {
  background: linear-gradient(180deg, #ffffff 0%, #fefbff 100%);
}

.competitor-detail-metric-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  width: 100%;
  height: 52px;
}

.competitor-detail-metric-title {
  display: block;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  white-space: nowrap;
}

.competitor-detail-metric strong {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 7px;
  color: #0f172a;
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0;
  white-space: nowrap;
}

.competitor-detail-metric.violet strong {
  color: #7c3aed;
}

.competitor-detail-value-number {
  display: inline-block;
  font-size: clamp(22px, 1.75vw, 26px);
  line-height: 1;
  font-weight: 820;
}

.competitor-detail-value-unit {
  display: inline-block;
  font-size: clamp(16px, 1.18vw, 19px);
  line-height: 1;
  font-weight: 720;
}

.competitor-detail-metric em {
  display: block;
  margin-top: 5px;
  color: #718096;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.competitor-detail-card-head,
.competitor-video-memo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.competitor-detail-card-head span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #5d6b80;
  font-size: 12px;
  font-weight: 850;
}

.competitor-detail-card-head span b,
.competitor-detail-card-head span i {
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: #2563eb;
}

.competitor-detail-card-head span i {
  background: transparent;
  border-top: 2px dashed #2563eb;
}

.competitor-detail-card-head button {
  border: 0;
  padding: 0;
  color: #2563eb;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.competitor-detail-chart-wrap {
  position: relative;
  margin-top: 16px;
  min-height: 244px;
}

.competitor-detail-chart {
  display: block;
  width: 100%;
  min-height: 244px;
}

.competitor-detail-chart line {
  stroke: #e6edf5;
  stroke-width: 1;
}

.competitor-detail-chart line.baseline {
  stroke: #2563eb;
  stroke-dasharray: 6 6;
}

.competitor-detail-chart polyline {
  fill: none;
  stroke: #2563eb;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.competitor-detail-chart circle {
  fill: #2563eb;
  stroke: #ffffff;
  stroke-width: 2;
}

.competitor-detail-chart text {
  fill: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.competitor-detail-chart text.axis {
  fill: #52627a;
  font-size: 12px;
  font-weight: 850;
}

.competitor-detail-chart-tip {
  position: absolute;
  right: 16px;
  top: 84px;
  display: grid;
  gap: 5px;
  min-width: 154px;
  border: 1px solid rgba(203, 215, 229, 0.95);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
}

.competitor-detail-chart-tip strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.competitor-detail-chart-tip span {
  color: #52627a;
  font-size: 12px;
  font-weight: 800;
}

.competitor-video-memo-card textarea {
  width: 100%;
  min-height: 220px;
  margin-top: 16px;
  border: 1px solid rgba(203, 215, 229, 0.95);
  border-radius: 8px;
  padding: 18px;
  resize: vertical;
  color: #172033;
  background: #fbfdff;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 750;
}

.competitor-video-memo-count {
  display: block;
  margin-top: 10px;
  color: #8a98aa;
  text-align: right;
  font-size: 13px;
  font-weight: 850;
}

.competitor-detail-recent-list {
  display: grid;
  gap: 0;
  margin-top: 16px;
}

.competitor-detail-recent-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 72px;
  gap: 16px;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 12px 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.competitor-detail-recent-item + .competitor-detail-recent-item {
  border-top: 1px solid #eef2f7;
}

.competitor-detail-recent-item:hover strong {
  color: #2563eb;
}

.competitor-detail-recent-item img,
.competitor-detail-recent-thumb {
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  background: #edf2f7;
}

.competitor-detail-recent-thumb {
  display: inline-grid;
  place-items: center;
  color: #0f969f;
  font-size: 18px;
  font-weight: 850;
}

.competitor-detail-recent-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.competitor-detail-recent-copy strong {
  overflow: hidden;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-detail-recent-copy em {
  color: #7b8798;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
}

.competitor-detail-recent-ratio {
  justify-self: end;
  color: #047857;
  background: transparent;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 760;
  white-space: nowrap;
}

.competitor-detail-chart-empty,
.competitor-detail-recent-empty {
  min-height: 180px;
}

.competitor-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.competitor-results-head h1 {
  margin: 12px 0 6px;
  color: #0f172a;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: 0;
}

.competitor-results-head p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.competitor-results-head p span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-left: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: #31415f;
  background: #fff;
  font-weight: 900;
}

.competitor-results-summary {
  margin-top: 4px;
}

.competitor-results-panel {
  display: grid;
  gap: 18px;
}

.competitor-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.competitor-results-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.competitor-results-toolbar label {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 46px;
}

.competitor-results-toolbar span {
  color: #263550;
  font-size: 13px;
  font-weight: 900;
}

.competitor-results-toolbar select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: #0f172a;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.competitor-result-sort {
  min-height: 42px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.competitor-result-channel-list-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
}

.competitor-result-channel-list-button strong {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  padding: 0 6px;
  color: var(--blue);
  background: #eef5ff;
  font-size: 12px;
}

.competitor-result-filter-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.competitor-result-filter-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: #31415f;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.competitor-result-filter-buttons button.active {
  border-color: #0f766e;
  color: #0f766e;
  background: #ecfdf5;
}

.competitor-result-filter-buttons strong {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  padding: 0 6px;
  color: inherit;
  background: rgba(15, 118, 110, 0.11);
  font-size: 12px;
}

.competitor-result-sort-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.competitor-result-channel {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-results-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.competitor-result-pages {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.competitor-result-pages button {
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #31415f;
  background: #fff;
  font-weight: 900;
}

.competitor-result-pages button.active {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.competitor-column-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 5;
  width: 8px;
  height: 100%;
  cursor: col-resize;
}

.competitor-column-resizer::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 3px;
  width: 1px;
  height: calc(100% - 20px);
  background: rgba(148, 163, 184, 0.65);
}

.competitor-column-resizer:hover::after,
body.is-resizing-competitor-result-column .competitor-column-resizer::after {
  width: 2px;
  background: rgba(7, 149, 167, 0.9);
}

body.is-resizing-competitor-result-column {
  cursor: col-resize;
  user-select: none;
}

.competitor-analyzed-channel-modal {
  max-width: 520px;
}

.competitor-analyzed-channel-list {
  display: grid;
  gap: 10px;
}

.competitor-analyzed-channel-list article {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.competitor-analyzed-channel-list strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.competitor-analyzed-channel-list small,
.competitor-analyzed-channel-list p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.competitor-analyzed-channel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.competitor-analyzed-channel-item:hover {
  border-color: #0f766e;
  background: #f6fffb;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.1);
}

.competitor-analyzed-channel-item.active {
  border-color: #0f766e;
  background: #ecfdf5;
}

.competitor-analyzed-channel-item > div {
  flex: 1;
  min-width: 0;
}

.competitor-analyzed-channel-go {
  color: var(--muted);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.competitor-result-channel-active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #0f766e;
  border-radius: 8px;
  color: #0f766e;
  background: #ecfdf5;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.competitor-result-channel-active span {
  font-size: 12px;
  opacity: 0.75;
}

@media (max-width: 1180px) {
  .competitor-summary-grid,
  .competitor-channel-summary,
  .competitor-report-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .competitor-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .competitor-new-layout {
    grid-template-columns: 1fr;
  }

  .competitor-preview-panel {
    position: static;
  }

  .competitor-channel-toolbar {
    grid-template-columns: 1fr;
  }

  .competitor-channel-filters,
  .competitor-channel-groups {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .competitor-results-toolbar {
    grid-template-columns: 1fr;
  }

  .competitor-video-detail-layout {
    grid-template-columns: 1fr;
  }

  .competitor-video-info-body {
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .competitor-page-inner {
    padding: 22px 16px 34px;
  }

  .competitor-hero {
    display: grid;
  }

  .competitor-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .competitor-primary-action,
  .competitor-secondary-action {
    width: 100%;
  }

  .competitor-results-head {
    display: grid;
  }

  .competitor-summary-grid,
  .competitor-channel-summary,
  .competitor-quick-grid,
  .competitor-choice-grid,
  .competitor-report-grid {
    grid-template-columns: 1fr;
  }

  .competitor-date-row {
    grid-template-columns: 1fr;
  }

  .competitor-results-toolbar label {
    grid-template-columns: 1fr;
  }

  .competitor-video-info-body,
  .competitor-video-info-list > div,
  .competitor-detail-metric-grid {
    grid-template-columns: 1fr;
  }

  .competitor-detail-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .competitor-detail-recent-item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .competitor-detail-recent-ratio {
    grid-column: 2;
    font-size: 15px;
  }

  .competitor-results-foot {
    display: grid;
  }
}

.top-small-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  color: #31415f;
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.new-video,
.primary-button {
  border: 0;
  border-radius: 7px;
  padding: 13px 22px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(180deg, #079eb2, #027b91);
  box-shadow: 0 8px 16px rgba(4, 137, 158, 0.18);
}

.ghost-button,
.danger-button,
.secondary-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 14px;
  color: #31415f;
  background: var(--surface);
  font-weight: 700;
}

.danger-button {
  color: var(--red);
  border-color: #ffd4d4;
  background: #fffafa;
}

.icon-button {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 23px;
  display: grid;
  place-items: center;
}

.badge span {
  position: absolute;
  top: -7px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  color: #fff;
  background: var(--red);
  font-size: 12px;
  line-height: 18px;
}

.profile {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
}

.profile-empty {
  width: 40px;
  height: 40px;
  justify-content: center;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
  background: #fbfdff;
}

.avatar,
.mini-avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--owner-avatar-color, linear-gradient(145deg, #234567, #0e182a));
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.avatar {
  width: 40px;
  height: 40px;
}

.empty-avatar {
  width: 8px;
  height: 8px;
  background: #b7c3d1;
}

.mini-avatar {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.owner-badge > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page {
  display: none;
  padding: 26px 24px 22px;
}

.page.active {
  display: block;
}
.competitor-topic-summary b { overflow:hidden; font:inherit; text-overflow:ellipsis; }
.competitor-topic-summary em { flex:none; margin-left:6px; border-radius:999px; padding:2px 5px; color:#08776d; background:#c8eee7; font-size:8px; font-style:normal; font-weight:950; }
.competitor-topic-summary.is-script { color:#0b665f; background:#e3f7f3; }
.competitor-topic-summary.is-pending { color:#526d78; background:#eef3f5; font-size:10px; }
.competitor-topic-summary.is-pending em { color:#607d86; background:#dce9ec; }

.competitor-result-channel-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.competitor-result-channel-cell i { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #c7e5df; border-radius: 10px; color: #167d74; background: #eef9f7; font-size: 11px; font-style: normal; font-weight: 950; }
.competitor-result-channel-cell i.has-image { overflow: hidden; border-color: #d8e1e8; background: #fff; }
.competitor-result-channel-cell i img { width: 100%; height: 100%; object-fit: cover; }
.competitor-result-channel-cell strong { overflow: hidden; color: #132d4b; font-size: 13px; font-weight: 900; line-height: 1.35; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }

.recruiting-duplicate-warning {
  margin: -4px 0 0;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 12px;
  color: #b91c1c;
  background: #fff1f2;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.5;
}

.recruiting-candidate-grid input[name="name"][aria-invalid="true"] {
  border-color: #ef4444;
  background: #fff7f7;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.handoff-memo-page {
  min-height: calc(100vh - 78px);
  background: #f6f8fb;
}

.handoff-memo-shell {
  margin-top: 18px;
}

.handoff-home {
  display: grid;
  min-height: calc(100vh - 230px);
  place-items: center;
  padding: 24px 0 54px;
}

.handoff-home-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 420px));
  gap: 22px;
  justify-content: center;
  width: min(900px, 100%);
}

.handoff-choice-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 14px;
  min-height: 260px;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  padding: 30px;
  background: #ffffff;
  color: #17213a;
  text-align: center;
  box-shadow: 0 14px 34px rgba(17, 42, 72, 0.08);
  cursor: pointer;
}

.handoff-choice-card:hover {
  transform: translateY(-2px);
  border-color: #9ecbd4;
  box-shadow: 0 18px 40px rgba(17, 42, 72, 0.12);
}

.handoff-choice-icon {
  display: inline-grid;
  width: 58px;
  height: 58px;
  place-items: center;
  justify-self: center;
  border-radius: 8px;
  background: #eef7f8;
  color: #027b91;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
}

.handoff-choice-card strong {
  font-size: 26px;
  line-height: 1.25;
}

.handoff-choice-card p {
  margin: 0;
  color: #526179;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.55;
}

.handoff-choice-count {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  justify-self: center;
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 700;
}

.handoff-board-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.handoff-board-head h2 {
  margin: 0 0 4px;
  color: #13213a;
  font-size: 23px;
}

.handoff-board-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.handoff-board-title {
  min-width: 0;
}

.handoff-board-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.handoff-inline-new-button {
  min-height: 32px;
  border: 1px solid #bfe6ec;
  border-radius: 8px;
  padding: 0 12px;
  background: #effcfd;
  color: #027b91;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.handoff-inline-new-button:hover {
  border-color: #0795a7;
  background: #e7f8f9;
}

.handoff-back-button {
  min-height: 38px;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  padding: 0 14px;
  background: #ffffff;
  color: #31415f;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.handoff-back-button:hover {
  border-color: #9ecbd4;
  color: #027b91;
}

.handoff-sticky-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.handoff-sticky-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 230px;
  border: 1px solid rgba(121, 139, 162, 0.22);
  border-radius: 8px;
  padding: 18px;
  background: var(--handoff-bg, #ffffff);
  color: #17213a;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  cursor: pointer;
}

.handoff-sticky-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: 8px 8px 0 0;
  background: var(--handoff-accent, #94a3b8);
}

.handoff-sticky-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 34px rgba(15, 23, 42, 0.12);
}

.handoff-sticky-category {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.65);
  color: #334155;
  font-size: 12px;
  font-weight: 950;
}

.handoff-sticky-title {
  color: #111827;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
}

.handoff-sticky-summary {
  margin: 0;
  color: #40516b;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 750;
}

.handoff-sticky-shoot,
.handoff-sticky-meta {
  display: grid;
  gap: 4px;
  color: #526179;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

.handoff-sticky-meta {
  margin-top: auto;
  padding-top: 8px;
}

.handoff-sticky-status {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 950;
}

.handoff-status-unread {
  color: #b91c1c;
}

.handoff-status-checked {
  color: #047857;
}

.handoff-category-shoot {
  --handoff-accent: #37b7a6;
  background: #eafaf7;
}

.handoff-category-settlement {
  --handoff-accent: #4b96e6;
  background: #edf6ff;
}

.handoff-category-edit {
  --handoff-accent: #8b7cf6;
  background: #f4f1ff;
}

.handoff-category-thumbnail {
  --handoff-accent: #e8b82c;
  background: #fff8dc;
}

.handoff-category-asset {
  --handoff-accent: #94a3b8;
  background: #f4f6f8;
}

.handoff-category-casting {
  --handoff-accent: #f9735b;
  background: #fff1ec;
}

.handoff-category-question {
  --handoff-accent: #14a6c7;
  background: #edfafe;
}

.handoff-category-schedule {
  --handoff-accent: #22a36a;
  background: #f0fbf4;
}

.handoff-category-meeting {
  --handoff-accent: #64748b;
  background: #f8fafc;
}

.handoff-category-etc {
  --handoff-accent: #9aa8b8;
  background: #ffffff;
}

.handoff-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

.workspace-memo-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 18px;
  border: 1px solid #dbe5ee;
  border-radius: 12px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px rgba(31, 55, 84, 0.06);
}

.workspace-memo-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  padding: 0 18px;
  background: transparent;
  color: #66758b;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.workspace-memo-tabs button.active {
  background: #ffffff;
  color: #1476df;
  box-shadow: 0 3px 12px rgba(49, 118, 202, 0.13);
}

.shared-memo-board {
  display: grid;
  gap: 18px;
}

.shared-memo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.shared-memo-search {
  display: flex;
  width: min(360px, 100%);
  min-height: 44px;
  align-items: center;
  gap: 9px;
  border: 1px solid #d8e3ec;
  border-radius: 12px;
  padding: 0 14px;
  background: #ffffff;
  color: #7b8aa0;
  box-shadow: 0 8px 22px rgba(31, 55, 84, 0.05);
}

.shared-memo-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #16243a;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
}

.shared-memo-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.shared-memo-filters button {
  min-height: 36px;
  border: 1px solid #dce6ef;
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.78);
  color: #596980;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.shared-memo-filters button.active {
  border-color: #3b8eee;
  background: #eef6ff;
  color: #126ed5;
}

.shared-memo-author-filter {
  display: inline-flex;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border: 1px solid #dce6ef;
  border-radius: 999px;
  padding: 0 9px 0 11px;
  background: rgba(255, 255, 255, 0.88);
  color: #42546b;
}

.shared-memo-author-filter > span {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--shared-memo-author-color, #64748b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shared-memo-author-color, #64748b) 13%, transparent);
}

.shared-memo-author-filter select {
  max-width: 150px;
  border: 0;
  outline: 0;
  padding: 0 19px 0 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.shared-memo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.shared-memo-composer,
.shared-memo-card {
  position: relative;
  min-height: 242px;
  overflow: visible;
  border: 1px solid rgba(129, 151, 176, 0.24);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(24, 48, 78, 0.08);
}

.shared-memo-composer {
  display: grid;
  grid-template-rows: 1fr auto;
  border-style: dashed;
  border-color: #91bde9;
  background: linear-gradient(145deg, #f9fcff 0%, #f0f7ff 100%);
  padding: 18px;
}

.shared-memo-composer::before {
  content: "+";
  position: absolute;
  top: 16px;
  right: 18px;
  color: #3b8eee;
  font-size: 24px;
  font-weight: 500;
}

.shared-memo-composer textarea {
  width: 100%;
  min-height: 150px;
  resize: none;
  border: 0;
  outline: 0;
  padding: 4px 34px 4px 2px;
  background: transparent;
  color: #17243a;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.65;
}

.shared-memo-composer textarea::placeholder {
  color: #6d7f96;
}

.shared-memo-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #dbe9f6;
}

.shared-memo-composer span {
  color: #8391a4;
  font-size: 11px;
  font-weight: 750;
}

.shared-memo-composer button[type="submit"] {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  padding: 0 16px;
  background: #1878e7;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.shared-memo-card {
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 20px;
  background: linear-gradient(155deg, #ffffff 0%, color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 6%, white) 100%);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.shared-memo-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: 14px 14px 0 0;
  background: var(--shared-memo-accent, #3b82f6);
}

.shared-memo-card:hover,
.shared-memo-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 17px 38px rgba(24, 48, 78, 0.13);
}

.shared-memo-card.is-expanded {
  grid-column: span 2;
  min-height: 280px;
}

.shared-memo-card.is-important {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 14%, transparent);
}

.shared-memo-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.shared-memo-card-head > strong {
  min-width: 0;
  color: #142239;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.42;
  word-break: keep-all;
}

.shared-memo-quick-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.shared-memo-card:hover .shared-memo-quick-actions,
.shared-memo-card:focus-within .shared-memo-quick-actions,
.shared-memo-card.is-expanded .shared-memo-quick-actions {
  opacity: 1;
}

.shared-memo-quick-actions button {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8a98aa;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.shared-memo-quick-actions button:hover,
.shared-memo-quick-actions button.active {
  background: #eef6ff;
  color: #1878e7;
}

.shared-memo-body {
  min-height: 70px;
  margin: 0;
  color: #40516a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.67;
  white-space: pre-wrap;
  word-break: break-word;
}

.shared-memo-body mark,
.shared-memo-card-head mark {
  border-radius: 4px;
  padding: 0 2px;
  background: #dbeafe;
  color: inherit;
}

.shared-memo-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  color: #718198;
  font-size: 11px;
  font-weight: 800;
}

.shared-memo-card-meta time {
  margin-left: auto;
}

.shared-memo-card-meta em {
  color: #8b98aa;
  font-style: normal;
}

.shared-memo-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--shared-memo-author-color, var(--shared-memo-accent, #3b82f6)) 14%, white);
  color: var(--shared-memo-author-color, var(--shared-memo-accent, #3b82f6));
  font-size: 12px;
  font-weight: 950;
}

.shared-memo-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-top: 1px solid rgba(135, 153, 176, 0.16);
  padding-top: 10px;
}

.shared-memo-status-row span,
.shared-memo-status-row button {
  min-height: 25px;
  border: 0;
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(241, 246, 251, 0.88);
  color: #5c6d83;
  font-size: 11px;
  font-weight: 900;
}

.shared-memo-status-row button {
  cursor: pointer;
}

.shared-memo-expand,
.shared-memo-collapse {
  justify-self: start;
  border: 0;
  padding: 0;
  background: transparent;
  color: #237bdc;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.shared-memo-confirm-button {
  justify-self: start;
  min-height: 35px;
  border: 1px solid #9ec7f5;
  border-radius: 9px;
  padding: 0 13px;
  background: #edf6ff;
  color: #126ed5;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.shared-memo-confirm-button.is-confirmed {
  border-color: #b7e4ce;
  background: #eefbf4;
  color: #18875a;
}

.shared-memo-inline-panel {
  display: grid;
  gap: 10px;
  border: 1px solid #dce6ef;
  border-radius: 11px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 25px rgba(24, 48, 78, 0.08);
}

.shared-memo-inline-panel > strong,
.shared-memo-inline-panel div > strong {
  color: #23334b;
  font-size: 12px;
  font-weight: 950;
}

.shared-memo-inline-panel p {
  margin: 0;
  color: #728197;
  font-size: 11px;
  line-height: 1.5;
}

.shared-memo-person-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shared-memo-person-list button,
.shared-memo-more-menu > button,
.shared-memo-expiry-row button {
  min-height: 32px;
  border: 1px solid #d9e4ee;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: #4c5d74;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.shared-memo-person-list button.selected {
  border-color: #8bbcf3;
  background: #edf6ff;
  color: #126ed5;
}

.shared-memo-person-list button span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  margin-right: 5px;
  border-radius: 50%;
  background: #eaf1f8;
}

.shared-memo-ack-target-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e7edf3;
  padding-top: 10px;
}

.shared-memo-ack-target-actions > span {
  color: #66758a;
  font-size: 11px;
  font-weight: 900;
}

.shared-memo-ack-target-actions button {
  min-height: 34px;
  padding: 0 14px;
}

.shared-memo-ack-list > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  color: #617189;
  font-size: 11px;
  line-height: 1.55;
}

.shared-memo-more-menu {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shared-memo-more-menu .danger {
  border-color: #fecaca;
  color: #b91c1c;
}

.shared-memo-color-row,
.shared-memo-expiry-row {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 6px;
}

.shared-memo-color-row button {
  width: 26px;
  height: 26px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--memo-color);
  box-shadow: 0 0 0 1px #ccd8e4;
  cursor: pointer;
}

.shared-memo-edit-form {
  display: grid;
  gap: 9px;
}

.shared-memo-edit-form textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid #a9caf0;
  border-radius: 10px;
  padding: 12px;
  outline: 0;
  color: #26364d;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.shared-memo-edit-form > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.shared-memo-edit-form button {
  min-height: 32px;
  border: 1px solid #b6cff0;
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: #3477c5;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.shared-memo-edit-form button[type="submit"] {
  border-color: #1878e7;
  background: #1878e7;
  color: #ffffff;
}

@media (max-width: 1100px) {
  .shared-memo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .shared-memo-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .shared-memo-search {
    width: 100%;
  }

  .shared-memo-grid {
    grid-template-columns: 1fr;
  }

  .shared-memo-card.is-expanded {
    grid-column: auto;
  }

  .shared-memo-quick-actions {
    opacity: 1;
  }
}

/* 공용메모 보드: 작은 스티커는 보드에, 작성과 상세는 팝업에 표시한다. */
.shared-memo-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.shared-memo-new-button {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 10px;
  padding: 0 15px;
  background: #1878e7;
  box-shadow: 0 7px 16px rgba(24, 120, 231, 0.2);
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.shared-memo-new-button span {
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

.shared-memo-board-surface {
  min-height: 440px;
  border: 1px solid #d9e3ec;
  border-radius: 12px;
  padding: 20px;
  background-color: #edf2f5;
  background-image: radial-gradient(rgba(98, 119, 139, 0.12) 0.8px, transparent 0.8px);
  background-size: 18px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.shared-memo-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.shared-memo-new-tile {
  display: grid;
  min-height: 210px;
  place-content: center;
  gap: 5px;
  border: 2px dashed #9bb3c8;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  color: #5d7288;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.shared-memo-new-tile:hover {
  border-color: #3b8eee;
  background: rgba(255, 255, 255, 0.8);
  color: #166fcf;
  transform: translateY(-2px);
}

.shared-memo-new-tile > span {
  font-size: 34px;
  font-weight: 350;
  line-height: 1;
}

.shared-memo-new-tile strong {
  font-size: 14px;
  font-weight: 950;
}

.shared-memo-new-tile small {
  color: #8292a3;
  font-size: 10px;
  font-weight: 750;
}

.shared-memo-card {
  display: grid;
  min-width: 0;
  min-height: 210px;
  max-height: 236px;
  align-content: start;
  gap: 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 38%, #cfd9e3);
  border-radius: 8px;
  padding: 18px 16px 14px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 22%, white) 0%, color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 11%, white) 100%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 13%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.shared-memo-card::before {
  height: 6px;
  border-radius: 8px 8px 0 0;
}

.shared-memo-card:hover,
.shared-memo-card:focus-visible {
  transform: translateY(-3px) rotate(-0.2deg);
  box-shadow: 0 13px 24px rgba(31, 51, 72, 0.14);
  outline: none;
}

.shared-memo-card.is-important {
  border-color: color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 35%, #d4dde6);
}

.shared-memo-card-pictograms {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.shared-memo-card-pictograms:empty::before {
  content: "🗒️";
  opacity: 0.62;
}

.shared-memo-card-pictograms span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 6px rgba(35, 54, 74, 0.08);
  font-size: 13px;
}

.shared-memo-card-title {
  display: -webkit-box;
  overflow: hidden;
  color: #17243a;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.38;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shared-memo-card .shared-memo-body {
  display: -webkit-box;
  min-height: 58px;
  overflow: hidden;
  color: #46576d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.58;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.shared-memo-card .shared-memo-card-meta {
  gap: 6px;
  margin-top: auto;
}

.shared-memo-card .shared-memo-avatar {
  width: 23px;
  height: 23px;
  font-size: 10px;
}

.shared-memo-card .shared-memo-writer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-memo-card .shared-memo-card-meta time {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-memo-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(111, 132, 153, 0.15);
  padding-top: 8px;
  color: #77879a;
  font-size: 9px;
  font-weight: 850;
}

.shared-memo-open-hint {
  color: var(--shared-memo-accent, #3b82f6);
}

.modal.shared-memo-sticky-modal {
  position: relative;
  width: min(540px, 100%);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 24%, #d0dae3);
  border-radius: 12px;
  background: linear-gradient(155deg, #ffffff 0%, color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 11%, white) 100%);
  box-shadow: 0 28px 70px rgba(17, 34, 55, 0.28);
}

.modal-backdrop:has(.shared-memo-detail-modal) {
  overflow: hidden;
  padding: 16px;
}

.modal.shared-memo-detail-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(720px, calc(100dvh - 32px));
  overflow: hidden;
}

.modal.shared-memo-create-modal {
  background: linear-gradient(155deg, #fffef8 0%, color-mix(in srgb, var(--shared-memo-accent, #f4c542) 20%, white) 100%);
}

.shared-memo-sticky-modal::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 6px;
  background: var(--shared-memo-accent, #3b82f6);
}

.shared-memo-sticky-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 25px 16px;
}

.shared-memo-sticky-head > div {
  display: grid;
  gap: 7px;
}

.shared-memo-sticky-head strong {
  color: #17243a;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.4;
  word-break: keep-all;
}

.shared-memo-modal-kicker {
  color: #68798d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.shared-memo-create-body,
.shared-memo-detail-body {
  padding: 5px 25px 24px;
}

.shared-memo-create-body textarea {
  width: 100%;
  min-height: 250px;
  resize: none;
  border: 0;
  outline: 0;
  padding: 12px 4px;
  background: transparent;
  color: #2c3440;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
}

.shared-memo-create-body textarea::placeholder {
  color: #8995a3;
}

.shared-memo-sticky-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(112, 132, 152, 0.17);
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.45);
}

.shared-memo-sticky-foot > span {
  color: #798899;
  font-size: 10px;
  font-weight: 750;
}

.shared-memo-sticky-foot > div {
  display: flex;
  gap: 7px;
}

.shared-memo-detail-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 11px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 4px 20px 18px;
  scrollbar-color: rgba(92, 116, 142, 0.48) transparent;
  scrollbar-width: thin;
}

.shared-memo-detail-body > * {
  flex: 0 0 auto;
}

.shared-memo-detail-body::-webkit-scrollbar {
  width: 7px;
}

.shared-memo-detail-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(92, 116, 142, 0.44);
  background-clip: padding-box;
}

.shared-memo-detail-text {
  min-height: 92px;
  margin: 0;
  border: 1px solid rgba(116, 137, 158, 0.16);
  border-radius: 9px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.62);
  color: #35445a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

.shared-memo-detail-author {
  display: flex;
  align-items: center;
  gap: 9px;
}

.shared-memo-detail-author > div {
  display: grid;
  gap: 2px;
}

.shared-memo-detail-author strong {
  color: #35445a;
  font-size: 11px;
  font-weight: 950;
}

.shared-memo-detail-author time {
  color: #8390a0;
  font-size: 10px;
  font-weight: 750;
}

.shared-memo-detail-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shared-memo-detail-status span,
.shared-memo-detail-status button {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  border: 1px solid rgba(121, 144, 166, 0.17);
  border-radius: 9px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.72);
  color: #596b80;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
}

.shared-memo-detail-status button {
  cursor: pointer;
}

.shared-memo-pictogram-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  border-top: 1px solid rgba(112, 132, 152, 0.17);
  padding-top: 10px;
}

.shared-memo-pictogram-actions:empty {
  display: none;
}

.shared-memo-pictogram-action {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #dce5ec;
  border-radius: 9px;
  padding: 0 7px;
  background: rgba(255, 255, 255, 0.72);
  color: #627287;
  font: inherit;
  cursor: pointer;
}

.shared-memo-pictogram-action span {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  filter: grayscale(0.25);
}

.shared-memo-pictogram-action strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-memo-pictogram-action:hover,
.shared-memo-pictogram-action.active {
  transform: translateY(-1px);
  border-color: #8ebcec;
  background: #f4f9ff;
  color: #176fcf;
}

.shared-memo-pictogram-action.active span {
  filter: none;
}

.shared-memo-pictogram-action[aria-pressed="true"]::after,
.shared-memo-pictogram-action.is-open::after {
  content: "✓";
  display: grid;
  position: absolute;
  top: -5px;
  right: -3px;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 999px;
  padding: 0;
  background: #1878e7;
  color: #ffffff;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.2;
}

.shared-memo-pictogram-action.is-open::after {
  content: "•";
  font-size: 13px;
}

.shared-memo-pictogram-action.is-star.active {
  border-color: #e8bd45;
  background: #fff8d8;
  color: #986c00;
}

.shared-memo-pictogram-action.is-star.active::after {
  background: #d99d00;
}

.shared-memo-pictogram-action.is-people.active,
.shared-memo-pictogram-action.is-people.is-open {
  border-color: #8daff1;
  background: #eef3ff;
  color: #365fbd;
}

.shared-memo-pictogram-action.is-check.active {
  border-color: #83cfad;
  background: #ecfaf3;
  color: #187851;
}

.shared-memo-pictogram-action.is-edit:hover {
  border-color: #8db7df;
  background: #f0f7ff;
  color: #285f9a;
}

.shared-memo-pictogram-action.is-check.active::after {
  background: #18855b;
}

.shared-memo-pictogram-action.is-manage.is-open {
  border-color: #e7a9ce;
  background: #fff1f8;
  color: #9b4278;
}

.shared-memo-pictogram-action.is-delete {
  border-color: #f0c5c5;
  background: #fff7f7;
  color: #b43b3b;
}

.shared-memo-pictogram-action.is-delete:hover {
  border-color: #e47777;
  background: #fff0f0;
  color: #a92323;
}

.modal.shared-memo-action-confirm-modal {
  display: grid;
  width: min(410px, 100%);
  justify-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 14px;
  padding: 30px 28px 24px;
  background: #ffffff;
  box-shadow: 0 24px 65px rgba(17, 34, 55, 0.25);
  text-align: center;
}

.shared-memo-action-confirm-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 18px;
  background: #f2f7fc;
  font-size: 30px;
}

.shared-memo-action-confirm-modal h2 {
  margin: 0;
  color: #17243a;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.45;
}

.shared-memo-action-confirm-modal p {
  margin: 0;
  color: #6d7d90;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.shared-memo-action-confirm-actions {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid #edf1f5;
  padding-top: 16px;
}

.shared-memo-detail-modal .shared-memo-inline-panel {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

@media (max-width: 900px) {
  .shared-memo-toolbar,
  .shared-memo-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .shared-memo-toolbar-actions {
    width: 100%;
  }

  .shared-memo-author-filter {
    width: 100%;
  }

  .shared-memo-author-filter select {
    max-width: none;
    flex: 1;
  }

  .shared-memo-new-button {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .shared-memo-board-surface {
    padding: 12px;
  }

  .shared-memo-grid {
    grid-template-columns: 1fr;
  }

  .shared-memo-sticky-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .shared-memo-sticky-foot > div,
  .shared-memo-sticky-foot button {
    flex: 1;
  }

  .shared-memo-pictogram-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .modal-backdrop:has(.shared-memo-detail-modal) {
    padding: 8px;
  }

  .modal.shared-memo-detail-modal {
    max-height: calc(100dvh - 16px);
  }

  .shared-memo-detail-body {
    padding-inline: 14px;
  }
}

.handoff-detail-modal {
  width: min(980px, 100%);
}

.handoff-detail-body {
  display: grid;
  gap: 18px;
}

.handoff-detail-section {
  display: grid;
  gap: 10px;
}

.handoff-detail-section h3,
.handoff-detail-section h4 {
  margin: 0;
  color: #13213a;
}

.handoff-detail-section h3 {
  font-size: 23px;
  line-height: 1.35;
}

.handoff-detail-section h4 {
  font-size: 15px;
}

.handoff-detail-section p {
  margin: 0;
  color: #24304a;
  font-size: 14px;
  line-height: 1.75;
}

.shared-memo-additions {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 30%, #dce6f1);
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--shared-memo-accent, #3b82f6) 8%, #ffffff);
}

.shared-memo-additions-head,
.shared-memo-addition-meta,
.shared-memo-addition-actions,
.shared-memo-addition-composer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shared-memo-additions-head {
  justify-content: space-between;
}

.shared-memo-additions-head > div {
  display: grid;
  gap: 2px;
}

.shared-memo-additions-head h4 {
  margin: 0;
  color: #17243a;
  font-size: 14px;
}

.shared-memo-additions-head p,
.shared-memo-addition-empty {
  margin: 2px 0 0;
  color: #718096;
  font-size: 12px;
}

.shared-memo-additions-head > span {
  min-width: 30px;
  border-radius: 999px;
  padding: 5px 9px;
  background: #e5effc;
  color: #285d9b;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.shared-memo-addition-list {
  display: grid;
  gap: 8px;
}

.shared-memo-addition-card {
  display: grid;
  gap: 8px;
  border: 1px solid #e0e8f1;
  border-radius: 11px;
  padding: 11px 12px;
  background: #fff;
}

.shared-memo-addition-card.is-resolved {
  background: #f5f7fa;
  opacity: 0.76;
}

.shared-memo-addition-meta {
  flex-wrap: wrap;
}

.shared-memo-addition-meta strong {
  color: #1f4f86;
  font-size: 12px;
}

.shared-memo-addition-meta span,
.shared-memo-addition-meta em {
  color: #7b8796;
  font-size: 11px;
  font-style: normal;
}

.shared-memo-addition-meta em {
  margin-left: auto;
  border-radius: 999px;
  padding: 3px 7px;
  background: #edf2f7;
  font-weight: 800;
}

.shared-memo-addition-card > p {
  margin: 0;
  color: #24304a;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.shared-memo-addition-actions {
  flex-wrap: wrap;
}

.shared-memo-addition-actions button {
  min-height: 30px;
  border: 1px solid #d8e2ee;
  border-radius: 8px;
  padding: 0 9px;
  background: #fff;
  color: #45566d;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}

.shared-memo-addition-composer {
  align-items: stretch;
  border-top: 1px solid #e1e9f2;
  padding-top: 10px;
}

.shared-memo-addition-composer select {
  width: 112px;
}

.shared-memo-addition-composer textarea {
  min-height: 60px;
  flex: 1;
  resize: vertical;
}

.shared-memo-addition-composer button {
  align-self: flex-end;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .shared-memo-addition-composer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .shared-memo-addition-composer select {
    width: 100%;
  }
}

.handoff-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.handoff-detail-meta div {
  display: grid;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfdff;
}

.profile.command-control {
  min-height: 60px;
  height: auto;
  gap: 10px;
  font-size: inherit;
}

.profile.command-control.profile-empty {
  width: auto;
  height: auto;
  justify-content: flex-start;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.profile.command-control .avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.profile.command-control .empty-avatar {
  width: 8px;
  height: 8px;
  flex-basis: 8px;
}

.handoff-detail-meta dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.handoff-detail-meta dd {
  margin: 0;
  color: #17213a;
  font-size: 13px;
  font-weight: 850;
  word-break: break-word;
}

.handoff-detail-title-edit,
.handoff-detail-edit-grid label {
  display: grid;
  gap: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.handoff-detail-title-edit input,
.handoff-detail-edit-grid input,
.handoff-detail-edit-grid select,
.handoff-detail-edit-grid textarea,
.handoff-icon-field input,
.handoff-icon-field textarea,
.handoff-detail-section > textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: #17213a;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.handoff-detail-title-edit input {
  font-size: 20px;
  font-weight: 950;
  line-height: 1.35;
}

.handoff-detail-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.handoff-detail-quick-grid {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.1fr)
    minmax(145px, 0.85fr)
    minmax(145px, 0.85fr)
    minmax(190px, 1.15fr)
    minmax(120px, 0.65fr);
  gap: 10px;
}

.handoff-calendar-tracking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  padding: 9px 12px;
  background: #f7fbfd;
  color: #526176;
  font-size: 12px;
  font-weight: 800;
}

.handoff-calendar-tracking a {
  flex: 0 0 auto;
  color: #06758b;
  font-weight: 900;
  text-decoration: none;
}

.handoff-calendar-tracking a:hover {
  text-decoration: underline;
}

.handoff-icon-field {
  display: grid;
  gap: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.handoff-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.handoff-field-icon {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #eef7f8;
  color: #027b91;
  font-size: 13px;
}

.handoff-icon-field input {
  height: 46px;
}

.handoff-contact-compact {
  height: 46px;
  min-height: 46px;
  max-height: none;
  overflow: auto;
  resize: vertical;
}

.handoff-process-toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.handoff-process-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 64px;
  height: 64px;
  align-items: center;
  gap: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: #17213a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.handoff-process-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.handoff-process-toggle:has(input:checked) {
  border-color: #86d39f;
  background: #f0fdf4;
}

.handoff-process-icon {
  display: grid;
  width: 46px;
  height: 42px;
  place-items: center;
  border-radius: 7px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.handoff-process-toggle:has(input:checked) .handoff-process-icon {
  background: #dcfce7;
  color: #047857;
}

.handoff-process-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.handoff-process-copy strong {
  color: #17213a;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 800;
  white-space: nowrap;
}

.handoff-process-copy em {
  color: #64748b;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.handoff-process-toggle .done-text,
.handoff-process-toggle .todo-text {
  display: inline-flex;
  width: 64px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 8px;
  background: #fee2e2;
  color: #b91c1c;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.handoff-process-toggle .done-text {
  display: none;
}

.handoff-process-toggle:has(input:checked) .done-text {
  display: inline-flex;
  background: #dcfce7;
  color: #047857;
}

.handoff-process-toggle:has(input:checked) .todo-text {
  display: none;
}

.handoff-detail-edit-grid .full {
  grid-column: 1 / -1;
}

.handoff-detail-section > textarea,
.handoff-detail-edit-grid textarea {
  resize: vertical;
  line-height: 1.55;
}

.handoff-detail-status-section {
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
}

.handoff-detail-actions {
  justify-content: flex-end;
}

.handoff-detail-actions .handoff-equipment-sheet-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

.handoff-calendar-preview-wrap {
  display: grid;
  gap: 10px;
}

.handoff-calendar-preview,
.handoff-calendar-preview-empty {
  display: grid;
  gap: 12px;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  padding: 14px;
  background: #fbfdff;
}

.handoff-calendar-preview > strong {
  color: #13213a;
  font-size: 17px;
  line-height: 1.35;
}

.handoff-calendar-preview-empty {
  place-items: center;
  min-height: 120px;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.handoff-method-modal {
  width: min(860px, 100%);
}

.handoff-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.handoff-method-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 210px;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  padding: 22px;
  background: #ffffff;
  color: #17213a;
  text-align: left;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
  cursor: pointer;
}

.handoff-method-card:hover {
  transform: translateY(-2px);
  border-color: #9ecbd4;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.11);
}

.handoff-method-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #e7f8f9;
  color: #027b91;
  font-size: 18px;
  font-weight: 950;
}

.handoff-method-card strong {
  color: #13213a;
  font-size: 20px;
  line-height: 1.3;
}

.handoff-method-card p {
  margin: 0;
  color: #526179;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.handoff-method-card em {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: #f4f8fb;
  color: #40516b;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.handoff-picker-modal {
  width: min(1360px, calc(100vw - 36px));
}

.modal.handoff-schedule-picker-modal,
.modal.handoff-schedule-view-modal {
  display: flex;
  flex-direction: column;
  width: min(1580px, calc(100vw - 12px));
  max-height: calc(100vh - 16px);
  overflow: hidden;
}

.handoff-schedule-picker-modal .modal-head,
.handoff-schedule-picker-modal .modal-foot,
.handoff-schedule-view-modal .modal-head,
.handoff-schedule-view-modal .modal-foot {
  flex: 0 0 auto;
}

.handoff-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 14px 22px;
  background: #fbfdff;
}

.handoff-picker-segments {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  background: #ffffff;
}

.handoff-picker-segments button {
  min-height: 34px;
  border: 0;
  border-right: 1px solid #dbe7ee;
  padding: 0 14px;
  background: transparent;
  color: #526179;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.handoff-picker-segments button:last-child {
  border-right: 0;
}

.handoff-picker-segments button.active {
  background: #e7f8f9;
  color: #027b91;
}

.handoff-picker-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.handoff-picker-toolbar input {
  width: min(320px, 42vw);
  min-height: 34px;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  padding: 0 11px;
  color: #17213a;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.handoff-picker-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 190px);
  overflow: hidden;
  padding: 10px;
  background: #f6f8fb;
}

.handoff-picker-calendar {
  min-width: 0;
}

.handoff-picker-calendar-schedule {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.handoff-picker-month-title {
  margin-bottom: 7px;
  color: #13213a;
  font-size: 20px;
  font-weight: 950;
}

.handoff-schedule-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  min-width: 0;
}

.handoff-schedule-board .calendar-source-legend {
  justify-content: flex-end;
  gap: 8px;
  font-size: 11px;
}

.handoff-schedule-board .calendar-grid {
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  min-width: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.handoff-schedule-board .calendar-grid::-webkit-scrollbar {
  width: 7px;
}

.handoff-schedule-board .calendar-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c9d7e5;
}

.handoff-schedule-board .calendar-weekday {
  position: static;
  top: auto;
  z-index: 1;
  min-height: 24px;
}

.handoff-schedule-board .calendar-weekday span {
  font-size: 12px;
}

.handoff-schedule-board .calendar-month-week {
  height: clamp(82px, calc((100vh - 265px) / 6), 132px);
  overflow: hidden;
}

.handoff-schedule-board .calendar-day {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  gap: 4px;
  padding: 6px;
  overflow: hidden;
}

.handoff-schedule-board .calendar-grid:not(.calendar-grid-week) .calendar-day {
  height: 100%;
  min-height: 0;
}

.handoff-schedule-board .calendar-day-num {
  font-size: 13px;
}

.handoff-schedule-board .calendar-day-events {
  align-content: start;
  gap: 4px;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
  overscroll-behavior: auto;
  scrollbar-width: thin;
  touch-action: pan-y;
  cursor: grab;
}

.handoff-schedule-board .calendar-day-events:active {
  cursor: grabbing;
}

.handoff-schedule-board .calendar-day-events::-webkit-scrollbar {
  width: 6px;
}

.handoff-schedule-board .calendar-day-events::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #b9c8d9;
}

.handoff-schedule-board .calendar-grid:not(.calendar-grid-week) .calendar-day-events.scrollable {
  max-height: none;
}

.handoff-schedule-board .calendar-event,
.handoff-schedule-board .calendar-month-event {
  position: relative;
  z-index: 3;
  min-height: 28px;
  border-left-width: 3px;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 12px;
  cursor: pointer;
  pointer-events: auto;
}

.handoff-schedule-board .calendar-month-event {
  margin: calc(31px + (var(--calendar-row) * 33px)) 6px 0;
}

.handoff-schedule-board .calendar-event b,
.handoff-schedule-board .calendar-month-event b {
  font-size: 11px;
}

.handoff-schedule-board .calendar-event span,
.handoff-schedule-board .calendar-month-event span {
  display: block;
  line-height: 1.25;
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handoff-schedule-popup-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 160px);
  overflow: hidden;
  background: #f6f8fb;
}

.handoff-schedule-popup-body .handoff-schedule-board {
  height: 100%;
}

.handoff-schedule-popup-hint {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.handoff-picker-weekdays,
.handoff-picker-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.handoff-picker-weekdays span {
  min-height: 30px;
  border: 1px solid #dbe7ee;
  border-bottom: 0;
  border-right: 0;
  display: grid;
  place-items: center;
  background: #eef5f8;
  color: #40516b;
  font-size: 12px;
  font-weight: 950;
}

.handoff-picker-weekdays span:last-child {
  border-right: 1px solid #dbe7ee;
}

.handoff-picker-day {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 132px;
  border: 1px solid #dbe7ee;
  border-right: 0;
  border-bottom: 0;
  padding: 7px;
  background: #ffffff;
  min-width: 0;
}

.handoff-picker-day:nth-child(7n) {
  border-right: 1px solid #dbe7ee;
}

.handoff-picker-day:nth-last-child(-n + 7) {
  border-bottom: 1px solid #dbe7ee;
}

.handoff-picker-day.muted {
  background: #f8fafc;
  color: #94a3b8;
}

.handoff-picker-day.today {
  box-shadow: inset 0 0 0 2px rgba(7, 158, 178, 0.18);
}

.handoff-picker-day header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
  color: #334155;
  font-size: 12px;
  font-weight: 950;
}

.handoff-picker-day-events {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.handoff-picker-day-events small {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.handoff-picker-event {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 1px solid #dbe7ee;
  border-radius: 6px;
  padding: 5px 7px;
  background: #f8fbfe;
  color: #17213a;
  text-align: left;
  cursor: pointer;
}

.handoff-picker-event:hover,
.handoff-picker-event.selected {
  border-color: #0795a7;
  background: #e7f8f9;
}

.handoff-picker-event strong,
.handoff-picker-event span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handoff-picker-event strong {
  font-size: 11px;
  font-weight: 950;
}

.handoff-picker-event span {
  color: #526179;
  font-size: 10px;
  font-weight: 800;
}

.handoff-picker-summary {
  position: sticky;
  top: 16px;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.handoff-picker-summary.has-selection {
  border-color: color-mix(in srgb, var(--handoff-selected-color, #0795a7) 48%, #dbe7ee);
  border-left: 6px solid var(--handoff-selected-color, #0795a7);
  background: linear-gradient(180deg, var(--handoff-selected-bg, #eef7f8) 0%, #ffffff 72%);
}

.handoff-picker-summary.has-selection h3 {
  color: color-mix(in srgb, var(--handoff-selected-color, #0795a7) 82%, #13213a);
}

.handoff-picker-summary.has-selection > strong {
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--handoff-selected-color, #0795a7) 14%, #ffffff);
  color: #13213a;
}

.handoff-picker-summary.has-selection dl div {
  border-color: color-mix(in srgb, var(--handoff-selected-color, #0795a7) 24%, #e2e8f0);
}

.handoff-schedule-picker-modal .handoff-picker-summary {
  max-height: 100%;
  overflow: auto;
}

.handoff-picker-summary h3,
.handoff-direct-preview h3 {
  margin: 0;
  color: #13213a;
  font-size: 16px;
}

.handoff-picker-summary > strong {
  color: #17213a;
  font-size: 15px;
  line-height: 1.4;
}

.handoff-picker-summary dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.handoff-picker-summary dl div {
  display: grid;
  gap: 3px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 8px 10px;
  background: #fbfdff;
}

.handoff-picker-summary dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.handoff-picker-summary dd {
  margin: 0;
  color: #17213a;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.handoff-picker-summary p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.handoff-direct-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
}

.handoff-direct-preview {
  display: grid;
  align-content: start;
  gap: 12px;
}

.handoff-direct-preview-card {
  min-height: 230px;
}

.handoff-create-form textarea {
  resize: vertical;
}

@media (max-width: 900px) {
  .handoff-detail-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .handoff-home-choice-grid,
  .handoff-method-grid,
  .handoff-detail-meta,
  .handoff-detail-quick-grid,
  .handoff-detail-edit-grid {
    grid-template-columns: 1fr;
  }

  .handoff-board-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .handoff-board-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .handoff-picker-body,
  .handoff-direct-body {
    grid-template-columns: 1fr;
  }

  .handoff-picker-summary {
    position: static;
  }
}

@media (max-width: 560px) {
  .handoff-memo-page {
    padding: 18px 14px;
  }

  .handoff-choice-card {
    min-height: 180px;
    padding: 22px;
  }

  .handoff-choice-icon {
    width: 48px;
    height: 48px;
  }

  .handoff-choice-card strong {
    font-size: 22px;
  }

  .handoff-sticky-grid {
    grid-template-columns: 1fr;
  }

  .handoff-picker-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .handoff-picker-toolbar input {
    width: 100%;
  }

  .handoff-picker-day {
    min-height: 116px;
    padding: 5px;
  }

  .handoff-picker-event {
    padding: 4px 5px;
  }
}

#boardPage.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 78px);
  min-height: 0;
  padding: 8px 12px 0;
  background: var(--surface);
}

#boardPage .board-summary {
  flex: 0 0 auto;
}

#boardPage .filter-row,
#boardPage .board-scroll-top {
  flex: 0 0 auto;
}

.workspace:has(#timeTrackingPage.active) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.time-tracking-page {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: auto;
  background: #f1f5f9;
}

.time-tracking-page.active {
  display: block;
}

.time-tracking-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f1f5f9;
}

.time-management-home {
  display: grid;
  align-content: center;
  width: min(900px, calc(100% - 48px));
  min-height: 100%;
  margin: 0 auto;
  padding: 52px 0 88px;
}

.time-management-home-head {
  margin-bottom: 28px;
  text-align: center;
}

.time-management-home-head h1,
.time-management-subview-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  font-weight: 950;
}

.time-management-home-head p,
.time-management-subview-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.time-management-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.time-management-big-button {
  min-height: 190px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 30px;
  text-align: left;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(24, 58, 92, 0.07);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.time-management-big-button:hover,
.time-management-big-button:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 16px 34px rgba(7, 149, 167, 0.13);
  transform: translateY(-2px);
  outline: none;
}

.time-management-big-button strong,
.time-management-big-button span {
  display: block;
}

.time-management-big-button strong {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 24px;
  font-weight: 950;
}

.time-management-big-button span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.65;
}

.time-management-access-note {
  margin: 16px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 750;
}

.time-tracking-subview {
  height: 100%;
  min-height: 0;
}

.time-tracking-subview-toolbar {
  position: absolute;
  z-index: 3;
  top: 88px;
  left: calc(var(--sidebar) + 18px);
  padding: 0;
  border: 0;
  pointer-events: none;
}

body.sidebar-collapsed .time-tracking-subview-toolbar {
  left: 70px;
}

.time-tracking-subview-toolbar button {
  pointer-events: auto;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

.time-management-subview-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 28px 18px;
}

.time-management-subview-head > button,
.realtime-manual-button {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 9px 14px;
  color: var(--text);
  background: var(--surface);
  font-weight: 850;
  cursor: pointer;
}

.realtime-tracking-view {
  min-height: 100%;
  background: #f8fafc;
}

.realtime-shell {
  width: min(1120px, calc(100% - 56px));
  margin: 0 auto;
  padding: 4px 0 44px;
}

.realtime-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(24, 58, 92, 0.05);
}

.realtime-summary-item {
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}

.realtime-summary-item:last-child {
  border-right: 0;
}

.realtime-summary-item span,
.realtime-summary-item strong {
  display: block;
}

.realtime-summary-item span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.realtime-summary-item strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
}

.realtime-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.realtime-row {
  display: grid;
  grid-template-columns: 150px minmax(220px, 1.4fr) minmax(130px, 0.65fr) minmax(180px, 1fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 62px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 18px;
  color: var(--text);
  text-align: left;
  background: var(--surface);
}

button.realtime-row {
  cursor: pointer;
}

button.realtime-row:hover,
button.realtime-row:focus-visible {
  background: #f7fbfc;
  outline: none;
}

.realtime-row:last-child {
  border-bottom: 0;
}

.realtime-row-head {
  min-height: 44px;
  color: var(--muted);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}

.realtime-row-time,
.realtime-row-category,
.realtime-row-source {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.realtime-row-title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-row.needs-input {
  box-shadow: inset 3px 0 0 var(--orange);
  background: #fffdf8;
}

.realtime-row.needs-input .realtime-row-category {
  color: #b25d08;
  font-weight: 900;
}

.realtime-review-summary,
.realtime-review-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #f2cf88;
  background: #fff9e9;
  color: #754b08;
}

.realtime-review-summary {
  justify-content: space-between;
  padding: 11px 18px;
}

.realtime-review-summary.is-clear {
  border-color: #b9eadb;
  background: #effbf7;
  color: #176855;
}

.realtime-review-summary.is-clear span {
  color: #31806c;
}

.realtime-review-summary span,
.realtime-review-notice span {
  color: #8b661f;
  font-size: 12px;
  font-weight: 750;
}

.realtime-review-notice {
  align-items: flex-start;
  flex-direction: column;
  border-radius: 8px;
  padding: 12px;
}

.realtime-row.needs-review {
  box-shadow: inset 3px 0 0 #d79a27;
  background: #fffdf8;
}

.realtime-row.needs-review .realtime-row-category {
  color: #9b6614;
  background: #fff2ce;
}

.realtime-review-edit-head,
.realtime-review-edit-row {
  grid-template-columns: 92px minmax(220px, 1.25fr) 150px minmax(150px, 0.8fr) minmax(140px, 0.8fr) 58px 132px;
  min-width: 1060px;
}

.realtime-review-edit-head {
  min-height: 42px;
  color: var(--muted);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}

.realtime-review-edit-row {
  border: 0;
  border-bottom: 1px solid var(--line);
}

.realtime-review-edit-row label {
  display: grid;
  gap: 4px;
}

.realtime-review-edit-row label > span {
  color: #8a97aa;
  font-size: 10px;
  font-weight: 900;
}

.realtime-review-edit-row input,
.realtime-review-edit-row select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #d9e3ec;
  border-radius: 8px;
  padding: 0 10px;
  color: #14263d;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.realtime-review-edit-row input:focus,
.realtime-review-edit-row select:focus {
  border-color: #22a6b5;
  outline: 3px solid rgba(34, 166, 181, 0.14);
}

.realtime-review-category [data-realtime-category-custom],
.realtime-custom-category-input {
  margin-top: 6px;
}

.realtime-review-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.realtime-review-row-actions button {
  min-height: 32px;
  border-radius: 8px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.realtime-ai-review-dashboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #f0c36b;
  border-radius: 0;
  padding: 16px 20px;
  color: #754b08;
  background: linear-gradient(135deg, #fffaf0, #fff6e5);
}

.realtime-ai-review-dashboard.is-clear {
  border-color: #b9eadb;
  color: #176855;
  background: linear-gradient(135deg, #f2fff9, #eafaf4);
}

.realtime-ai-review-dashboard strong,
.realtime-ai-review-dashboard span {
  display: block;
}

.realtime-ai-review-dashboard strong {
  color: inherit;
  font-size: 15px;
  font-weight: 950;
}

.realtime-ai-review-dashboard span {
  margin-top: 4px;
  color: #8b661f;
  font-size: 12px;
  font-weight: 750;
}

.realtime-ai-review-dashboard.is-clear span {
  color: #31806c;
}

.realtime-ai-review-dashboard p {
  flex: 0 0 auto;
  margin: 0;
  border-radius: 999px;
  padding: 8px 11px;
  color: #6543b8;
  background: #f3efff;
  font-size: 12px;
  font-weight: 900;
}

.realtime-ai-review-dashboard p b {
  color: #4d2ea5;
}

.realtime-ai-review-cards {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
  background: #fbfdff;
}

.realtime-ai-review-card {
  display: grid;
  gap: 12px;
  border: 1px solid #f0c36b;
  border-left: 4px solid #d79a27;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(51, 74, 98, 0.06);
}

.realtime-ai-review-card > header,
.realtime-ai-review-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.realtime-ai-review-card > header span {
  border-radius: 999px;
  padding: 4px 8px;
  color: #6543b8;
  background: #f3efff;
  font-size: 11px;
  font-weight: 950;
}

.realtime-ai-review-card > header strong {
  flex: 1;
  color: #182d45;
  font-size: 13px;
  font-weight: 950;
}

.realtime-ai-review-card > header b {
  color: #9c5d0d;
  font-size: 12px;
}

.realtime-ai-review-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(190px, 0.8fr);
  gap: 12px;
}

.realtime-ai-review-card label {
  display: grid;
  gap: 5px;
}

.realtime-ai-review-card label > span,
.realtime-ai-suggestion-row > span {
  color: #7d8ba0;
  font-size: 10px;
  font-weight: 950;
}

.realtime-ai-review-card input,
.realtime-ai-review-card select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #d9e3ec;
  border-radius: 9px;
  padding: 0 10px;
  color: #14263d;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.realtime-ai-suggestion-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.realtime-ai-suggestion-row button {
  min-height: 28px;
  border: 1px solid #d8e3ec;
  border-radius: 999px;
  padding: 0 9px;
  color: #31536a;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}

.realtime-ai-suggestion-row button:hover,
.realtime-ai-suggestion-row button.active {
  border-color: #c8b7ef;
  color: #6543b8;
  background: #f3efff;
}

.realtime-ai-review-reason {
  margin: 0;
  border-radius: 10px;
  padding: 10px 12px;
  color: #56667c;
  background: #f7fafc;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.realtime-history-suggestion {
  display: grid;
  gap: 5px;
  border: 1px solid #bfe0dc;
  border-radius: 12px;
  padding: 11px 13px;
  background: linear-gradient(135deg, #effbf9, #f8fcff);
}

.realtime-history-suggestion span {
  color: #168579;
  font-size: 10px;
  font-weight: 950;
}

.realtime-history-suggestion strong {
  color: #123e4a;
  font-size: 13px;
  font-weight: 950;
}

.realtime-history-suggestion p {
  margin: 0;
  color: #5d7280;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.realtime-history-suggestion button {
  justify-self: start;
  border: 1px solid #99d5cd;
  border-radius: 8px;
  padding: 6px 9px;
  color: #087f75;
  background: #fff;
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.realtime-learning-opt-in,
.realtime-ai-review-card label.realtime-learning-opt-in {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 10px 11px;
  color: #536a7e;
  background: #f3f7f9;
  font-size: 11px;
  font-weight: 850;
}

.realtime-learning-opt-in input,
.realtime-ai-review-card .realtime-learning-opt-in input {
  width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: #0b9a8c;
}

.realtime-learning-opt-in span,
.realtime-ai-review-card .realtime-learning-opt-in > span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.realtime-ai-review-card > footer small {
  overflow: hidden;
  color: #75859a;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-ai-review-card > footer span {
  display: flex;
  gap: 7px;
}

.realtime-ai-review-card > footer button {
  min-height: 32px;
  border-radius: 8px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 900;
}

.realtime-record-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.realtime-usage-tabs {
  display: inline-flex;
  gap: 3px;
  border: 1px solid #d8e3ec;
  border-radius: 9px;
  padding: 3px;
  background: #eef3f7;
}

.realtime-usage-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  padding: 0 11px;
  color: #68778c;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.realtime-usage-tabs button.active {
  color: #0f6471;
  background: #fff;
  box-shadow: 0 2px 7px rgba(27, 54, 82, 0.1);
}

.realtime-work-usage,
.realtime-app-usage {
  display: grid;
  gap: 10px;
  padding: 0 20px 20px;
}

.realtime-work-usage-head,
.realtime-work-usage-row,
.realtime-app-usage-head,
.realtime-app-usage-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(240px, 2fr) 70px 58px;
  align-items: center;
  gap: 12px;
}

button.realtime-app-usage-row {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 7px 0;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

button.realtime-app-usage-row:hover,
button.realtime-app-usage-row:focus-visible {
  padding-inline: 8px;
  background: #f1f8fa;
  outline: 2px solid #b7e2e7;
}

.realtime-work-usage-head,
.realtime-app-usage-head {
  border-bottom: 1px solid #e2ebf1;
  padding: 0 0 8px;
  color: #78889b;
  font-size: 11px;
  font-weight: 850;
}

.realtime-work-usage-head span:nth-child(3),
.realtime-work-usage-head span:nth-child(4),
.realtime-app-usage-head span:nth-child(3),
.realtime-app-usage-head span:nth-child(4) {
  text-align: right;
}

button.realtime-work-usage-row,
button.realtime-app-usage-row {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 7px 0;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

button.realtime-work-usage-row:hover,
button.realtime-work-usage-row:focus-visible,
button.realtime-app-usage-row:hover,
button.realtime-app-usage-row:focus-visible {
  padding-inline: 8px;
  background: #f1f8fa;
  outline: 2px solid #b7e2e7;
}

.realtime-work-usage-row > strong,
.realtime-app-usage-row > strong {
  overflow: hidden;
  color: #18364d;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-work-usage-row > strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.realtime-work-usage-row > strong em {
  flex: 0 0 auto;
  border: 1px solid #c8b7ef;
  border-radius: 999px;
  padding: 3px 6px;
  color: #6543b8;
  background: #f3efff;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.realtime-work-usage-row > span,
.realtime-app-usage-row > span {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8f0f5;
}

.realtime-work-usage-row > span > i,
.realtime-app-usage-row > span > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rt-color, #168ea0), #39b9c7);
}

.realtime-work-usage-row > b,
.realtime-app-usage-row > b {
  color: var(--rt-color, #0f6471);
  font-size: 13px;
  text-align: right;
}

.realtime-work-usage-row > small,
.realtime-app-usage-row > small {
  color: #748397;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.realtime-work-usage-row.focus { --rt-color: #2879b8; }
.realtime-work-usage-row.planning { --rt-color: #87621b; }
.realtime-work-usage-row.document { --rt-color: #5366b8; }
.realtime-work-usage-row.research { --rt-color: #177d71; }
.realtime-work-usage-row.creative { --rt-color: #7757b3; }
.realtime-work-usage-row.media { --rt-color: #ad651b; }
.realtime-work-usage-row.meeting,
.realtime-work-usage-row.manual { --rt-color: #b54d70; }
.realtime-work-usage-row.gap { --rt-color: #b45309; }

.realtime-app-usage-row > strong {
  overflow: hidden;
  color: #18364d;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-app-usage-row > span {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8f0f5;
}

.realtime-app-usage-row > span > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #168ea0, #39b9c7);
}

.realtime-app-usage-row > b {
  color: #0f6471;
  font-size: 13px;
  text-align: right;
}

.realtime-app-usage-row > small {
  color: #748397;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.realtime-classification-review {
  border-top: 1px solid #dce7ee;
}

.realtime-classification-review > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: #4c6173;
  background: #f8fafc;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  list-style: none;
}

.realtime-classification-review > summary::-webkit-details-marker {
  display: none;
}

.realtime-classification-review > summary::before {
  content: "▸";
  margin-right: 8px;
  color: #168ea0;
}

.realtime-classification-review[open] > summary::before {
  content: "▾";
}

.realtime-classification-review > summary span {
  margin-left: auto;
  color: #9b6614;
}

.realtime-empty,
.realtime-loading,
.realtime-error {
  padding: 48px 24px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
  font-weight: 750;
}

.realtime-error {
  color: #b42318;
}

.realtime-manual-button {
  display: block;
  margin: 16px 0 0 auto;
  color: #fff;
  border-color: var(--teal);
  background: var(--teal);
}

.realtime-detail-modal {
  width: min(720px, 100%);
}

.realtime-detail-form,
.realtime-manual-form {
  display: grid;
  gap: 16px;
}

.realtime-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.realtime-form-field,
.realtime-form-check {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.realtime-form-field input,
.realtime-form-field select,
.realtime-form-field textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 9px 11px;
  color: var(--text);
  background: #fff;
  font: inherit;
  font-weight: 650;
}

.realtime-form-field textarea {
  min-height: 88px;
  resize: vertical;
}

.realtime-form-check {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.realtime-detail-readonly {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.realtime-detail-readonly > div {
  min-width: 0;
  padding: 12px 14px;
  background: #f8fafc;
}

.realtime-detail-readonly span,
.realtime-detail-readonly strong {
  display: block;
}

.realtime-detail-readonly span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.realtime-detail-readonly strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.5;
}

.realtime-delete-button {
  margin-right: auto;
  color: #b42318;
}

/* Refined time-management landing and realtime dashboard */
.topbar-navigation {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.time-management-topbar-back {
  min-height: 40px;
  border: 1px solid #cbd8e6;
  border-radius: 8px;
  padding: 0 13px;
  color: #33445f;
  background: #f7fafc;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.time-management-topbar-back:hover {
  border-color: #90c9d1;
  color: #087f8e;
  background: #eefafb;
}

.time-management-topbar-back[hidden] {
  display: none;
}

.time-management-home {
  width: min(960px, calc(100% - 48px));
}

.time-management-home-head {
  margin-bottom: 34px;
}

.time-management-home-head h1 {
  font-size: 29px;
  letter-spacing: -0.04em;
}

.time-management-home-head p {
  margin-top: 10px;
  font-size: 15px;
}

.time-management-choice-grid {
  gap: 22px;
}

.time-management-big-button {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 220px;
  overflow: hidden;
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: 0 18px 38px rgba(30, 55, 85, 0.08);
}

.time-management-big-button::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -65px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.045;
  pointer-events: none;
}

.time-management-big-button--classic {
  border-color: #cfe2f6;
  color: #276aab;
  background: linear-gradient(145deg, #f8fbff 0%, #edf6ff 100%);
}

.time-management-big-button--realtime {
  border-color: #c8e8df;
  color: #16836f;
  background: linear-gradient(145deg, #f8fffc 0%, #eaf9f4 100%);
}

.time-management-big-button--classic:hover,
.time-management-big-button--classic:focus-visible {
  border-color: #78addd;
  box-shadow: 0 22px 44px rgba(39, 106, 171, 0.16);
}

.time-management-big-button--realtime:hover,
.time-management-big-button--realtime:focus-visible {
  border-color: #62bba9;
  box-shadow: 0 22px 44px rgba(22, 131, 111, 0.16);
}

.time-management-card-icon {
  display: grid !important;
  width: 62px;
  height: 62px;
  margin: 0;
  border-radius: 18px;
  color: #fff !important;
  background: currentColor;
  box-shadow: 0 10px 22px rgba(35, 70, 105, 0.14);
  font-size: 29px !important;
  place-items: center;
}

.time-management-big-button--classic .time-management-card-icon {
  background: #4d91d3;
}

.time-management-big-button--realtime .time-management-card-icon {
  background: #38a78f;
  font-size: 16px !important;
}

.time-management-card-copy {
  min-width: 0;
}

.time-management-card-copy small {
  display: block;
  margin-bottom: 7px;
  color: currentColor;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.time-management-card-copy strong {
  margin-bottom: 9px;
  color: #17243c;
  font-size: 27px;
}

.time-management-card-copy > span {
  color: #5e6d82;
  line-height: 1.6;
}

.time-management-card-arrow {
  display: grid !important;
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: currentColor !important;
  font-size: 19px !important;
  place-items: center;
  opacity: 0.75;
}

.time-tracking-subview-toolbar {
  display: none;
}

.realtime-tracking-view {
  background: #f3f7fb;
}

.realtime-page-head {
  justify-content: space-between;
  align-items: center;
  width: min(1220px, calc(100% - 56px));
  margin: 0 auto;
  padding: 30px 0 22px;
}

.realtime-page-kicker {
  display: block;
  margin-bottom: 7px;
  color: #0b8c99;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.13em;
}

.realtime-page-head h1 {
  font-size: 29px;
  letter-spacing: -0.035em;
}

.realtime-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.realtime-date-label {
  color: #52617a;
  font-size: 13px;
  font-weight: 850;
}

.realtime-date-navigation {
  display: flex;
  align-items: stretch;
  gap: 5px;
  border: 1px solid #d8e3ec;
  border-radius: 12px;
  padding: 4px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(31, 56, 82, 0.06);
}

.realtime-date-navigation > label {
  display: grid;
  align-content: center;
  gap: 1px;
  min-width: 174px;
  padding: 1px 8px;
  text-align: center;
  cursor: pointer;
}

.realtime-date-navigation input[type="date"] {
  width: 100%;
  border: 0;
  padding: 0;
  color: #718198;
  background: transparent;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.realtime-page-actions .realtime-date-navigation button {
  min-width: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 0 8px;
  color: #405773;
  background: #f1f6f9;
}

.realtime-page-actions .realtime-date-navigation button:hover:not(:disabled) {
  color: #087f82;
  background: #e6f8f7;
}

.realtime-page-actions .realtime-date-navigation button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.realtime-date-navigation .realtime-date-label {
  margin-left: 0;
}

.realtime-page-actions button {
  min-height: 38px;
  border: 1px solid #d5e0eb;
  border-radius: 8px;
  padding: 0 13px;
  color: #35455e;
  background: #fff;
  font-weight: 850;
  cursor: pointer;
}

.realtime-page-actions button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.realtime-shell {
  width: min(1220px, calc(100% - 56px));
  padding: 0 0 52px;
}

.realtime-summary-bar {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.realtime-summary-item {
  position: relative;
  min-height: 112px;
  border: 1px solid #e1e8f0 !important;
  border-radius: 12px;
  padding: 16px 17px 14px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(33, 58, 88, 0.045);
}

.realtime-summary-item::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-bottom: 9px;
  border-radius: 50%;
  background: #7890ad;
  box-shadow: 0 0 0 5px #edf2f7;
}

.realtime-summary-item.computer::before { background: #28a77f; box-shadow: 0 0 0 5px #e6f7f1; }
.realtime-summary-item.ai::before { background: #7a58c8; box-shadow: 0 0 0 5px #f1ecff; }
.realtime-summary-item.idle::before { background: #e69836; box-shadow: 0 0 0 5px #fff4e5; }
.realtime-summary-item.manual::before { background: #d45d86; box-shadow: 0 0 0 5px #fcebf1; }
.realtime-summary-item.total::before { background: #567bd8; box-shadow: 0 0 0 5px #eaf0ff; }
.realtime-summary-item.rules::before { background: #2d86c8; box-shadow: 0 0 0 5px #eaf5ff; }

.realtime-summary-item span {
  margin: 0 0 4px;
}

.realtime-summary-item strong {
  font-size: 20px;
}

.realtime-summary-item small {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #8793a5;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-panel {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #dfe7ef;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(33, 58, 88, 0.045);
}

.realtime-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  border-bottom: 1px solid #e8edf3;
  padding: 14px 19px;
}

.realtime-panel-head h2 {
  margin: 0;
  color: #17243c;
  font-size: 16px;
  font-weight: 950;
}

.realtime-panel-head p {
  margin: 4px 0 0;
  color: #7a879a;
  font-size: 11px;
  font-weight: 750;
}

.realtime-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  color: #63728a;
  font-size: 11px;
  font-weight: 850;
}

.realtime-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.realtime-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2879b8, #177d71 45%, #ad651b);
}

.realtime-legend i.manual { background: #de789c; }
.realtime-legend i.gap { background: #e7a246; }

.realtime-day-timeline {
  min-height: 164px;
  padding: 18px 24px 16px;
}

.realtime-timeline-track {
  position: relative;
  min-width: 760px;
  height: 128px;
}

.realtime-day-timeline:has(.realtime-timeline-track) {
  overflow-x: auto;
}

.realtime-timeline-grid {
  position: absolute;
  inset: 0 0 28px;
  border-bottom: 1px solid #d9e3ed;
  background: linear-gradient(180deg, #fbfdff, #f7fafc);
}

.realtime-timeline-grid i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e7edf3;
}

.realtime-timeline-blocks {
  position: absolute;
  inset: 12px 0 40px;
}

.realtime-timeline-block {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 28px;
  height: 72px;
  overflow: hidden;
  border: 1px solid #9bc6e7;
  border-radius: 8px;
  padding: 8px 9px;
  color: #225c88;
  text-align: left;
  background: #eaf5fc;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.realtime-timeline-block:hover,
.realtime-timeline-block:focus-visible {
  z-index: 2;
  box-shadow: 0 8px 18px rgba(34, 92, 136, 0.2);
  transform: translateY(-2px);
  outline: none;
}

.realtime-timeline-block.tone-2 { border-color: #91d2bd; color: #18725e; background: #e9f8f3; }
.realtime-timeline-block.tone-3 { border-color: #b9a8ec; color: #6653a8; background: #f0edfc; }
.realtime-timeline-block.tone-4 { border-color: #e4bd77; color: #97601a; background: #fff5e3; }
.realtime-timeline-block.tone-5 { border-color: #efadbf; color: #a34865; background: #fdeef3; }
.realtime-timeline-block.manual { border-color: #ed9eb6; color: #a33e60; background: #fde9ef; }
.realtime-timeline-block.gap { border-style: dashed; border-color: #dc9a43; color: #a8620a; background: repeating-linear-gradient(135deg, #fff9ed, #fff9ed 6px, #fff3d8 6px, #fff3d8 12px); }

.realtime-timeline-block small,
.realtime-timeline-block strong,
.realtime-timeline-block span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-timeline-block small { flex: 0 0 auto; font-size: 9px; font-weight: 850; opacity: 0.78; }
.realtime-timeline-block strong { margin-top: 4px; font-size: 11px; }
.realtime-timeline-block span { margin-top: auto; font-size: 9px; font-weight: 800; opacity: 0.85; }

.realtime-timeline-axis {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
}

.realtime-timeline-axis span {
  position: absolute;
  color: #7d899a;
  font-size: 9px;
  font-weight: 750;
  transform: translateX(-50%);
}

.realtime-records-panel .realtime-list {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
}

.realtime-row {
  grid-template-columns: 118px minmax(210px, 1.25fr) 105px minmax(155px, 0.95fr) minmax(145px, 0.9fr) 72px;
  gap: 14px;
  min-width: 930px;
  min-height: 66px;
  padding: 12px 18px;
}

.realtime-row-head {
  min-height: 42px;
}

.realtime-row-category {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 8px;
  color: #2e719d;
  background: #eaf5fc;
  font-size: 11px;
}

.realtime-row-category.tone-2 { color: #18725e; background: #e9f8f3; }
.realtime-row-category.tone-3 { color: #6653a8; background: #f0edfc; }
.realtime-row-category.tone-4 { color: #97601a; background: #fff5e3; }
.realtime-row-category.tone-5 { color: #a34865; background: #fdeef3; }
.realtime-row-category.manual { color: #a33e60; background: #fde9ef; }
.realtime-row-category.gap { color: #a8620a; background: #fff3d8; }

.realtime-row-output,
.realtime-row-duration {
  overflow: hidden;
  color: #647289;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-row-duration {
  color: #273950;
  font-weight: 900;
}

.realtime-records-panel .realtime-review-edit-head,
.realtime-records-panel .realtime-review-edit-row {
  grid-template-columns: 92px minmax(220px, 1.25fr) 150px minmax(150px, 0.8fr) minmax(140px, 0.8fr) 58px 132px;
  min-width: 1060px;
}

.realtime-manual-button {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  margin: 0;
  border-radius: 8px;
  padding: 0 13px;
  font-size: 12px;
}

.realtime-daily-report {
  display: grid;
  grid-template-columns: 1.35fr repeat(2, minmax(0, 0.8fr)) 1.15fr;
}

.realtime-report-card {
  position: relative;
  min-height: 190px;
  border-right: 1px solid #e8edf3;
  padding: 20px 18px;
}

.realtime-report-card:last-child {
  border-right: 0;
}

.realtime-report-number {
  display: inline-grid;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #0d8998;
  background: #e8f7f9;
  font-size: 11px;
  font-weight: 950;
  place-items: center;
}

.realtime-report-card h3 {
  display: inline;
  margin: 0 0 0 7px;
  color: #24344d;
  font-size: 13px;
}

.realtime-report-card p {
  margin: 9px 0 0;
  color: #7a8799;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.realtime-report-big {
  display: block;
  margin-top: 28px;
  color: #245f91;
  font-size: 25px;
  font-weight: 950;
}

.realtime-report-big.warning { color: #c1771f; }

.realtime-category-summary {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.realtime-category-summary > div {
  display: grid;
  grid-template-columns: 72px minmax(50px, 1fr) 62px;
  align-items: center;
  gap: 8px;
  color: #59687d;
  font-size: 10px;
  font-weight: 800;
}

.realtime-category-summary i {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #edf1f5;
}

.realtime-category-summary b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #62b9c3, #6894dc);
}

.realtime-category-summary strong { text-align: right; }

.realtime-report-outputs ul {
  display: grid;
  gap: 8px;
  margin: 17px 0 0;
  padding: 0;
  list-style: none;
}

.realtime-report-outputs li {
  overflow: hidden;
  color: #4f6078;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal.realtime-detail-modal {
  width: min(980px, 100%);
}

.realtime-modal-kicker {
  display: block;
  margin-bottom: 4px;
  color: #178e9b;
  font-size: 11px;
  font-weight: 900;
}

.realtime-detail-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  min-width: 0;
  padding: 0 !important;
}

.realtime-detail-editor,
.realtime-detail-evidence {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 24px;
}

.realtime-detail-evidence {
  border-left: 1px solid #e4eaf1;
  background: #f8fafc;
}

.realtime-detail-evidence section {
  padding-bottom: 13px;
  border-bottom: 1px solid #e6ebf1;
}

.realtime-detail-evidence section:last-child {
  border-bottom: 0;
}

.realtime-detail-evidence h3 {
  margin: 0 0 7px;
  color: #4d5c72;
  font-size: 11px;
  font-weight: 950;
}

.realtime-detail-evidence p,
.realtime-detail-evidence li {
  margin: 0;
  color: #263851;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

.realtime-detail-evidence ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.realtime-evidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.realtime-evidence-chips span {
  border: 1px solid #d7e5ef;
  border-radius: 6px;
  padding: 5px 7px;
  color: #31526c;
  background: #fff;
  font-size: 11px;
  font-weight: 850;
}

.realtime-confidence strong {
  color: #e9a23b;
  letter-spacing: 2px;
}

.realtime-confidence span {
  margin-left: 6px;
  color: #66758a;
  font-size: 11px;
  font-weight: 850;
}

.realtime-work-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #dce7ef;
  border-radius: 9px;
  padding: 11px 13px;
  background: #f8fbfd;
}

.realtime-work-toggle input {
  order: 2;
  width: 38px;
  height: 20px;
  accent-color: #1696a5;
}

.modal.realtime-manual-entry-modal {
  width: min(960px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  border: 1px solid rgba(188, 211, 225, 0.82);
  border-radius: 24px;
  box-shadow: 0 28px 72px rgba(17, 38, 62, 0.22);
}

.realtime-manual-head {
  padding: 22px 26px;
  background:
    radial-gradient(circle at 12% 18%, rgba(20, 184, 166, 0.14), transparent 32%),
    linear-gradient(135deg, #ffffff, #f5fbfd 62%, #eef8fb);
}

.realtime-manual-head h2 {
  margin: 0;
  color: #10243e;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -0.035em;
}

.realtime-manual-head p {
  max-width: 720px;
  margin: 8px 0 0;
  color: #53677d;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.55;
}

.realtime-manual-body {
  display: grid;
  gap: 18px;
  max-height: calc(100vh - 176px);
  overflow-y: auto;
  padding: 24px 26px !important;
  background:
    linear-gradient(180deg, #ffffff, #f8fcfe),
    radial-gradient(circle at 100% 0%, rgba(14, 165, 183, 0.10), transparent 36%);
}

.realtime-gap-fill-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 18px;
  align-items: center;
  border: 1px solid rgba(185, 226, 232, 0.95);
  border-radius: 20px;
  padding: 17px 18px !important;
  background:
    linear-gradient(135deg, rgba(232, 250, 252, 0.98), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(13, 137, 152, 0.14), transparent 35%);
  box-shadow: 0 14px 32px rgba(24, 91, 105, 0.08);
}

.realtime-gap-fill-summary span {
  color: #0d8998;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.realtime-gap-fill-summary strong {
  grid-row: span 2;
  border-radius: 999px;
  padding: 9px 13px;
  color: #075f70;
  background: #ffffff;
  font-size: 14px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px #c7edf2, 0 10px 22px rgba(7, 149, 167, 0.11);
}

.realtime-gap-fill-summary p {
  margin: 0;
  color: #486178;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.realtime-manual-entry-modal .realtime-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.realtime-manual-entry-modal .realtime-form-field {
  gap: 8px;
  color: #17314d;
  font-size: 12.5px;
  font-weight: 950;
}

.realtime-manual-entry-modal .realtime-form-field input,
.realtime-manual-entry-modal .realtime-form-field select,
.realtime-manual-entry-modal .realtime-form-field textarea {
  min-height: 46px;
  border-color: #cbddea;
  border-radius: 12px;
  padding: 11px 13px;
  color: #10243e;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(31, 56, 82, 0.035);
}

.realtime-manual-entry-modal .realtime-form-field textarea {
  min-height: 110px;
}

.realtime-manual-work-toggle {
  border-radius: 14px;
  padding: 13px 15px;
  color: #10243e;
  background: #f4fafc;
}

.realtime-manual-foot {
  padding: 17px 24px;
  background: #ffffff;
}

.realtime-detail-time-row {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 22px 20px;
}

.modal.realtime-session-review-modal {
  width: min(1380px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  border: 1px solid rgba(188, 211, 225, 0.82);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(17, 38, 62, 0.22);
}

.realtime-session-review-head {
  padding: 22px 28px;
  background:
    radial-gradient(circle at 16% 10%, rgba(22, 150, 165, 0.12), transparent 32%),
    linear-gradient(135deg, #ffffff, #f4fbfd 62%, #eef8fb);
}

.realtime-session-review-head h2 {
  font-size: 23px;
}

.realtime-session-review-modal .realtime-detail-layout {
  grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
  max-height: calc(100vh - 146px);
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbfd 44%, #eef7fb 100%);
}

.realtime-session-review-modal .realtime-detail-editor {
  background: rgba(255, 255, 255, 0.94);
}

.realtime-session-review-modal .modal-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  border-top: 1px solid #dce8ef;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -10px 24px rgba(17, 38, 62, 0.08);
}

.realtime-field-help {
  display: block;
  margin-top: 6px;
  color: #68798b;
  font-size: 11px;
  line-height: 1.45;
}

.realtime-session-context {
  min-width: 0;
  gap: 14px;
  border-left: 1px solid rgba(208, 225, 236, 0.92);
  background:
    linear-gradient(180deg, rgba(248, 252, 254, 0.98), rgba(238, 248, 251, 0.95)),
    radial-gradient(circle at 85% 0%, rgba(20, 184, 166, 0.12), transparent 30%);
}

.realtime-context-hero {
  border: 1px solid rgba(186, 226, 232, 0.95) !important;
  border-radius: 20px;
  padding: 18px 19px !important;
  background:
    linear-gradient(135deg, rgba(232, 250, 252, 0.98), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(13, 137, 152, 0.16), transparent 36%);
  box-shadow: 0 16px 38px rgba(24, 91, 105, 0.09);
}

.realtime-context-hero span,
.realtime-context-grid span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #0d8998;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.045em;
}

.realtime-context-grid span i {
  display: grid;
  width: 22px;
  height: 22px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #0ea5b7, #14b8a6);
  font-size: 12px;
  font-style: normal;
  place-items: center;
  box-shadow: 0 8px 18px rgba(13, 137, 152, 0.22);
}

.realtime-context-grid span em {
  font-style: normal;
}

.realtime-context-hero strong {
  display: block;
  margin-top: 8px;
  color: #10243e;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.32;
}

.realtime-context-hero p {
  margin-top: 10px;
  color: #425d74;
  font-size: 12.5px;
  line-height: 1.58;
}

.realtime-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 11px;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.realtime-context-grid > button {
  position: relative;
  min-width: 0;
  min-height: 138px;
  border: 1px solid rgba(213, 228, 237, 0.98);
  border-radius: 18px;
  padding: 14px 14px 13px;
  background:
    linear-gradient(180deg, #ffffff, #fbfdff),
    radial-gradient(circle at 100% 0%, rgba(14, 165, 183, 0.12), transparent 40%);
  box-shadow: 0 12px 28px rgba(31, 56, 82, 0.07);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.realtime-context-grid > button:hover,
.realtime-context-grid > button:focus-visible,
.realtime-context-grid > button.active {
  border-color: #82cbd4;
  outline: none;
  background: linear-gradient(180deg, #ffffff, #f1fbfd);
  box-shadow: 0 16px 34px rgba(13, 137, 152, 0.16);
  transform: translateY(-2px);
}

.realtime-context-grid > button.active::after {
  content: "";
  position: absolute;
  inset: auto 14px 10px 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0ea5b7, #14b8a6);
}

.realtime-context-grid strong {
  display: block;
  min-height: 38px;
  margin-top: 12px;
  color: #152842;
  font-size: 13.5px;
  font-weight: 950;
  line-height: 1.34;
  word-break: keep-all;
}

.realtime-context-grid p {
  min-height: 30px;
  margin-top: 8px;
  color: #5b7085;
  font-size: 10.8px;
  font-weight: 800;
  line-height: 1.42;
}

.realtime-context-grid small {
  display: block;
  margin-top: 11px;
  color: #0d8998;
  font-size: 10px;
  font-weight: 950;
}

.realtime-context-details {
  padding: 0 !important;
  border-bottom: 0 !important;
}

.realtime-context-details article {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(181, 222, 229, 0.95);
  border-radius: 20px;
  padding: 17px 18px;
  background:
    linear-gradient(145deg, #ffffff, #f1fbfc),
    radial-gradient(circle at 0% 0%, rgba(14, 165, 183, 0.10), transparent 34%);
  box-shadow: 0 16px 36px rgba(22, 102, 116, 0.11);
}

.realtime-context-details article[hidden],
.realtime-context-details[hidden] {
  display: none !important;
}

.realtime-context-details header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 2px;
}

.realtime-context-details header span,
.realtime-context-details small {
  color: #60778c;
  font-size: 10.8px;
  font-weight: 900;
  line-height: 1.5;
}

.realtime-context-details header b {
  color: #087f8d;
  font-size: 14px;
  font-weight: 950;
}

.realtime-context-details p,
.realtime-context-details strong {
  margin: 0;
  color: #19314b;
  font-size: 12.7px;
  font-weight: 800;
  line-height: 1.62;
}

.realtime-context-detail-copy {
  display: grid;
  gap: 8px;
  border-radius: 15px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.76);
}

.realtime-context-detail-copy strong {
  color: #0f2b47;
  font-size: 13px;
}

.realtime-context-detail-text {
  display: block;
  border-radius: 13px;
  padding: 10px 12px;
  color: #536b82 !important;
  background: rgba(234, 245, 247, 0.82);
  word-break: keep-all;
}

.realtime-context-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.realtime-context-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  color: #fff;
  background: linear-gradient(135deg, #0ea5b7, #14b8a6);
  font-size: 10.5px;
  font-weight: 950;
  line-height: 1;
}

.realtime-context-status.warn {
  background: linear-gradient(135deg, #f59e0b, #ef7d22);
}

.realtime-context-status.reuse {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.realtime-context-status.muted {
  background: linear-gradient(135deg, #64748b, #94a3b8);
}

.realtime-context-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.realtime-context-facts span {
  border-radius: 999px;
  padding: 6px 9px;
  color: #3f6178;
  background: rgba(234, 245, 247, 0.96);
  font-size: 10.5px;
  font-weight: 900;
}

@media (max-width: 1120px) {
  .modal.realtime-session-review-modal {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
    border-radius: 20px;
  }

  .realtime-session-review-modal .realtime-detail-layout {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 132px);
  }

  .realtime-session-review-modal .realtime-detail-editor {
    order: 2;
    border-top: 1px solid rgba(208, 225, 236, 0.92);
  }

  .realtime-session-context {
    order: 1;
    border-left: 0;
  }

  .realtime-detail-time-row {
    order: 3;
  }

  .realtime-context-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .realtime-session-review-head {
    padding: 18px 18px;
  }

  .realtime-session-review-head h2 {
    font-size: 20px;
  }

  .realtime-detail-editor,
  .realtime-detail-evidence {
    padding: 18px;
  }

  .realtime-context-grid {
    grid-template-columns: 1fr;
  }

  .realtime-context-grid > button {
    min-height: 112px;
  }

  .modal.realtime-manual-entry-modal {
    width: calc(100vw - 18px);
    border-radius: 20px;
  }

  .realtime-manual-head,
  .realtime-manual-body {
    padding-inline: 18px !important;
  }

  .realtime-manual-entry-modal .realtime-form-grid,
  .realtime-gap-fill-summary {
    grid-template-columns: 1fr;
  }

  .realtime-gap-fill-summary strong {
    grid-row: auto;
    justify-self: start;
  }

  .realtime-hour-detail-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .realtime-hour-sort-buttons {
    justify-content: flex-start;
  }
}

.realtime-evidence-bullets {
  display: grid;
  gap: 7px;
}

.realtime-evidence-bullets li {
  position: relative;
  border-radius: 10px;
  padding: 9px 10px 9px 26px;
  background: #fff;
}

.realtime-evidence-bullets li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d8998;
}

.realtime-ai-decision-steps {
  display: grid;
  gap: 8px;
}

.realtime-ai-decision-steps > div {
  display: grid;
  grid-template-columns: 72px minmax(90px, 0.42fr) minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border: 1px solid #dfe9f0;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.realtime-ai-decision-steps span {
  color: #728398;
  font-size: 10px;
  font-weight: 950;
}

.realtime-ai-decision-steps strong {
  color: #10243e;
  font-size: 12px;
  font-weight: 950;
}

.realtime-ai-decision-steps p {
  color: #52677d;
  font-size: 11px;
  line-height: 1.45;
}

.realtime-raw-evidence {
  border: 1px solid #dfe9f0;
  border-radius: 13px;
  background: #fff;
}

.realtime-raw-evidence summary {
  padding: 11px 12px;
  color: #435b70;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.realtime-raw-evidence p {
  border-top: 1px solid #edf2f6;
  padding: 12px;
  color: #52677d;
  font-size: 11px;
}

.realtime-secondary-button,
.realtime-save-button {
  min-height: 39px;
  border-radius: 999px;
  padding: 0 17px;
  font-size: 12px;
  font-weight: 950;
}

.realtime-secondary-button {
  border: 1px solid #d5e1ea;
  color: #40566e;
  background: #fff;
}

.realtime-secondary-button:hover,
.realtime-secondary-button:focus-visible {
  border-color: #9ecfd6;
  color: #087d89;
  outline: none;
}

.realtime-save-button {
  border-color: #0795a7;
  background: linear-gradient(135deg, #0795a7, #087d89);
  box-shadow: 0 10px 20px rgba(7, 149, 167, 0.18);
}

.realtime-save-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.realtime-view-switch {
  display: inline-flex;
  gap: 3px;
  border: 1px solid #d8e3ec;
  border-radius: 9px;
  padding: 3px;
  background: #eef3f7;
}

.realtime-view-switch button {
  min-height: 31px;
  border: 0;
  padding: 0 11px;
  color: #68778c;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
}

.realtime-view-switch button.active {
  color: #14354b;
  background: #fff;
  box-shadow: 0 2px 7px rgba(27, 54, 82, 0.1);
}

.realtime-dashboard-view[hidden],
.realtime-full-view[hidden],
.realtime-flow-view[hidden] {
  display: none;
}

.realtime-panel-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.realtime-panel-actions > button,
.realtime-full-head button {
  min-height: 34px;
  border: 1px solid #d7e2eb;
  border-radius: 8px;
  padding: 0 11px;
  color: #3b526a;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

/* One semantic color per work type, shared by every realtime view. */
.realtime-timeline-block.focus,
.realtime-timeline-segment.focus,
.realtime-row-category.focus,
.realtime-vertical-item.focus,
.realtime-hour-filter-chip.focus { --rt-color: #2879b8; --rt-border: #94c2e4; --rt-soft: #eaf5fc; }
.realtime-timeline-block.planning,
.realtime-timeline-segment.planning,
.realtime-row-category.planning,
.realtime-vertical-item.planning,
.realtime-hour-filter-chip.planning { --rt-color: #87621b; --rt-border: #dfc27d; --rt-soft: #fff7df; }
.realtime-timeline-block.document,
.realtime-timeline-segment.document,
.realtime-row-category.document,
.realtime-vertical-item.document,
.realtime-hour-filter-chip.document { --rt-color: #5366b8; --rt-border: #abb8eb; --rt-soft: #eef0fc; }
.realtime-timeline-block.research,
.realtime-timeline-segment.research,
.realtime-row-category.research,
.realtime-vertical-item.research,
.realtime-hour-filter-chip.research { --rt-color: #177d71; --rt-border: #8fcfc4; --rt-soft: #e8f7f3; }
.realtime-timeline-block.creative,
.realtime-timeline-segment.creative,
.realtime-row-category.creative,
.realtime-vertical-item.creative,
.realtime-hour-filter-chip.creative { --rt-color: #7757b3; --rt-border: #c3afe9; --rt-soft: #f2edfc; }
.realtime-timeline-block.media,
.realtime-timeline-segment.media,
.realtime-row-category.media,
.realtime-vertical-item.media,
.realtime-hour-filter-chip.media { --rt-color: #ad651b; --rt-border: #e8bd82; --rt-soft: #fff4e3; }
.realtime-timeline-block.meeting,
.realtime-timeline-segment.meeting,
.realtime-row-category.meeting,
.realtime-vertical-item.meeting,
.realtime-hour-filter-chip.meeting { --rt-color: #b54d70; --rt-border: #ecabc0; --rt-soft: #fdebf1; }
.realtime-timeline-block.manual,
.realtime-timeline-segment.manual,
.realtime-row-category.manual,
.realtime-vertical-item.manual,
.realtime-hour-filter-chip.manual { --rt-color: #b04768; --rt-border: #eda6bb; --rt-soft: #fdebf1; }
.realtime-timeline-block.gap,
.realtime-timeline-segment.gap,
.realtime-row-category.gap,
.realtime-vertical-item.gap,
.realtime-hour-filter-chip.gap { --rt-color: #b45309; --rt-border: #e7ac5b; --rt-soft: #fff5df; }

.realtime-timeline-hour-block.focus { --rt-color: #2879b8; --rt-soft: #eaf5fc; }
.realtime-timeline-hour-block.planning { --rt-color: #87621b; --rt-soft: #fff7df; }
.realtime-timeline-hour-block.document { --rt-color: #5366b8; --rt-soft: #eef0fc; }
.realtime-timeline-hour-block.research { --rt-color: #177d71; --rt-soft: #e8f7f3; }
.realtime-timeline-hour-block.creative { --rt-color: #7757b3; --rt-soft: #f2edfc; }
.realtime-timeline-hour-block.media { --rt-color: #ad651b; --rt-soft: #fff4e3; }
.realtime-timeline-hour-block.meeting,
.realtime-timeline-hour-block.manual { --rt-color: #b54d70; --rt-soft: #fdebf1; }
.realtime-timeline-hour-block.gap { --rt-color: #b45309; --rt-soft: #fff5df; }

.realtime-day-timeline {
  min-height: 330px;
  overflow-x: auto;
  padding: 0 22px 16px;
  scrollbar-color: #b8c6d3 transparent;
  scrollbar-width: thin;
}

.realtime-timeline-track {
  position: relative;
  width: max(100%, var(--timeline-min-width));
  min-width: 0;
  height: 276px;
}

.realtime-timeline-hours {
  position: absolute;
  inset: 0 0 auto;
  height: 37px;
}

.realtime-timeline-hours span {
  position: absolute;
  top: 13px;
  color: #738196;
  font-size: 10px;
  font-weight: 850;
  transform: translateX(-50%);
}

.realtime-timeline-grid {
  position: absolute;
  inset: 37px 0 auto;
  height: 48px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fafc 100%);
}

.realtime-timeline-grid i {
  position: absolute;
  inset-block: 0;
  width: 1px;
  background: #e3eaf1;
}

.realtime-timeline-overview {
  position: absolute;
  inset: 49px 0 auto;
  height: 24px;
  overflow: hidden;
  border: 1px solid #dfe8f0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1f6fa, #eaf1f6);
}

.realtime-timeline-segment {
  position: absolute;
  top: 3px;
  height: 16px;
  min-width: 12px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: var(--rt-color, #2879b8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 1px 3px rgba(35, 55, 75, 0.13);
}

.realtime-timeline-segment.gap {
  border: 1px dashed var(--rt-color);
  background: repeating-linear-gradient(135deg, #fff8e9, #fff8e9 5px, #f8dba9 5px, #f8dba9 10px);
}

.realtime-timeline-card-strip {
  position: absolute;
  inset: 96px 0 auto;
  display: grid;
  grid-auto-flow: row;
  gap: 10px;
}

.realtime-timeline-hour-block {
  display: flex;
  min-width: 0;
  height: 158px;
  overflow: hidden;
  border: 1px solid #dfe7ef;
  border-top: 4px solid var(--rt-color, #8a9aab);
  border-radius: 16px;
  padding: 12px 12px 11px;
  flex-direction: column;
  background: linear-gradient(180deg, var(--rt-soft, #f6f8fa), #fff 58%);
  box-shadow: 0 9px 24px rgba(26, 48, 72, 0.07);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

button.realtime-timeline-hour-block:hover,
button.realtime-timeline-hour-block:focus-visible {
  border-color: var(--rt-color, #8a9aab);
  box-shadow: 0 14px 30px rgba(26, 48, 72, 0.13);
  outline: none;
  transform: translateY(-2px);
}

.realtime-timeline-hour-block > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.realtime-timeline-hour-block > header span {
  color: var(--rt-color, #718096);
  font-size: 10px;
  font-weight: 950;
}

.realtime-timeline-hour-block > header b {
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--rt-color, #718096);
  background: #fff;
  font-size: 10px;
  box-shadow: 0 1px 4px rgba(35, 55, 75, 0.1);
  white-space: nowrap;
}

.realtime-hour-main {
  display: grid;
  gap: 5px;
  overflow: hidden;
  margin-top: 10px;
}

.realtime-hour-main strong {
  display: block;
  overflow: hidden;
  color: #1f3047;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-hour-main small {
  display: block;
  overflow: hidden;
  color: #6c7c90;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-hour-stack {
  display: flex;
  gap: 3px;
  height: 8px;
  overflow: hidden;
  margin-top: 10px;
  border-radius: 999px;
  background: #e8f0f5;
}

.realtime-hour-stack i {
  display: block;
  min-width: 6px;
  height: 100%;
  background: var(--rt-color, #2879b8);
}

.realtime-hour-stack i.focus { background: #2879b8; }
.realtime-hour-stack i.planning { background: #87621b; }
.realtime-hour-stack i.document { background: #5366b8; }
.realtime-hour-stack i.research { background: #177d71; }
.realtime-hour-stack i.creative { background: #7757b3; }
.realtime-hour-stack i.media { background: #ad651b; }
.realtime-hour-stack i.meeting,
.realtime-hour-stack i.manual { background: #b54d70; }
.realtime-hour-stack i.gap { background: #e6a345; }

.realtime-hour-category-list {
  display: none;
  gap: 6px;
  margin-top: 10px;
  overflow: hidden;
}

.realtime-hour-category-list > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--rt-color, #61758a);
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-hour-category-list b {
  font-weight: 950;
  white-space: nowrap;
}

.realtime-hour-ai-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  margin-top: 10px;
  padding-top: 0;
}

.realtime-hour-ai-badges span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border-radius: 999px;
  padding: 4px 7px;
  color: #496178;
  background: #f1f5f8;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.realtime-hour-ai-badges b {
  margin-right: 2px;
  color: #1f3047;
}

.realtime-hour-ai-badges .ai {
  border: 1px solid #c8b7ef;
  color: #6543b8;
  background: #f3efff;
}

.realtime-hour-ai-badges .review {
  border: 1px solid #f0c36b;
  color: #9c5d0d;
  background: #fff6e5;
}

.realtime-timeline-hour-block > small {
  overflow: hidden;
  margin-top: 7px;
  color: #68798c;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-timeline-hour-block > em {
  margin-top: auto;
  padding-top: 7px;
  color: #8a97a7;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.realtime-timeline-hour-block.empty {
  border-top-color: #c7d1db;
  background: #fafbfd;
}

.realtime-timeline-hour-block.empty .realtime-hour-main {
  margin-top: 14px;
}

.realtime-app-detail-modal {
  width: min(760px, calc(100vw - 32px));
}

.realtime-app-detail-body {
  display: grid;
  gap: 16px;
}

.realtime-app-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.realtime-app-detail-summary > div {
  border: 1px solid #dfe9ef;
  border-radius: 10px;
  padding: 13px;
  background: #f8fbfc;
}

.realtime-app-detail-summary span,
.realtime-app-detail-summary strong {
  display: block;
}

.realtime-app-detail-summary span {
  color: #78889b;
  font-size: 10px;
  font-weight: 850;
}

.realtime-app-detail-summary strong {
  margin-top: 5px;
  color: #164c59;
  font-size: 18px;
}

.realtime-app-detail-note {
  margin: 0;
  border-radius: 8px;
  padding: 10px 12px;
  color: #426371;
  background: #edf8fa;
  font-size: 11px;
  font-weight: 750;
}

.realtime-work-detail-modal,
.realtime-hour-detail-modal {
  width: min(920px, calc(100vw - 34px));
  overflow: hidden;
  border-radius: 20px;
}

.realtime-polished-head {
  align-items: flex-start;
  border-bottom: 1px solid #e3edf3;
  background: linear-gradient(135deg, #ffffff 0%, #f6fbfd 100%);
}

.realtime-polished-head h2 {
  margin: 2px 0 0;
  color: #0d213b;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.realtime-polished-head p {
  margin: 7px 0 0;
  color: #6e7f92;
  font-size: 12px;
  font-weight: 750;
}

.realtime-modal-close-button {
  min-height: 36px;
  border: 1px solid #d4e2eb;
  border-radius: 999px;
  padding: 0 14px;
  color: #37526a;
  background: #fff;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 4px 12px rgba(30, 55, 80, 0.08);
}

.realtime-modal-close-button:hover,
.realtime-modal-close-button:focus-visible {
  border-color: #9ed5dd;
  color: #087d89;
  outline: none;
}

.realtime-polished-body {
  display: grid;
  gap: 16px;
  padding: 20px !important;
  background: #f7fbfd;
}

.realtime-polished-summary,
.realtime-hour-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.realtime-polished-summary > div,
.realtime-hour-detail-summary > div {
  border: 1px solid #dfe9ef;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(31, 56, 82, 0.045);
}

.realtime-polished-summary span,
.realtime-hour-detail-summary span {
  display: block;
  color: #77879b;
  font-size: 11px;
  font-weight: 900;
}

.realtime-polished-summary strong,
.realtime-hour-detail-summary strong {
  display: block;
  margin-top: 7px;
  color: #0d243e;
  font-size: 20px;
  font-weight: 950;
}

.realtime-polished-note {
  margin: 0;
  border: 1px solid #d3edf1;
  border-radius: 13px;
  padding: 12px 14px;
  color: #315d69;
  background: linear-gradient(135deg, #effbfc, #f7fdff);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

.realtime-hour-detail-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.realtime-hour-detail-breakdown span,
.realtime-hour-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rt-border, #d9e5ec);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--rt-color, #2e719d);
  background: var(--rt-soft, #f4f8fb);
  font-size: 12px;
  font-weight: 950;
}

.realtime-hour-filter-chip {
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(31, 56, 82, 0.045);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.realtime-hour-filter-chip:hover,
.realtime-hour-filter-chip:focus-visible,
.realtime-hour-filter-chip.active {
  border-color: currentColor;
  outline: none;
  box-shadow: 0 10px 22px rgba(31, 56, 82, 0.1);
  transform: translateY(-1px);
}

.realtime-hour-detail-breakdown em,
.realtime-hour-filter-chip em {
  font-style: normal;
  font-weight: 850;
  opacity: 0.8;
}

.realtime-hour-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #dfe8f0;
  border-radius: 18px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ffffff, #f5fbfd);
}

.realtime-hour-detail-toolbar > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.realtime-hour-detail-toolbar span {
  color: #6a7d90;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.035em;
}

.realtime-hour-detail-toolbar strong {
  color: #10243e;
  font-size: 12px;
  font-weight: 950;
}

.realtime-hour-sort-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.realtime-hour-sort-buttons button {
  min-height: 31px;
  border: 1px solid #d6e4ed;
  border-radius: 999px;
  padding: 0 11px;
  color: #435b70;
  background: #fff;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.realtime-hour-sort-buttons button:hover,
.realtime-hour-sort-buttons button:focus-visible,
.realtime-hour-sort-buttons button.active {
  border-color: #0795a7;
  color: #087d89;
  outline: none;
  background: #edfafa;
}

.realtime-polished-records {
  display: grid;
  gap: 10px;
}

.realtime-polished-records h3 {
  margin: 2px 0 0;
  color: #1c3149;
  font-size: 14px;
  font-weight: 950;
}

.realtime-polished-records h3 span {
  margin-left: 8px;
  color: #7b8b9e;
  font-size: 11px;
  font-weight: 850;
}

.realtime-polished-record {
  display: grid;
  gap: 9px;
  border: 1px solid #dde8f0;
  border-radius: 15px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(31, 56, 82, 0.045);
}

.realtime-polished-record.needs-review {
  border-color: #f0c36b;
  box-shadow: inset 4px 0 0 #e6a345, 0 7px 18px rgba(31, 56, 82, 0.045);
}

.realtime-polished-record header,
.realtime-polished-record footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.realtime-polished-record header span {
  color: #63758c;
  font-size: 12px;
  font-weight: 900;
}

.realtime-polished-record header b {
  border-radius: 999px;
  padding: 4px 8px;
  color: #087d89;
  background: #eaf9fb;
  font-size: 11px;
  font-weight: 950;
}

.realtime-polished-record > strong {
  color: #10243e;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.35;
}

.realtime-polished-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.realtime-polished-meta span {
  border: 1px solid #dce7ef;
  border-radius: 999px;
  padding: 5px 8px;
  color: #405b72;
  background: #f8fbfd;
  font-size: 11px;
  font-weight: 850;
}

.realtime-polished-record p {
  margin: 0;
  border-radius: 10px;
  padding: 9px 10px;
  color: #5d6e82;
  background: #f7fafc;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
}

.realtime-polished-action {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, #0795a7, #18a88f);
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 7px 16px rgba(7, 149, 167, 0.22);
}

.realtime-polished-action:hover,
.realtime-polished-action:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.realtime-app-intervals {
  display: grid;
  gap: 8px;
}

.realtime-app-intervals h3 {
  margin: 0 0 3px;
  color: #24374a;
  font-size: 13px;
}

.realtime-app-intervals article {
  border: 1px solid #e0e8ef;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fff;
}

.realtime-app-intervals article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.realtime-app-intervals article strong,
.realtime-app-intervals article b {
  color: #1e5261;
  font-size: 11px;
}

.realtime-app-intervals article p,
.realtime-app-intervals article small {
  display: block;
  overflow: hidden;
  margin: 5px 0 0;
  color: #607287;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-timeline-block {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  height: 137px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe7ef;
  border-top: 4px solid var(--rt-color, #2879b8);
  border-radius: 11px;
  padding: 10px 12px 11px;
  color: var(--rt-color, #2879b8);
  text-align: left;
  background: #fff;
  box-shadow: 0 6px 15px rgba(38, 67, 95, 0.075);
  cursor: pointer;
}

.realtime-timeline-block::after {
  display: none;
}

.realtime-timeline-block:hover,
.realtime-timeline-block:focus-visible {
  z-index: 3;
  border-color: var(--rt-color, #2879b8);
  box-shadow: 0 10px 22px rgba(38, 67, 95, 0.18);
  transform: translateY(-3px);
  outline: none;
}

.realtime-timeline-block.gap {
  border-style: dashed;
  border-top-style: solid;
  background: #fffbf3;
}

.realtime-timeline-type {
  display: inline-flex !important;
  max-width: 100%;
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--rt-color, #2879b8);
  background: rgba(255,255,255,0.72);
  font-size: 9px !important;
  font-weight: 950 !important;
}

.realtime-timeline-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.realtime-timeline-card-head > b {
  width: auto !important;
  margin: 0 !important;
  color: var(--rt-color, #2879b8) !important;
  font-size: 9px !important;
  white-space: nowrap;
}

.realtime-timeline-block strong,
.realtime-timeline-block small,
.realtime-timeline-card-time {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-timeline-block strong {
  margin-top: 8px;
  color: #1f3047;
  font-size: 11px;
  font-weight: 950;
}

.realtime-timeline-block small {
  margin-top: 5px;
  color: #5f7188;
  font-size: 9px;
  font-weight: 750;
}

.realtime-timeline-card-time {
  margin-top: auto;
  color: var(--rt-color, #2879b8);
  font-size: 9px;
  font-weight: 900;
}

.realtime-row-category.focus,
.realtime-row-category.document,
.realtime-row-category.research,
.realtime-row-category.creative,
.realtime-row-category.media,
.realtime-row-category.meeting,
.realtime-row-category.manual,
.realtime-row-category.gap {
  color: var(--rt-color);
  background: var(--rt-soft);
}

.realtime-full-panel {
  margin-top: 0;
}

.realtime-full-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 106px;
  border-bottom: 1px solid #e4ebf2;
  padding: 22px 25px;
  background: linear-gradient(135deg, #f9fcff, #f4f9fb);
}

.realtime-full-head span {
  color: #138895;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.14em;
}

.realtime-full-head h2 {
  margin: 5px 0 0;
  color: #17243c;
  font-size: 23px;
  font-weight: 950;
}

.realtime-full-head p {
  margin: 6px 0 0;
  color: #718096;
  font-size: 12px;
  font-weight: 750;
}

.realtime-full-day-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid #e4ebf2;
  background: #e4ebf2;
}

.realtime-full-day-summary > div {
  padding: 15px 22px;
  background: #fff;
}

.realtime-full-day-summary span,
.realtime-full-day-summary strong {
  display: block;
}

.realtime-full-day-summary span {
  color: #7a8799;
  font-size: 10px;
  font-weight: 850;
}

.realtime-full-day-summary strong {
  margin-top: 5px;
  color: #23354d;
  font-size: 15px;
  font-weight: 950;
}

.realtime-vertical-timeline {
  position: relative;
  padding: 24px 25px 30px;
  background: #fff;
}

.realtime-vertical-timeline::before {
  content: "";
  position: absolute;
  top: 37px;
  bottom: 43px;
  left: 154px;
  width: 2px;
  background: #dce5ee;
}

.realtime-vertical-marker,
.realtime-vertical-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 106px 28px minmax(0, 1fr);
  gap: 12px;
}

.realtime-vertical-marker {
  min-height: 45px;
  align-items: start;
  color: #718096;
}

.realtime-vertical-marker span {
  padding-top: 2px;
  text-align: right;
  font-size: 11px;
  font-weight: 850;
}

.realtime-vertical-marker strong {
  grid-column: 3;
  color: #6a788c;
  font-size: 11px;
}

.realtime-vertical-marker::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 123px;
  width: 10px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #7588a0;
  box-shadow: 0 0 0 1px #b9c6d3;
}

.realtime-vertical-item {
  width: 100%;
  min-height: 116px;
  border: 0;
  padding: 0 0 14px;
  color: #22334b;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.realtime-vertical-time {
  display: grid;
  align-content: start;
  justify-items: end;
  padding-top: 13px;
}

.realtime-vertical-time strong { font-size: 13px; }
.realtime-vertical-time small { margin-top: 2px; color: #8793a4; font-size: 10px; }
.realtime-vertical-time b { margin-top: 8px; color: var(--rt-color); font-size: 10px; }

.realtime-vertical-node {
  align-self: start;
  width: 13px;
  height: 13px;
  margin: 16px auto 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--rt-color);
  box-shadow: 0 0 0 2px var(--rt-border);
}

.realtime-vertical-content {
  display: block;
  min-width: 0;
  border: 1px solid #dfe7ef;
  border-left: 4px solid var(--rt-color);
  border-radius: 10px;
  padding: 13px 15px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(34, 57, 84, 0.045);
}

.realtime-vertical-item:hover .realtime-vertical-content,
.realtime-vertical-item:focus-visible .realtime-vertical-content {
  border-color: var(--rt-border);
  background: var(--rt-soft);
}

.realtime-vertical-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.realtime-vertical-title em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--rt-color);
  background: var(--rt-soft);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.realtime-vertical-title strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-vertical-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.realtime-vertical-meta b {
  border: 1px solid #e0e7ef;
  border-radius: 5px;
  padding: 3px 6px;
  color: #5b6c82;
  background: #f8fafc;
  font-size: 9px;
  font-weight: 800;
}

.realtime-vertical-files,
.realtime-vertical-content > small {
  display: block;
  margin-top: 8px;
  color: #607188;
  font-size: 10px;
  font-weight: 750;
}

.realtime-vertical-content > small {
  color: #8995a5;
  font-weight: 650;
}

.realtime-timeline-window {
  width: min(1040px, 96vw);
  max-height: 92vh;
}

.realtime-timeline-window-body {
  max-height: calc(92vh - 82px);
  overflow-y: auto;
  padding: 0 !important;
}

.realtime-flow-table {
  display: grid;
  gap: 14px;
  padding: 20px 22px 24px;
}

.realtime-flow-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.realtime-flow-summary > div {
  border: 1px solid #dfe8f0;
  border-radius: 16px;
  padding: 15px 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(31, 56, 82, 0.045);
}

.realtime-flow-summary span,
.realtime-flow-row-head div {
  color: #667891;
  font-size: 11px;
  font-weight: 950;
}

.realtime-flow-summary strong {
  display: block;
  margin-top: 5px;
  color: #10243e;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.035em;
}

.realtime-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.realtime-flow-chunks {
  display: grid;
  gap: 12px;
  border: 1px solid #dce8f0;
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at 0 0, rgba(12, 176, 194, 0.08), transparent 34%),
    linear-gradient(135deg, #fbfdff, #f5f9fc);
  box-shadow: 0 14px 34px rgba(31, 56, 82, 0.065);
}

.realtime-flow-chunks > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.realtime-flow-chunks > header strong {
  display: block;
  color: #10243e;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.025em;
}

.realtime-flow-chunks > header span,
.realtime-flow-chunks > header small {
  color: #71859a;
  font-size: 11px;
  font-weight: 800;
}

.realtime-flow-chunk-list {
  display: grid;
  gap: 9px;
}

.realtime-flow-chunk-card {
  display: block;
  width: 100%;
  border: 1px solid rgba(133, 160, 184, 0.24);
  border-left: 5px solid var(--rt-color, #8a9aab);
  border-radius: 16px;
  padding: 0;
  color: inherit;
  background: linear-gradient(135deg, var(--rt-soft, #f6f9fb), #fff 70%);
  text-align: left;
  box-shadow: 0 9px 20px rgba(31, 56, 82, 0.045);
  overflow: hidden;
}

.realtime-flow-chunk-card:hover,
.realtime-flow-chunk-card:focus-visible {
  border-color: rgba(7, 149, 167, 0.32);
  box-shadow: 0 16px 32px rgba(7, 149, 167, 0.12);
  transform: translateY(-1px);
}

.realtime-flow-chunk-card.is-confirmed {
  border-color: rgba(10, 158, 135, 0.38);
  box-shadow: 0 12px 28px rgba(10, 158, 135, 0.11);
}

.realtime-flow-chunk-content {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  padding: 12px 14px 10px 12px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.realtime-flow-chunk-content:focus-visible {
  outline: 2px solid rgba(7, 149, 167, 0.32);
  outline-offset: -2px;
}

.realtime-flow-confirmed-badge {
  display: inline-flex;
  margin-left: 8px;
  border-radius: 999px;
  padding: 3px 7px;
  color: #087b6b;
  background: #ddf7f1;
  font-size: 9px;
  font-style: normal;
  vertical-align: 2px;
}

.realtime-flow-chunk-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  border-top: 1px solid rgba(133, 160, 184, 0.16);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.58);
}

.realtime-flow-chunk-actions button {
  border: 1px solid #d8e4ec;
  border-radius: 9px;
  padding: 6px 9px;
  color: #50667d;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.realtime-flow-chunk-actions button:last-child {
  border-color: #91d9d2;
  color: #087f82;
  background: #e9fbf9;
}

.realtime-flow-chunk-actions button.confirmed {
  color: #fff;
  background: #0b9a8c;
}

.realtime-flow-chunk-actions button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.realtime-flow-chunk-index {
  display: inline-grid;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: var(--rt-color, #53677d);
  background: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(133, 160, 184, 0.18);
}

.realtime-flow-chunk-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.realtime-flow-chunk-main strong {
  overflow: hidden;
  color: #10243e;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-flow-chunk-main small {
  overflow: hidden;
  color: #637a91;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-flow-chunk-main > span {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.realtime-flow-chunk-main em {
  border-radius: 999px;
  padding: 4px 7px;
  color: #53677d;
  background: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.realtime-flow-chunk-side {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 112px;
}

.realtime-flow-chunk-side b {
  color: #18314f;
  font-size: 12px;
  font-weight: 950;
}

.realtime-flow-chunk-side small {
  color: #75879b;
  font-size: 10px;
  font-weight: 850;
}

.realtime-flow-chunk-edit-modal {
  width: min(720px, calc(100vw - 32px));
}

.realtime-flow-edit-body {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
}

.realtime-flow-edit-body label,
.realtime-flow-edit-body section {
  display: grid;
  gap: 8px;
}

.realtime-flow-edit-body label > span,
.realtime-flow-edit-body section > span {
  color: #314b67;
  font-size: 12px;
  font-weight: 950;
}

.realtime-flow-edit-body input,
.realtime-flow-edit-body select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cddce8;
  border-radius: 11px;
  padding: 10px 12px;
  color: #10243e;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.realtime-flow-edit-body section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.realtime-flow-edit-body section em {
  border-radius: 999px;
  padding: 6px 9px;
  color: #496178;
  background: #edf5f8;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.realtime-flow-edit-note {
  margin: 0;
  border-radius: 11px;
  padding: 12px;
  color: #718399;
  background: #f4f8fa;
  font-size: 12px;
  font-weight: 800;
}

.realtime-flow-edit-foot {
  gap: 8px;
}

.realtime-flow-grid {
  display: grid;
  overflow: hidden;
  border: 1px solid #d7e4ee;
  border-radius: 18px;
  background: #d7e4ee;
  box-shadow: 0 12px 30px rgba(31, 56, 82, 0.06);
}

.realtime-flow-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 1px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

button.realtime-flow-row {
  cursor: pointer;
}

button.realtime-flow-row:hover .realtime-flow-exec,
button.realtime-flow-row:focus-visible .realtime-flow-exec {
  outline: 2px solid rgba(7, 149, 167, 0.18);
  outline-offset: -2px;
  background: linear-gradient(135deg, var(--rt-soft, #f6f9fb), #fff);
}

.realtime-flow-row > div {
  min-width: 0;
  background: #fff;
}

.realtime-flow-row-head {
  position: sticky;
  top: 0;
  z-index: 1;
}

.realtime-flow-row-head > div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  color: #41546d;
  background: #f5f9fc;
}

.realtime-flow-time {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 72px;
  padding: 10px 8px;
  background: #f8fbfd !important;
}

.realtime-flow-time strong {
  color: #223d5a;
  font-size: 13px;
  font-weight: 950;
}

.realtime-flow-time span {
  color: #8290a3;
  font-size: 11px;
  font-weight: 800;
}

.realtime-flow-plan {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 12px 16px;
  background: #fbfdff !important;
}

.realtime-flow-plan span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 7px 10px;
  color: #53677d;
  background: #f0f5f8;
  font-size: 12px;
  font-weight: 900;
}

.realtime-flow-plan small {
  display: block;
  overflow: hidden;
  color: #71859a;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-flow-plan.matched span {
  color: #056775;
  background: #dff7fa;
}

.realtime-flow-plan.partial span,
.realtime-flow-plan.loading span {
  color: #875a06;
  background: #fff3cf;
}

.realtime-flow-plan.empty span {
  color: #738399;
  background: #f1f5f9;
}

.realtime-flow-exec {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 12px 16px;
  border-left: 4px solid var(--rt-color, #8a9aab);
  background: linear-gradient(135deg, var(--rt-soft, #f6f9fb), #fff) !important;
}

.realtime-flow-exec strong {
  overflow: hidden;
  color: #14243c;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-flow-exec small {
  overflow: hidden;
  color: #687b90;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.realtime-flow-chips em {
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--rt-color, #455e76);
  background: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(160, 180, 195, 0.22);
}

@media (max-width: 1180px) {
  .realtime-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .realtime-page-actions {
    width: 100%;
  }

  .realtime-date-label {
    margin-left: auto;
  }

  .realtime-summary-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .realtime-daily-report {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .realtime-report-card:nth-child(2) {
    border-right: 0;
  }

  .realtime-report-card:nth-child(-n + 2) {
    border-bottom: 1px solid #e8edf3;
  }
}

@media (max-width: 760px) {
  .topbar {
    padding-inline: 14px;
  }

  .menu-button-text {
    display: none;
  }

  .time-management-topbar-back {
    padding-inline: 10px;
  }

  .time-management-home {
    width: min(100% - 28px, 560px);
    padding-block: 30px 44px;
  }

  .time-management-choice-grid {
    grid-template-columns: 1fr;
  }

  .time-management-big-button {
    min-height: 176px;
  }

  .realtime-page-head,
  .realtime-shell {
    width: calc(100% - 28px);
  }

  .realtime-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .realtime-page-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .realtime-view-switch {
    width: 100%;
  }

  .realtime-view-switch button {
    flex: 1 1 50%;
  }

  .realtime-date-label {
    margin-left: 0;
  }

  .realtime-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .realtime-summary-item:last-child {
    grid-column: 1 / -1;
  }

  .realtime-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .realtime-legend {
    justify-content: flex-start;
  }

  .realtime-panel-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .realtime-daily-report,
  .realtime-detail-layout {
    grid-template-columns: 1fr;
  }

  .realtime-flow-summary {
    grid-template-columns: 1fr;
  }

  .realtime-flow-chunks > header,
  .realtime-flow-chunk-content {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .realtime-flow-chunk-side {
    justify-items: start;
  }

  .realtime-flow-chunk-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .realtime-flow-row {
    grid-template-columns: 92px minmax(360px, 1fr);
  }

  .realtime-report-card,
  .realtime-report-card:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid #e8edf3;
  }

  .realtime-detail-evidence {
    border-top: 1px solid #e4eaf1;
    border-left: 0;
  }

  .realtime-full-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .realtime-full-day-summary {
    grid-template-columns: 1fr;
  }

  .realtime-vertical-timeline {
    padding-inline: 14px;
  }

  .realtime-vertical-timeline::before {
    left: 102px;
  }

  .realtime-vertical-marker,
  .realtime-vertical-item {
    grid-template-columns: 67px 20px minmax(0, 1fr);
    gap: 8px;
  }

  .realtime-vertical-marker::before {
    left: 80px;
  }
}

@media (max-width: 520px) {
  .time-management-big-button {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 15px;
    padding: 25px 20px;
  }

  .time-management-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }

  .time-management-card-arrow {
    display: none !important;
  }

  .realtime-summary-bar {
    grid-template-columns: 1fr;
  }

  .realtime-flow-table {
    padding-inline: 14px;
  }

  .realtime-flow-grid {
    overflow-x: auto;
  }

  .realtime-flow-row {
    min-width: 520px;
  }

  .realtime-summary-item:last-child {
    grid-column: auto;
  }
}

.calendar-shell {
  display: block;
  margin: 0 0 24px;
}

.calendar-main,
.calendar-side {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.calendar-head h2,
.calendar-side h2 {
  margin: 0;
  color: #17213a;
  font-size: 26px;
  line-height: 1.15;
}

.calendar-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.calendar-head .calendar-sync-status {
  color: #0795a7;
  font-weight: 800;
}

.calendar-source-legend {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.calendar-source-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.calendar-source-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.source-sheet,
.calendar-event.sheet,
.calendar-month-event.sheet,
.agenda-item.sheet,
.calendar-week-item.sheet {
  --calendar-source: #0795a7;
}

.source-google,
.calendar-event.google,
.calendar-month-event.google,
.agenda-item.google,
.calendar-week-item.google {
  --calendar-source: #2679ee;
}

.source-manual,
.calendar-event.manual,
.calendar-month-event.manual,
.agenda-item.manual,
.calendar-week-item.manual {
  --calendar-source: #f28b20;
}

.source-personal,
.calendar-event.personal,
.calendar-month-event.personal,
.agenda-item.personal,
.calendar-week-item.personal {
  --calendar-source: #db2777;
}

.calendar-source-legend .source-sheet,
.calendar-source-legend .source-google,
.calendar-source-legend .source-manual,
.calendar-source-legend .source-personal {
  background: var(--calendar-source);
}

.calendar-view-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.calendar-view-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  padding: 0 15px;
  background: transparent;
  color: #50607a;
  font-size: 13px;
  font-weight: 900;
}

.calendar-view-tabs button.active {
  background: #0795a7;
  color: #fff;
}

#schedulePage .section-head {
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

#schedulePage .section-head h1 {
  font-size: 22px;
  line-height: 1;
}

#schedulePage .board-tools {
  justify-content: flex-end;
  gap: 6px;
}

#schedulePage .board-tools button {
  height: 32px;
  min-height: 32px;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12px;
}

#schedulePage .calendar-view-tabs {
  gap: 2px;
  padding: 2px;
  border-radius: 7px;
}

#schedulePage .calendar-view-tabs button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

#schedulePage .calendar-shell {
  margin-top: 0;
}

#schedulePage .calendar-head {
  align-items: center;
  padding: 12px 18px 10px;
}

#schedulePage .calendar-head h2 {
  font-size: 34px;
  font-weight: 950;
  letter-spacing: 0;
}

#schedulePage .calendar-head p,
#schedulePage .calendar-sync-status {
  display: none;
}

#schedulePage .calendar-source-legend {
  gap: 8px;
  font-size: 11px;
}

#schedulePage .calendar-filter-root {
  padding: 8px 18px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(var(--calendar-visible-days, 5), minmax(0, 1fr));
  background: var(--line);
  gap: 1px;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  align-items: start;
}

.calendar-month-week {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--calendar-visible-days, 5), minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: 1px;
  height: 220px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}

.calendar-month-week .calendar-day {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.calendar-month-week.scrollable {
  overflow-y: auto;
  scrollbar-width: thin;
}

.calendar-month-week.scrollable::-webkit-scrollbar {
  width: 7px;
}

.calendar-month-week.scrollable::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c9d7e5;
}

.calendar-week-range {
  height: 650px;
}

.calendar-week-range.scrollable {
  overflow-y: auto;
  scrollbar-width: thin;
}

.calendar-week-range.scrollable::-webkit-scrollbar {
  width: 7px;
}

.calendar-week-range.scrollable::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c9d7e5;
}

.calendar-week-range-empty {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  margin: 42px 12px 0;
}

.calendar-grid-week .calendar-day {
  min-height: 650px;
}

.calendar-grid-week-studio {
  display: block;
  max-height: calc(100vh - 230px);
  overflow: auto;
  background: #fff;
}

.calendar-week-time {
  min-width: 1180px;
  background: #fff;
}

.calendar-week-time-head,
.calendar-week-all-day,
.calendar-week-time-body {
  display: grid;
  grid-template-columns: 82px repeat(var(--calendar-visible-days, 5), minmax(190px, 1fr));
}

.calendar-week-time-head {
  position: sticky;
  top: 0;
  z-index: 8;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.calendar-week-zone {
  display: flex;
  align-items: end;
  justify-content: center;
  min-height: 78px;
  padding: 0 8px 10px;
  color: #50607a;
  font-size: 12px;
  font-weight: 900;
}

.calendar-week-day-head {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 78px;
  border: 0;
  border-left: 1px solid var(--line);
  background: #fff;
  color: #17213a;
  cursor: pointer;
}

.calendar-week-day-head span {
  color: #50607a;
  font-size: 13px;
  font-weight: 900;
}

.calendar-week-day-head strong {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
}

.calendar-week-day-head.today strong {
  background: #2679ee;
  color: #fff;
}

.calendar-week-day-head.selected {
  box-shadow: inset 0 -3px 0 #2679ee;
}

.calendar-week-all-day {
  position: sticky;
  top: 79px;
  z-index: 7;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}

.calendar-week-time-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  color: #50607a;
  font-size: 11px;
  font-weight: 900;
}

.calendar-week-all-day-cell {
  min-height: 54px;
  border-left: 1px solid var(--line);
  padding: 7px;
  overflow: hidden;
}

.week-all-day-event {
  min-height: 32px;
  margin-bottom: 4px;
}

.calendar-week-time-body {
  position: relative;
}

.calendar-week-time-axis {
  background: #fff;
}

.calendar-week-hour-label {
  height: var(--week-hour-height);
  border-bottom: 1px solid var(--line);
  padding: 10px 8px 0 0;
  color: #50607a;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.calendar-week-time-column {
  position: relative;
  min-height: calc(var(--week-hours) * var(--week-hour-height));
  border-left: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}

.calendar-week-time-column.today {
  background: #f7fbff;
}

.calendar-week-time-column.selected {
  box-shadow: inset 0 0 0 2px #2679ee;
}

.calendar-week-hour-line {
  height: var(--week-hour-height);
  border-bottom: 1px solid var(--line);
}

.calendar-week-time-event {
  position: absolute;
  top: var(--week-event-top);
  left: calc(var(--week-event-left) + 4px);
  width: calc(var(--week-event-width) - 8px);
  height: max(64px, var(--week-event-height));
  min-height: max(64px, var(--week-event-height));
  z-index: var(--week-event-z, 3);
  display: grid;
  align-content: start;
  gap: 3px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--calendar-source, #2679ee) 32%, #ffffff);
  border-left: 4px solid var(--calendar-source, #2679ee);
  border-radius: 8px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--calendar-source, #2679ee) 24%, #ffffff);
  color: #10213f;
  box-shadow: 0 6px 14px rgba(15, 35, 65, 0.13);
  text-align: left;
  cursor: pointer;
}

.calendar-week-time-event:hover {
  filter: brightness(0.96);
  z-index: 20;
  overflow: visible;
}

.calendar-week-time-event strong,
.calendar-week-time-event span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-week-time-event strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.calendar-week-time-event span {
  display: block;
  color: #24304a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.calendar-grid:not(.calendar-grid-week) .calendar-day {
  height: 220px;
  min-height: 220px;
}

.calendar-day-shell {
  display: block;
  background: #fff;
}

.calendar-day-view {
  min-height: 680px;
  padding: 24px;
  background: #fff;
  border: 2px solid transparent;
}

.calendar-day-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  color: #17213a;
}

.calendar-day-view-head strong {
  font-size: 24px;
}

.calendar-day-view-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.calendar-day-view-list {
  display: grid;
  gap: 8px;
}

.calendar-event.day-event {
  min-height: 54px;
  font-size: 15px;
}

.calendar-weekday {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 14px 10px;
  background: #f8fbff;
  box-shadow: none;
  color: #50607a;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.calendar-filter-root {
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
  background: #fbfdff;
}

.calendar-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.calendar-filter-spacer {
  flex: 1 1 220px;
  min-width: 120px;
}

.calendar-personal-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-filter-label {
  color: #34445f;
  font-size: 12px;
  font-weight: 900;
}

.calendar-personal-switch {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.calendar-personal-switch button {
  min-width: 78px;
  height: 32px;
  border: 1px solid var(--personal-color, #64748b);
  border-radius: 8px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--personal-color, #64748b) 10%, #ffffff);
  color: var(--personal-color, #64748b);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.calendar-personal-switch button.active {
  background: var(--personal-color, #64748b);
  color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--personal-color, #64748b) 24%, transparent);
}

.calendar-personal-switch button:hover {
  background: color-mix(in srgb, var(--personal-color, #64748b) 16%, #ffffff);
}

.calendar-personal-switch button.active:hover {
  background: var(--personal-color, #64748b);
}

.calendar-personal-switch .studio-calendar-select-button {
  position: relative;
  margin-left: 12px;
  border-style: dashed;
}

.calendar-personal-switch .studio-equipment-sheet-button {
  border-style: dashed;
}

.calendar-personal-switch .studio-calendar-select-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 12px;
  height: 2px;
  background: #0f9f6e;
  transform: translateY(-50%);
}

.calendar-personal-switch .studio-calendar-select-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -17px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2679ee;
  transform: translateY(-50%);
}

.calendar-filter-bar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #34445f;
  font-size: 12px;
  font-weight: 900;
}

.calendar-filter-bar select {
  min-width: 140px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 32px 0 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.calendar-filter-bar button {
  height: 34px;
}

.calendar-filter-bar .calendar-saturday-filter-toggle {
  min-width: 92px;
  border: 1px solid #0f9f6e;
  border-radius: 999px;
  padding: 0 12px;
  background: #e9fbf4;
  color: #047857;
  box-shadow: 0 5px 12px rgba(15, 159, 110, 0.16);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.calendar-filter-bar .calendar-saturday-filter-toggle:hover {
  background: #d8f7eb;
  border-color: #059669;
}

.calendar-filter-bar .calendar-saturday-filter-toggle.active {
  border-color: #0795a7;
  background: #0795a7;
  color: #fff;
  box-shadow: 0 6px 14px rgba(7, 149, 167, 0.24);
}

.calendar-filter-bar .calendar-personal-switch button {
  height: 32px;
}

.calendar-filter-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.studio-calendar-select-modal {
  width: min(520px, calc(100vw - 32px));
}

.studio-calendar-select-modal .modal-head {
  align-items: flex-start;
}

.studio-calendar-select-modal .modal-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.studio-calendar-choice-list {
  display: grid;
  gap: 8px;
  max-height: min(540px, calc(100vh - 240px));
  overflow: auto;
  padding: 16px;
}

.studio-calendar-choice {
  display: grid;
  grid-template-columns: 20px 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  cursor: pointer;
}

.studio-calendar-choice:hover {
  border-color: #b8c7da;
  background: #f8fbff;
}

.studio-calendar-choice input {
  width: 16px;
  height: 16px;
  accent-color: #2679ee;
}

.studio-calendar-choice-color {
  width: 14px;
  height: 14px;
  border: 2px solid var(--studio-calendar-color, #2679ee);
  border-radius: 4px;
  background: color-mix(in srgb, var(--studio-calendar-color, #2679ee) 18%, #ffffff);
}

.studio-calendar-choice-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.studio-calendar-choice-text strong {
  overflow: hidden;
  color: #17213a;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-calendar-choice-text em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.calendar-day {
  min-height: 220px;
  padding: 13px;
  border: 1px solid transparent;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.calendar-day.muted {
  background: #f8fafc;
  color: #a5b1c2;
}

.calendar-day.today {
  background: #f7fcfd;
}

.calendar-day.selected,
.calendar-day-view.selected {
  border-color: #2679ee;
  box-shadow: inset 0 0 0 2px #2679ee, 0 0 0 2px rgba(38, 121, 238, 0.12);
}

.calendar-day.this-week {
  background: #f8fffc;
}

.calendar-day-num {
  color: #17213a;
  font-size: 17px;
  font-weight: 900;
}

.calendar-day-events {
  display: grid;
  gap: 7px;
  min-height: 0;
  overflow: hidden;
}

.calendar-month-week.has-range-bars .calendar-day-events {
  margin-top: calc(var(--calendar-range-rows, 0) * 40px);
}

.handoff-schedule-board .calendar-month-week.has-range-bars .calendar-day-events {
  margin-top: calc(var(--calendar-range-rows, 0) * 33px);
}

.calendar-day-events.scrollable {
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.calendar-grid:not(.calendar-grid-week) .calendar-day-events.scrollable {
  max-height: 158px;
}

.calendar-grid-week .calendar-day-events.scrollable {
  max-height: 580px;
}

.calendar-day-events.scrollable::-webkit-scrollbar {
  width: 7px;
}

.calendar-day-events.scrollable::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c9d7e5;
}

.calendar-event {
  min-width: 0;
  min-height: 36px;
  border: 0;
  border-left: 4px solid var(--calendar-source, #64748b);
  border-radius: 7px;
  padding: 8px 9px;
  background: color-mix(in srgb, var(--calendar-source, #64748b) 9%, #ffffff);
  color: #24304a;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.calendar-event.personal,
.calendar-month-event.personal,
.calendar-week-item.personal,
.agenda-item.personal {
  border-color: var(--calendar-source, #db2777);
  border-left-color: var(--calendar-source, #db2777);
  background: var(--calendar-source, #db2777);
  color: var(--calendar-ink, #ffffff);
}

.calendar-event.personal b,
.calendar-event.personal span,
.calendar-month-event.personal b,
.calendar-month-event.personal span,
.calendar-week-item.personal span,
.calendar-week-item.personal strong,
.calendar-week-item.personal em,
.agenda-item.personal span,
.agenda-item.personal strong {
  color: var(--calendar-ink, #ffffff);
}

.calendar-month-event {
  grid-row: 1;
  z-index: 3;
  align-self: start;
  min-width: 0;
  min-height: 36px;
  margin: calc(44px + (var(--calendar-row) * 40px)) 12px 0;
  border: 0;
  border-left: 4px solid var(--calendar-source, #64748b);
  border-radius: 7px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--calendar-source, #64748b) 10%, #ffffff);
  color: #24304a;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(24, 58, 92, 0.06);
}

.calendar-month-event.continues-before {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.calendar-month-event.continues-after {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.calendar-month-event span {
  display: block;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-month-event b {
  margin-right: 5px;
  color: var(--calendar-time-color, #0f172a);
  font-size: 12px;
  font-weight: 950;
}

.calendar-month-event:hover {
  box-shadow: inset 0 0 0 1px var(--calendar-source, #64748b), 0 2px 8px rgba(24, 58, 92, 0.08);
}

.calendar-event span {
  display: block;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.calendar-event b {
  margin-right: 5px;
  color: var(--calendar-time-color, #0f172a);
  font-size: 12px;
  font-weight: 950;
}

.calendar-event:hover,
.calendar-week-item:hover,
.agenda-item:hover {
  box-shadow: inset 0 0 0 1px var(--calendar-source, #64748b);
}

.calendar-event.selected,
.calendar-month-event.selected,
.calendar-week-item.selected,
.agenda-item.selected,
.calendar-week-time-event.selected {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 0 0 3px rgba(15, 23, 42, 0.12);
}

.google-calendar-detail-modal {
  width: min(640px, calc(100vw - 32px));
}

.google-calendar-detail-modal .modal-head {
  align-items: flex-start;
}

.google-calendar-detail-modal .modal-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.google-calendar-detail {
  display: grid;
  gap: 14px;
}

.google-calendar-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}

.google-calendar-detail-title > span {
  width: 14px;
  height: 36px;
  border-radius: 999px;
  background: var(--calendar-source, #2679ee);
}

.google-calendar-detail-title div {
  display: grid;
  gap: 2px;
}

.google-calendar-detail-title strong {
  color: #17213a;
  font-size: 15px;
  font-weight: 900;
}

.google-calendar-detail-title em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.google-calendar-detail dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.google-calendar-detail dl > div {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.google-calendar-detail dl > div.full {
  grid-column: 1 / -1;
}

.google-calendar-detail dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.google-calendar-detail dd {
  margin: 0;
  color: #17213a;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.google-calendar-detail dd span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.google-calendar-description {
  white-space: pre-wrap;
}

.google-calendar-attendees {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.google-calendar-attendees span {
  border-radius: 999px;
  padding: 4px 8px;
  background: #f1f5f9;
}

.calendar-week-popup {
  display: grid;
  grid-template-columns: repeat(var(--calendar-visible-days, 5), minmax(170px, 1fr));
  gap: 12px;
  padding: 22px;
  overflow: hidden;
  overflow-x: auto;
}

.week-popup-day {
  min-width: 170px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.week-popup-day h3 {
  margin: 0;
  padding: 13px;
  border-bottom: 1px solid var(--line);
  color: #17213a;
  font-size: 16px;
}

.week-popup-day > div {
  display: grid;
  gap: 9px;
  padding: 11px;
}

.week-popup-day p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calendar-week-item,
.agenda-item {
  width: 100%;
  border: 1px solid var(--line);
  border-left: 4px solid var(--calendar-source, #64748b);
  border-radius: 8px;
  padding: 11px;
  background: color-mix(in srgb, var(--calendar-source, #64748b) 7%, #ffffff);
  color: #24304a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar-week-item span,
.agenda-item span {
  display: block;
  color: var(--calendar-source, #64748b);
  font-size: 12px;
  font-weight: 900;
}

.calendar-week-item strong,
.agenda-item strong {
  display: block;
  margin-top: 4px;
  line-height: 1.35;
  font-size: 14px;
}

.calendar-week-item em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.calendar-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--muted);
  font-size: 12px;
}

.calendar-detail-meta span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--calendar-source, #64748b);
}

.calendar-detail-meta strong {
  color: #17213a;
}

.calendar-detail-meta em {
  margin-left: auto;
  font-style: normal;
}

.calendar-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 38px;
  align-items: center;
}

.calendar-color-preset {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  cursor: pointer;
}

.calendar-color-preset input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.calendar-color-preset span {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 6px;
  background: var(--preset-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.calendar-color-preset input:checked + span {
  border-color: #17213a;
  box-shadow: 0 0 0 3px rgba(38, 121, 238, 0.22);
}

.calendar-custom-color {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.tiny-button {
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
  color: #50607a;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.tiny-button:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.calendar-custom-color input[type="color"] {
  width: 30px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
  background: #fff;
}

.calendar-color-modal {
  max-width: 920px;
}

.calendar-color-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.calendar-color-settings section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  overflow: hidden;
}

.calendar-color-settings h3 {
  margin: 0;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  color: #17213a;
  font-size: 14px;
}

.calendar-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.calendar-color-row:last-child {
  border-bottom: 0;
}

.calendar-color-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #24304a;
  font-size: 13px;
  font-weight: 900;
}

.calendar-color-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.calendar-color-row input {
  width: 34px;
  height: 30px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.calendar-more {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.calendar-side {
  padding: 18px;
}

.calendar-agenda {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.agenda-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--calendar-source, #64748b);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}

.agenda-date {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.agenda-item h3 {
  margin: 5px 0 4px;
  color: #17213a;
  font-size: 14px;
}

.agenda-item p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.agenda-item span {
  display: inline-flex;
  margin-top: 8px;
  color: var(--calendar-source, #64748b);
  font-size: 11px;
  font-weight: 900;
}

.summary-grid {
  display: grid;
  gap: 16px;
  margin: 0 8px 28px;
}

.dashboard-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.board-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.completed-list {
  display: grid;
  gap: 12px;
  margin: 0 8px 18px;
}

.filter-row .completed-top-button {
  border-color: #bfe8d0;
  color: #047857;
  background: #f0fdf4;
  font-weight: 950;
}

.filter-row .completed-top-button:hover {
  border-color: #86d39f;
  background: #dcfce7;
}

.completed-modal {
  width: min(860px, calc(100vw - 36px));
}

.completed-modal .completed-list {
  margin: 0;
  max-height: min(72vh, 760px);
  overflow: auto;
}

.completed-modal-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.completed-title-stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
}

.completed-title-stack h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #17213a;
  font-size: 20px;
  line-height: 1.2;
}

.completed-month-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.completed-month-filter > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.completed-month-filter button {
  border: 1px solid #d9e5ef;
  border-radius: 999px;
  min-height: 24px;
  padding: 3px 9px;
  background: #fbfdff;
  color: #40516b;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.completed-month-filter button.active {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.modal-count {
  margin-left: 0;
  min-height: 24px;
  border: 1px solid #d9e5ef;
  border-radius: 999px;
  padding: 3px 8px;
  background: #fbfdff;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.completed-modal .modal-head {
  padding: 12px 14px;
}

.completed-modal .modal-body {
  padding: 10px 14px 14px;
}

.completed-group-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.completed-group-control select {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 30px 0 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.completed-section {
  display: grid;
  gap: 10px;
}

.completed-section-flat {
  gap: 10px;
}

.completed-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 2px;
}

.completed-section-title h2,
.completed-section h2 {
  margin: 0;
  color: #24304a;
  font-size: 17px;
}

.completed-section-title span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.completed-card {
  --completed-accent: #0795a7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 164px;
  grid-template-areas:
    "main video"
    "main action";
  align-items: start;
  gap: 8px 10px;
  border: 1px solid #d9e5ef;
  border-left: 5px solid var(--completed-accent);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(15, 35, 60, 0.06);
}

.completed-card:nth-of-type(4n + 1) { --completed-accent: #0795a7; }
.completed-card:nth-of-type(4n + 2) { --completed-accent: #7c3aed; }
.completed-card:nth-of-type(4n + 3) { --completed-accent: #f28b20; }
.completed-card:nth-of-type(4n) { --completed-accent: #16a34a; }

.completed-card.deleted {
  grid-template-columns: minmax(0, 1fr) 180px auto;
  grid-template-areas: "deleted-main meta action";
  background: #fbfdff;
  opacity: 0.88;
}

.completed-card.deleted > div:first-child {
  grid-area: deleted-main;
}

.completed-card.deleted .completed-meta {
  grid-area: meta;
  display: grid;
  gap: 3px;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 9px;
  background: #fbfdff;
  color: #31415f;
  font-size: 12px;
}

.completed-card.deleted .completed-meta span {
  margin: 0;
  color: var(--muted);
}

.completed-card h3 {
  min-width: 0;
  margin: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.completed-title-line .row-tags {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.completed-title-line .tag {
  white-space: nowrap;
}

.completed-card [data-completed-edit] {
  border-radius: 6px;
  outline: 0;
  cursor: pointer;
}

.completed-card [data-completed-edit]:hover {
  background: #f4f8fb;
}

.completed-card [data-completed-edit].editing {
  padding: 3px 5px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--teal);
}

.completed-inline-control {
  width: 100%;
  min-width: 112px;
  height: 30px;
  border: 1px solid var(--teal);
  border-radius: 7px;
  padding: 0 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.completed-card-main {
  grid-area: main;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.completed-card p {
  margin: 0;
  color: var(--muted);
}

.completed-card-actions {
  grid-area: action;
  display: grid;
  gap: 7px;
  align-self: start;
}

.completed-card-actions .secondary-button {
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  font-size: 12px;
}

.completed-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.completed-summary-grid div {
  display: grid;
  gap: 3px;
  min-width: 108px;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 6px 8px;
  background: #fbfdff;
}

.completed-summary-grid div:first-child {
  min-width: 132px;
}

.completed-summary-grid div:nth-child(2) {
  min-width: 104px;
}

.completed-summary-grid div:nth-child(3) {
  min-width: 84px;
}

.completed-summary-grid dt {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
}

.completed-summary-grid dd {
  margin: 0;
  color: #17213a;
  font-size: 12px;
  font-weight: 850;
  word-break: break-word;
}

.completed-history {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #dbe5ee;
}

.completed-history h4 {
  margin: 0;
  color: #17213a;
  font-size: 13px;
}

.completed-history-list {
  display: grid;
  gap: 6px;
  height: 108px;
  max-height: 108px;
  overflow-y: auto;
  padding-right: 4px;
}

.completed-history-list > div {
  display: grid;
  grid-template-columns: 104px minmax(104px, 0.65fr) minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  border-top: 1px solid #edf2f7;
  padding-top: 6px;
  color: #40516b;
  font-size: 12px;
}

.completed-history time {
  color: #64748b;
  font-weight: 850;
}

.completed-history strong {
  color: #17213a;
  font-weight: 900;
}

.completed-history span,
.completed-history p {
  margin: 0;
  color: #64748b;
}

.completed-final-video-wrap {
  grid-area: video;
  display: grid;
  gap: 7px;
  align-content: start;
  margin-top: 36px;
}

.completed-final-video-wrap .secondary-button {
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

.completed-final-video {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 7px;
  background: #fbfdff;
  color: #17213a;
  text-decoration: none;
}

.completed-final-video img,
.completed-final-video .youtube-result-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  background: #e2e8f0;
}

.completed-final-video strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.completed-final-video strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13px;
  font-weight: 950;
}

.completed-final-video.empty {
  min-height: 94px;
  place-items: center;
  color: #64748b;
  font-weight: 900;
}

.completed-final-checklist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  border: 1px solid #dbe7ef;
  border-radius: 8px;
  padding: 6px 8px;
  background: #fbfdff;
}

.completed-final-checklist strong {
  color: #17213a;
  font-size: 11px;
  font-weight: 950;
}

.completed-final-check-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1 1 auto;
}

.completed-final-check-tag {
  position: relative;
  display: inline-flex;
}

.completed-final-check-tag > button:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.completed-final-check-tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.completed-final-check-tag.done > button:first-child {
  background: #ecfdf5;
  color: #047857;
}

.completed-final-check-tag.missing > button:first-child {
  background: #fef2f2;
  color: #dc2626;
}

.completed-check-alert {
  width: 22px;
  height: 22px;
  border: 1px solid #fecaca;
  border-radius: 50%;
  background: #fff5f5;
  color: #dc2626;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.completed-check-remove {
  position: absolute;
  top: -8px;
  right: -7px;
  display: none;
  width: 16px;
  height: 16px;
  border: 1px solid #fecaca;
  border-radius: 50%;
  background: #fff;
  color: #dc2626;
  font-size: 10px;
  font-weight: 950;
  line-height: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.completed-final-checklist.remove-mode .completed-check-remove {
  display: flex;
}

.completed-foldering-popover {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 8px;
  width: 220px;
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(15, 35, 60, 0.18);
}

.completed-foldering-popover strong {
  color: #17213a;
  font-size: 13px;
  font-weight: 950;
}

.completed-foldering-popover span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.completed-foldering-popover div {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 6px;
}

.completed-foldering-popover a,
.completed-foldering-popover button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid #d9e5ef;
  border-radius: 7px;
  background: #fbfdff;
  color: #17213a;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.completed-foldering-popover button {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.completed-check-modal .modal-body {
  display: grid;
  gap: 12px;
}

.completed-check-modal p {
  margin: 0;
}

.completed-check-modal .done {
  color: #047857;
  font-weight: 900;
}

.completed-check-modal .missing {
  color: #dc2626;
  font-weight: 900;
}

.completed-flow-check {
  display: grid;
  gap: 6px;
  border: 1px solid #dbe7ef;
  border-radius: 8px;
  padding: 5px 7px 6px;
  background: #fbfdff;
}

.completed-flow-check.ok {
  border-color: #bfe8d0;
  background: #f6fef9;
}

.completed-flow-check.needs-check {
  border-color: #fed7aa;
  background: #fffaf2;
}

.completed-flow-check-head {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.completed-flow-check-head strong {
  color: #17213a;
  font-size: 10px;
  font-weight: 950;
}

.completed-flow-check-head span {
  color: #047857;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
  min-width: 0;
}

.completed-flow-check.needs-check .completed-flow-check-head span {
  color: #b45309;
}

.completed-compact-timeline {
  display: grid;
  grid-template-columns: repeat(var(--stage-count, 8), minmax(22px, 1fr));
  align-items: start;
  width: min(100%, 500px);
  min-width: 0;
}

.completed-compact-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  font-size: 8px;
  font-weight: 950;
  color: #64748b;
}

.completed-compact-step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(-50% + 7px);
  width: calc(100% - 14px);
  height: 2px;
  background: #cfd9e5;
}

.completed-compact-step:first-child::before {
  display: none;
}

.completed-compact-step.done::before,
.completed-compact-step.current::before {
  background: var(--teal);
}

.completed-compact-step i {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid #cfd9e5;
  border-radius: 50%;
  background: #fff;
}

.completed-compact-step.done i,
.completed-compact-step.current i {
  border-color: var(--teal);
  background: var(--teal);
}

.completed-compact-step.current i {
  box-shadow: 0 0 0 3px rgba(7, 149, 167, 0.14);
}

.completed-compact-step b {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-flow-check.needs-check .completed-compact-step.current i {
  border-color: #f59e0b;
  background: #f59e0b;
}

@media (max-width: 1100px) {
  .completed-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "video"
      "main"
      "action";
  }

  .completed-final-video-wrap {
    max-width: 360px;
    margin-top: 0;
  }

  .completed-history-list > div,
  .completed-summary-grid {
    grid-template-columns: 1fr;
  }

  .completed-flow-check {
    display: grid;
  }
}

.summary-card {
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
}

#dashboardPage .summary-grid {
  gap: 12px;
  margin-bottom: 18px;
}

#dashboardPage .summary-card {
  min-height: 96px;
  padding: 16px 20px;
}

#dashboardPage .summary-icon {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  font-size: 22px;
}

#dashboardPage .summary-card strong {
  margin: 2px 0 5px;
  font-size: 25px;
}

#dashboardPage .section-head {
  margin-bottom: 12px;
}

.summary-card p,
.summary-card small {
  margin: 0;
}

.summary-card p {
  font-weight: 800;
  color: #22304c;
}

.summary-card strong {
  display: block;
  margin: 4px 0 8px;
  font-size: 31px;
  line-height: 1;
}

.summary-card small {
  color: var(--muted);
}

.summary-icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 27px;
  font-weight: 800;
}

.teal { color: var(--teal); background: var(--teal-soft); }
.blue { color: var(--blue); background: var(--blue-soft); }
.violet { color: var(--violet); background: var(--violet-soft); }
.orange { color: var(--orange); background: var(--orange-soft); }
.red { color: var(--red); background: var(--red-soft); }
.green { color: var(--green); background: var(--green-soft); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 8px 16px;
  gap: 16px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
}

h1 {
  font-size: 26px;
  line-height: 1.2;
}

.info-dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #8fa0b8;
  border-radius: 50%;
  color: #6d7d94;
  font-size: 12px;
}

.board-tools,
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.board-tools button,
.board-tools select,
.inline-select {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 14px;
  background: var(--surface);
  color: #31415f;
  font-weight: 700;
}

.filter-row button,
.filter-row select {
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 7px;
  background: var(--surface);
  color: #31415f;
  font-size: 11px;
  font-weight: 700;
}

.filter-row .board-add-button {
  height: 38px;
  min-width: 118px;
  border: 0;
  border-radius: 7px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(180deg, #0aa6b9, #037a8d);
  box-shadow: 0 8px 16px rgba(3, 122, 141, 0.22);
  font-size: 13px;
  font-weight: 900;
}

.filter-row .board-add-button span {
  margin-right: 3px;
  font-size: 15px;
  line-height: 1;
}

.filter-row {
  margin: 0 8px 8px;
  align-items: stretch;
  gap: 6px;
  font-size: 11px;
}

.filter-actions,
.filter-panel {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.filter-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfdff;
  padding: 4px 6px;
}

.filter-panel strong {
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 900;
}

.filter-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #34445f;
  font-weight: 800;
}

.filter-row label select {
  max-width: 96px;
}

.filter-row .active-filter {
  border-color: #bfe9ee;
  color: var(--teal-dark);
  background: #eefafd;
}

.danger-soft {
  color: var(--red) !important;
}

.divider {
  width: 1px;
  height: 42px;
  background: var(--line);
}

.dashboard-layout {
  display: block;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 14px;
  min-height: 620px;
}

.kanban-board.admin-dashboard {
  grid-template-columns: 1fr;
  align-items: stretch;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.admin-kanban-dashboard {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 12px;
  align-items: start;
  min-height: 0;
  overflow-x: auto;
  padding-bottom: 6px;
}

.dashboard-column-card {
  --column-color: var(--teal);
  min-width: 210px;
  min-height: calc(100vh - 286px);
  max-height: calc(100vh - 246px);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--column-color) 14%, #ffffff), #ffffff 230px);
}

.dashboard-column-card.mine-panel,
.dashboard-column-card.team-work-panel,
.dashboard-column-card.waiting-panel,
.dashboard-column-card.risk-panel,
.dashboard-column-card.link-panel {
  grid-column: auto;
}

.dashboard-column-card.mine-panel { --column-color: var(--teal); }
.dashboard-column-card.team-work-panel { --column-color: var(--blue); }
.dashboard-column-card.waiting-panel { --column-color: var(--violet); }
.dashboard-column-card.risk-panel { --column-color: var(--red); }
.dashboard-column-card.link-panel { --column-color: var(--green); }

.dashboard-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--column-color) 26%, #ffffff);
}

.dashboard-column-head strong {
  color: color-mix(in srgb, var(--column-color) 78%, #0c1830);
  font-size: 15px;
}

.dashboard-column-head span {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: color-mix(in srgb, var(--column-color) 75%, #0c1830);
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-column-list {
  display: grid;
  gap: 8px;
  align-content: start;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}

.dashboard-kanban-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 10px rgba(24, 58, 92, 0.04);
  cursor: pointer;
}

.dashboard-kanban-card:hover {
  border-color: var(--column-color);
}

.dashboard-kanban-card h3 {
  margin: 7px 0 7px;
  font-size: 14px;
  line-height: 1.35;
}

.dashboard-kanban-card dl {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 4px 7px;
  margin: 0 0 9px;
  color: #40516b;
  font-size: 11px;
}

.dashboard-kanban-card dt {
  color: var(--muted);
  font-weight: 800;
}

.dashboard-kanban-card dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--teal-dark);
  font-weight: 900;
}

.dashboard-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dashboard-card-bottom strong {
  border-radius: 6px;
  padding: 4px 7px;
  color: var(--red);
  background: var(--red-soft);
  font-size: 11px;
  white-space: nowrap;
}

.dashboard-column-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--column-color) 30%, #ffffff);
  border-radius: 8px;
  color: #66758d;
  background: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.admin-panel {
  grid-column: 1 / -1;
  min-height: 0;
  height: auto;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
  border-top: 4px solid var(--panel-color, var(--teal));
}

.admin-panel.wide {
  grid-column: 1 / -1;
}

.stage-flow-panel {
  grid-column: 1 / -1;
  --panel-color: var(--teal);
  background: linear-gradient(180deg, #f0fbfc, #ffffff 44%);
}

.team-panel {
  grid-column: 1 / -1;
  --panel-color: var(--blue);
  background: linear-gradient(180deg, #f3f7ff, #ffffff 44%);
}

.risk-panel {
  grid-column: 1 / -1;
  --panel-color: var(--red);
  background: linear-gradient(180deg, #fff5f5, #ffffff 42%);
}

.waiting-panel {
  grid-column: 1 / -1;
  --panel-color: var(--violet);
  background: linear-gradient(180deg, #f7f2ff, #ffffff 42%);
}

.mine-panel {
  grid-column: 1 / -1;
  --panel-color: var(--green);
  background: linear-gradient(180deg, #f0fbf5, #ffffff 42%);
}

.team-work-panel {
  grid-column: 1 / -1;
  --panel-color: var(--orange);
  background: linear-gradient(180deg, #fff8ef, #ffffff 42%);
}

.link-panel {
  grid-column: 1 / -1;
  --panel-color: #53647d;
  background: linear-gradient(180deg, #f4f7fa, #ffffff 42%);
}

.admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-panel-head h2 {
  color: #24304a;
  font-size: 17px;
}

.admin-panel-head span {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  color: var(--panel-color, var(--teal-dark));
  background: color-mix(in srgb, var(--panel-color, var(--teal)) 13%, #ffffff);
  font-size: 12px;
  font-weight: 900;
}

.stage-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
  min-height: 0;
  overflow: visible;
}

.stage-flow-item {
  position: relative;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cce9ed;
  border-radius: 8px;
  padding: 9px;
  background: #ffffff;
  color: #24304a;
  text-align: left;
}

.stage-flow-item strong,
.stage-flow-item span,
.stage-flow-item small {
  position: relative;
  z-index: 1;
}

.stage-flow-item span {
  color: var(--teal-dark);
  font-size: 18px;
  font-weight: 900;
}

.stage-flow-item small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.stage-flow-item i {
  position: absolute;
  inset: auto 0 0 0;
  width: var(--fill);
  height: 4px;
  background: var(--teal);
}

.admin-list {
  display: flex;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2px 2px 8px;
}

.dashboard-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  flex: 0 0 300px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
  cursor: pointer;
}

.compact-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  flex: 0 0 260px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  color: #24304a;
  background: rgba(255, 255, 255, 0.78);
  text-align: left;
}

.compact-task-row span,
.compact-task-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-task-row span {
  font-weight: 900;
}

.compact-task-row strong {
  color: var(--panel-color, var(--teal-dark));
  font-size: 12px;
}

.compact-task-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.dashboard-task.selected {
  border-color: var(--teal);
  background: #f0fbfc;
}

.dashboard-task h3 {
  margin: 6px 0 4px;
  font-size: 15px;
  line-height: 1.35;
}

.dashboard-task p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-items: start;
  color: #40516b;
  font-size: 12px;
  text-align: left;
}

.dashboard-task-meta strong {
  color: var(--red);
  font-size: 13px;
}

.dashboard-task-meta small {
  color: var(--muted);
  font-weight: 800;
}

.owner-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: visible;
}

.owner-stat-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 3px 9px;
  align-items: center;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #fbfdff;
  color: #24304a;
  text-align: left;
}

.owner-stat-card.mine {
  border-color: #bfe8ed;
  background: #f0fbfc;
}

.owner-stat-avatar {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #234567, #0e182a);
  font-weight: 900;
}

.owner-stat-card strong,
.owner-stat-card small,
.owner-stat-card em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-stat-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.owner-stat-card em {
  grid-column: 2;
  color: #526278;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.admin-empty {
  min-height: 64px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: #fbfdff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.kanban-column {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--column-bg, rgba(255, 255, 255, 0.98)), rgba(255, 255, 255, 0.98));
  overflow: hidden;
}

.column-head {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--column-color, var(--teal-dark));
  font-weight: 900;
  font-size: 13px;
}

.column-count {
  min-width: 24px;
  height: 24px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  color: #40516b;
  background: #f0f4f8;
  font-size: 12px;
}

.card-list {
  min-height: 560px;
  padding: 9px;
}

.video-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 4px 10px rgba(24, 58, 92, 0.05);
}

.video-card.selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(7, 149, 167, 0.14);
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 5px;
  padding: 3px 8px;
  color: var(--tag-color, var(--teal-dark));
  background: var(--tag-bg, #e9f8fb);
  font-size: 12px;
  font-weight: 900;
}

.video-card h2 {
  margin: 8px 0 4px;
  font-size: 14px;
  line-height: 1.35;
}

.presenter,
.row-presenter,
.muted {
  color: #56647a;
  font-size: 13px;
}

.presenter {
  margin: 0 0 10px;
}

.card-meta {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 4px 8px;
  font-size: 12px;
  color: #66758d;
}

.card-meta strong {
  color: var(--teal-dark);
}

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.owner {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #25344d;
  font-size: 13px;
  font-weight: 700;
}

.d-day {
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--red);
  background: var(--red-soft);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.d-day.ok {
  color: var(--green);
  background: var(--green-soft);
}

.add-card {
  width: 100%;
  height: 38px;
  border: 0;
  background: transparent;
  color: #6a7a91;
  font-weight: 700;
}

.coordination-panel,
.detail-panel {
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -10px 0 24px rgba(24, 58, 92, 0.05);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2 {
  font-size: 21px;
}

.panel-body {
  padding: 18px 22px 24px;
  max-height: calc(100vh - 136px);
  overflow: auto;
}

.thumb {
  width: 100%;
  height: 96px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1d4051, #e6f7f8);
  margin-bottom: 14px;
}

.panel-title {
  margin: 10px 0 4px;
  font-size: 18px;
  line-height: 1.35;
}

.panel-grid {
  display: grid;
  gap: 11px;
  margin: 18px 0;
}

.panel-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: start;
  color: #24304a;
  font-size: 14px;
}

.panel-row label,
.panel-row span:first-child {
  color: var(--muted);
}

.panel-row input,
.panel-row select,
.panel-row textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.settings-item input,
.settings-item select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--text);
  background: #fff;
}

.form-grid [data-next-action-direct] {
  margin-top: 8px;
}

.owner-select-shell {
  position: relative;
  display: grid;
  align-items: center;
}

.owner-select-avatar {
  position: absolute;
  left: 10px;
  z-index: 1;
  pointer-events: none;
}

.owner-select-shell select {
  padding-left: 40px;
}

textarea {
  resize: vertical;
}

.panel-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 20px;
}

.panel-action-grid button,
.link-grid button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: #22304c;
  font-weight: 800;
}

.panel-action-grid .primary {
  color: #fff;
  background: linear-gradient(180deg, #079eb2, #027b91);
  border-color: transparent;
}

.support-task-body {
  display: grid;
  gap: 14px;
}

.support-task-summary {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}

.support-task-summary strong {
  color: #24304a;
  font-size: 15px;
}

.support-task-summary span {
  justify-self: start;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 900;
}

.support-task-summary span.pending {
  color: #b45309;
  background: #fff7ed;
}

.support-task-summary span.done {
  color: #047857;
  background: #ecfdf5;
}

.support-task-summary p {
  margin: 0;
  color: #5b6a80;
  font-size: 13px;
}

.support-task-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.support-task-choice label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 11px;
  background: #fff;
  color: #34445f;
  font-weight: 800;
}

.support-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-link-row a {
  text-decoration: none;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.link-grid button {
  min-height: 50px;
  padding: 6px;
  font-size: 12px;
}

.simple-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
}

.simple-list li {
  padding: 9px;
  border-radius: 7px;
  background: #f6f9fc;
  color: #40516b;
  font-size: 12px;
}

.video-board-wrap {
  position: relative;
  margin: 0 8px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.board-scroll-top {
  height: 18px;
  margin: 0 8px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.board-scroll-top > div {
  height: 1px;
}

.board-scroll-top::-webkit-scrollbar,
.video-board-wrap::-webkit-scrollbar {
  height: 12px;
}

.board-scroll-top::-webkit-scrollbar-thumb,
.video-board-wrap::-webkit-scrollbar-thumb {
  border: 3px solid #f8fbfd;
  border-radius: 999px;
  background: #a7b8ca;
}

.video-table {
  min-width: min(1220px, 100%);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: var(--surface);
}

.table-header,
.video-row {
  display: grid;
  grid-template-columns: var(--board-columns, 68px minmax(250px, 1.12fr) minmax(280px, 1.34fr) minmax(200px, 0.96fr) minmax(150px, 0.72fr) minmax(150px, 0.78fr) minmax(112px, 0.48fr));
}

.table-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 46px;
  align-items: center;
  background: #f8fbfd;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line);
  color: #3e4e68;
  font-size: 13px;
  font-weight: 900;
}

.sortable-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.sortable-header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sortable-header button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: #5d6c82;
  font-weight: 900;
  cursor: pointer;
}

.sortable-header button.active {
  border-color: var(--teal);
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.board-column-resizer {
  position: absolute;
  top: 0;
  right: -14px;
  bottom: 0;
  width: 9px;
  cursor: col-resize;
  z-index: 3;
}

.board-column-resizer::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 4px;
  width: 2px;
  border-radius: 99px;
  background: transparent;
}

.board-column-resizer:hover::after,
body.is-resizing-board-column .board-column-resizer::after {
  background: #10a8b6;
}

body.is-resizing-board-column {
  cursor: col-resize;
  user-select: none;
}

.table-header > div,
.video-row > div {
  padding: 0 14px;
  border-right: 1px solid var(--line);
  background: inherit;
}

.table-header > div:last-child,
.video-row > div:last-child {
  border-right: 0;
}

.video-row {
  min-height: 92px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.video-row:last-child {
  border-bottom: 0;
}

.video-row.selected {
  background: #f2fcfd;
  box-shadow: inset 0 0 0 1px var(--teal);
}

.video-row.drag-over {
  box-shadow: inset 0 3px 0 var(--teal);
}

.video-row.group-main {
  background: var(--surface);
}

.series-child-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  color: var(--teal-dark);
  background: linear-gradient(90deg, #dff8f6, #eef8ff);
  font-size: 11px;
  font-weight: 900;
}

.series-chip {
  min-height: 24px;
  border: 1px solid #bfe8ed;
  border-radius: 999px;
  padding: 0 8px;
  color: #176a77;
  background: #ffffff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 5px 12px rgba(7, 149, 167, 0.12);
}

.series-chip.open {
  color: #ffffff;
  background: linear-gradient(180deg, #0795a7, #057d8c);
}

.video-row.group-child {
  background: linear-gradient(90deg, #f2fcfb 0%, #fbfeff 48%);
}

.video-row.group-child .row-title {
  color: #153f4a;
}

.video-row.group-child .row-title::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--teal);
  vertical-align: middle;
}

.video-row.group-child .info-cell {
  position: relative;
  box-shadow: inset 5px 0 0 var(--teal);
  padding-left: 18px;
}

.table-header > div:nth-child(1),
.video-row > div:nth-child(1) {
  position: static;
}

.table-header > div:nth-child(2),
.video-row > div:nth-child(2) {
  position: static;
}

.table-header > div:nth-child(1),
.video-row > div:nth-child(1) {
  box-shadow: none;
}

.table-header > div:nth-child(3),
.video-row > div:nth-child(3) {
  position: static;
  box-shadow: none;
}

.table-header > div:nth-child(1),
.table-header > div:nth-child(2),
.table-header > div:nth-child(3) {
  z-index: auto;
  background: #f8fbfd;
}

.order-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 800;
}

.row-select {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.drag-handle {
  width: 18px;
  border: 0;
  background: transparent;
  color: #53647d;
  font-size: 22px;
  line-height: 1;
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

.info-cell {
  display: grid;
  gap: 6px;
  align-items: center;
}

.row-title {
  font-weight: 900;
  line-height: 1.28;
}

.row-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.flow-cell {
  min-width: 0;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(var(--stage-count, 8), minmax(36px, 1fr));
  align-items: start;
  gap: 0;
}

.step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: #68778e;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.step::before {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(-50% + 12px);
  width: calc(100% - 24px);
  height: 2px;
  background: #cfd9e5;
}

.step:first-child::before {
  display: none;
}

.step.done::before {
  background: var(--teal);
}

.step.current::before {
  background: var(--red);
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cfd9e5;
  background: var(--surface);
  z-index: 1;
}

.step.done .dot {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.step.done .dot::after {
  content: "??;
  display: grid;
  place-items: center;
  height: 100%;
  color: #fff;
  font-size: 11px;
}

.step.current .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border-color: var(--red);
  background: var(--red);
  box-shadow: none;
}

.step:hover span:last-child {
  color: var(--teal-dark);
}

.step.current .dot::after {
  content: "";
  display: none;
}

.step.current span:last-child {
  color: var(--red);
}

.step.late .dot {
  border-color: var(--red);
  background: #fff6f6;
}

.step.current.late .dot {
  border-color: var(--red);
  background: var(--red);
}

.action-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.action-content {
  min-width: 0;
}

.action-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.action-text {
  color: var(--teal-dark);
  font-weight: 900;
  line-height: 1.35;
  min-width: 0;
}

.support-task-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.support-task-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0;
  background: #fff;
  cursor: pointer;
  appearance: none;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 3px 7px rgba(15, 42, 67, 0.05);
  overflow: hidden;
}

.support-task-button span {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  justify-content: center;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: inherit;
  line-height: 1;
  text-align: center;
}

.support-task-button.settlement {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.support-task-button.pending {
  border-color: #ffd2a8;
  background: #fff7ed;
}

.support-task-button.done {
  border-color: #b9e7cc;
  background: #ecfdf5;
  opacity: 0.45;
  box-shadow: none;
}

.support-task-button.done span {
  filter: grayscale(0.25);
}

.sub-pill,
.block-pill {
  display: inline-block;
  margin-top: 7px;
  border: 0;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
}

.sub-pill {
  color: #55657a;
  background: #eef4f8;
}

.due-pill {
  cursor: pointer;
}

.empty-pill {
  display: inline-block;
  margin-top: 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 8px;
  color: #7b8798;
  background: #fbfdff;
  font-size: 12px;
  font-weight: 800;
}

.block-pill {
  color: var(--violet);
  background: var(--violet-soft);
}

.empty-pill {
  color: #8794a8;
  background: #f7fafc;
}

.deadline-cell {
  display: grid;
  gap: 4px;
  color: #41526c;
  font-size: 13px;
}

.deadline-cell strong {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: #24304a;
}

.deadline-cell .danger {
  color: var(--red);
  font-weight: 900;
}

.done-label {
  color: var(--green);
  font-weight: 900;
}

.muted-inline {
  color: var(--muted);
}

.priority-cell,
.quick-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.priority-cell button,
.quick-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 9px;
  color: var(--teal-dark);
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
}

.priority-tag {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
}

.priority-tag.low,
.priority-choice.low span {
  color: #526278;
  background: #edf2f7;
}

.priority-tag.normal,
.priority-choice.normal span {
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.priority-tag.high,
.priority-choice.high span {
  color: #d56e0e;
  background: var(--orange-soft);
}

.priority-tag.urgent,
.priority-choice.urgent span {
  color: var(--red);
  background: var(--red-soft);
}

.choice-list,
.priority-choice-list {
  display: grid;
  gap: 10px;
}

.choice-item,
.priority-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-weight: 800;
}

.choice-item input[type="text"],
.direct-input input {
  flex: 1;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
}

.priority-choice span {
  border-radius: 999px;
  padding: 7px 12px;
}

.dashboard-action-body h3 {
  margin: 10px 0 18px;
  font-size: 24px;
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-flow-strip {
  display: grid;
  grid-template-columns: repeat(var(--stage-count, 8), minmax(54px, 1fr));
  gap: 0;
  margin: 16px 0;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.flow-strip-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #6b7890;
  font-size: 11px;
  font-weight: 900;
}

.flow-strip-step::before {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(-50% + 11px);
  width: calc(100% - 22px);
  height: 2px;
  background: #cfd9e5;
}

.flow-strip-step:first-child::before {
  display: none;
}

.flow-strip-step span {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border: 2px solid #cfd9e5;
  border-radius: 50%;
  background: #fff;
}

.flow-strip-step.done::before,
.flow-strip-step.done span {
  border-color: var(--teal);
  background: var(--teal);
}

.flow-strip-step.current span {
  border-color: var(--red);
  background: var(--red);
}

.flow-strip-step.current strong {
  color: var(--red);
}

.decision-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfdff;
}

.decision-grid span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.decision-grid strong {
  line-height: 1.45;
}

.editable.editing {
  outline: 2px solid rgba(7, 149, 167, 0.28);
  border-radius: 6px;
  padding: 4px;
  background: #fff;
}

.empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
  background: #fbfdff;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 8px;
}

.settings-tools {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 18px;
}

.settings-tools h2 {
  font-size: 18px;
  margin-bottom: 6px;
}

.settings-tools p {
  color: var(--muted);
  font-weight: 800;
}

.settings-tool-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.file-button {
  cursor: pointer;
}

.settings-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 18px;
}

.settings-card h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

.settings-list {
  display: grid;
  gap: 8px;
}

.settings-item {
  display: grid;
  grid-template-columns: 1fr 92px 38px 38px 38px;
  gap: 8px;
  align-items: center;
}

.settings-item.template {
  grid-template-columns: 1fr 130px 38px 38px 38px;
}

.settings-item.owner {
  grid-template-columns: 1fr 110px 92px 64px 38px 38px 38px;
}

.settings-item.action {
  grid-template-columns: 1fr 130px 38px 38px 38px;
}

.settings-item.task-type {
  grid-template-columns: 1fr 92px 120px 38px 38px 38px;
}

.settings-item button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  font-weight: 800;
}

.settings-item label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
}

.settings-item label input[type="checkbox"] {
  width: auto;
  min-height: auto;
}

.setting-add {
  display: grid;
  grid-template-columns: 1fr 92px 72px;
  gap: 8px;
  margin-top: 12px;
}

.setting-add input,
.setting-add select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #aab6c5;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: rgba(12, 23, 42, 0.38);
  padding: 28px;
}

.modal-backdrop:has(.handoff-schedule-picker-modal),
.modal-backdrop:has(.handoff-schedule-view-modal) {
  overflow: auto;
  padding: 8px;
  place-items: center;
}

.modal-backdrop:has(.realtime-session-review-modal) {
  overflow: auto;
  padding: 12px;
  place-items: center;
}

.modal-backdrop[hidden] {
  display: none !important;
}

.modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.modal-large {
  width: min(1180px, 100%);
}

.task-modal {
  width: min(760px, 100%);
}

.modal-head,
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.modal-foot {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
}

.task-detail-foot {
  flex-direction: column;
  align-items: stretch;
}

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

.modal-body {
  padding: 22px;
}

.recruiting-smart-select {
  --smart-accent: #0a91a3;
  --smart-soft: #eaf8fa;
  position: relative;
}

.recruiting-smart-select summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  border: 1px solid #d7e2ec;
  border-radius: 11px;
  padding: 8px 42px 8px 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  cursor: pointer;
  list-style: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.recruiting-smart-select summary:hover,
.recruiting-smart-select[open] summary {
  border-color: color-mix(in srgb, var(--smart-accent) 48%, #d7e2ec);
  background: #ffffff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--smart-accent) 11%, transparent);
}

.recruiting-smart-select summary::-webkit-details-marker {
  display: none;
}

.recruiting-smart-select summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #718096;
  border-bottom: 2px solid #718096;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.16s ease;
}

.recruiting-smart-select[open] summary::after {
  transform: translateY(-20%) rotate(225deg);
}

.recruiting-smart-select-selection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.recruiting-smart-select-marker {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  color: var(--smart-accent);
  background: var(--smart-soft);
  font-size: 11px;
  font-weight: 950;
}

.recruiting-smart-select-copy,
.recruiting-smart-select-copy small,
.recruiting-smart-select-copy strong {
  display: block;
  min-width: 0;
}

.recruiting-smart-select-copy small {
  color: #8290a4;
  font-size: 9px;
  font-weight: 750;
}

.recruiting-smart-select-copy strong {
  overflow: hidden;
  margin-top: 2px;
  color: #223047;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-smart-select-selection.is-waiting,
.recruiting-smart-select-option.is-waiting { --smart-accent: #64748b; --smart-soft: #eef2f6; }
.recruiting-smart-select-selection.is-month,
.recruiting-smart-select-option.is-month { --smart-accent: #7c3aed; --smart-soft: #f1edff; }
.recruiting-smart-select-selection.status-contact-plan,
.recruiting-smart-select-option.status-contact-plan { --smart-accent: #2563eb; --smart-soft: #eaf1ff; }
.recruiting-smart-select-selection.status-contact,
.recruiting-smart-select-option.status-contact { --smart-accent: #d97706; --smart-soft: #fff5dc; }
.recruiting-smart-select-selection.status-adjusting,
.recruiting-smart-select-option.status-adjusting { --smart-accent: #0891b2; --smart-soft: #e5f8fc; }
.recruiting-smart-select-selection.status-no-reply,
.recruiting-smart-select-option.status-no-reply { --smart-accent: #64748b; --smart-soft: #eef2f6; }
.recruiting-smart-select-selection.status-done,
.recruiting-smart-select-option.status-done { --smart-accent: #059669; --smart-soft: #e8faf3; }
.recruiting-smart-select-selection.status-rejected,
.recruiting-smart-select-option.status-rejected,
.recruiting-smart-select-selection.status-canceled,
.recruiting-smart-select-option.status-canceled { --smart-accent: #dc2626; --smart-soft: #fff0f1; }
.recruiting-smart-select-selection.status-waiting,
.recruiting-smart-select-option.status-waiting { --smart-accent: #64748b; --smart-soft: #eef2f6; }

.recruiting-smart-select-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 190;
  display: grid;
  overflow: hidden;
  border: 1px solid #cfdee9;
  border-radius: 14px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.22);
}

.recruiting-smart-select.is-fixed-open .recruiting-smart-select-menu {
  position: fixed;
  top: var(--recruiting-smart-select-top, auto);
  left: var(--recruiting-smart-select-left, auto);
  right: auto;
  z-index: 10045;
  width: min(390px, calc(100vw - 20px));
  max-height: min(390px, calc(100vh - 20px));
}

.recruiting-smart-select-menu-head {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid #e8eef4;
  padding: 8px 10px 11px;
}

.recruiting-smart-select-menu-head strong {
  color: #1f2b3d;
  font-size: 13px;
  font-weight: 950;
}

.recruiting-smart-select-menu-head small {
  color: #8290a3;
  font-size: 10px;
  font-weight: 750;
}

.recruiting-smart-select-options {
  display: grid;
  gap: 4px;
  max-height: 300px;
  margin-top: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.recruiting-smart-select-options label {
  display: block;
}

.recruiting-smart-select-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.recruiting-smart-select-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 7px 9px;
  background: #ffffff;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.recruiting-smart-select-option:hover {
  transform: translateX(2px);
  border-color: #d8e7ee;
  background: #f8fbfd;
}

.recruiting-smart-select-options input:checked + .recruiting-smart-select-option {
  border-color: color-mix(in srgb, var(--smart-accent) 34%, #d8e7ee);
  background: color-mix(in srgb, var(--smart-soft) 72%, #ffffff);
}

.recruiting-smart-select-option-copy,
.recruiting-smart-select-option-copy strong,
.recruiting-smart-select-option-copy small {
  display: block;
  min-width: 0;
}

.recruiting-smart-select-option-copy strong {
  color: #243148;
  font-size: 12px;
  font-weight: 950;
}

.recruiting-smart-select-option-copy small {
  overflow: hidden;
  margin-top: 3px;
  color: #8491a4;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruiting-smart-select-option > i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #d9e3eb;
  border-radius: 50%;
  color: transparent;
  background: #ffffff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.recruiting-smart-select-options input:checked + .recruiting-smart-select-option > i {
  border-color: var(--smart-accent);
  color: #ffffff;
  background: var(--smart-accent);
}

.modal.recruiting-candidate-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(840px, calc(100vw - 48px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  border: 1px solid rgba(191, 219, 226, 0.9);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.3);
}

.recruiting-candidate-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #f3f6f9;
}

.recruiting-candidate-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 98px;
  border-bottom: 1px solid #dce9ed;
  padding: 18px 22px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.95), transparent 38%),
    linear-gradient(135deg, #ebfafb 0%, #f6fbff 52%, #f8f5ff 100%);
}

.recruiting-candidate-modal-title {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.recruiting-candidate-modal-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 17px;
  color: #ffffff;
  background: linear-gradient(145deg, #08a3b7 0%, #087d91 100%);
  box-shadow: 0 13px 28px rgba(7, 149, 167, 0.25);
}

.recruiting-candidate-modal-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recruiting-candidate-modal-title > div {
  min-width: 0;
}

.recruiting-candidate-modal-title > div > span {
  display: block;
  margin-bottom: 4px;
  color: #078599;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.13em;
}

.recruiting-candidate-modal-title h2,
.recruiting-candidate-modal-title p {
  margin: 0;
}

.recruiting-candidate-modal-title h2 {
  color: #152238;
  font-size: 23px;
  letter-spacing: -0.03em;
}

.recruiting-candidate-modal-title p {
  margin-top: 5px;
  color: #65758c;
  font-size: 12px;
  font-weight: 750;
}

.recruiting-candidate-modal-close {
  align-self: flex-start;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 11px;
  color: #526176;
  background: rgba(255, 255, 255, 0.82);
  font-size: 21px;
}

.recruiting-candidate-modal .recruiting-candidate-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 100px),
    #f3f6f9;
  scrollbar-width: thin;
}

.recruiting-candidate-section {
  position: relative;
  overflow: visible;
  border: 1px solid #dfe7ee;
  border-radius: 14px;
  padding: 18px 20px 20px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(30, 41, 59, 0.04);
}

.recruiting-candidate-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20px;
  width: 44px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #08a1b4, #66cbd4);
}

.recruiting-candidate-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf1f5;
}

.recruiting-candidate-section-head > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 28px;
  flex: 0 0 34px;
  border-radius: 9px;
  border: 1px solid #d6eef1;
  color: #087f90;
  background: linear-gradient(180deg, #f1fbfc, #e7f7f9);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.recruiting-candidate-section-head > div,
.recruiting-candidate-section-head strong,
.recruiting-candidate-section-head small {
  display: block;
  min-width: 0;
}

.recruiting-candidate-section-head strong {
  color: #253248;
  font-size: 14px;
  font-weight: 950;
}

.recruiting-candidate-section-head small {
  margin-top: 2px;
  color: #8793a5;
  font-size: 10px;
  font-weight: 700;
}

.recruiting-candidate-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.recruiting-candidate-section-grid > label,
.recruiting-candidate-section-grid > .recruiting-form-field {
  align-content: start;
  min-width: 0;
}

.recruiting-input-label,
.recruiting-candidate-modal .recruiting-form-field > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #405069;
  font-size: 12px;
  font-weight: 900;
}

.recruiting-input-label i {
  border-radius: 999px;
  padding: 2px 6px;
  color: #b4232d;
  background: #fff0f1;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.recruiting-input-label small {
  color: #8a97a8;
  font-size: 9px;
  font-weight: 750;
}

.recruiting-candidate-modal .recruiting-name-fee-row {
  grid-template-columns: minmax(0, 1.55fr) minmax(150px, 0.55fr);
  gap: 16px;
}

.recruiting-candidate-modal .recruiting-candidate-grid input,
.recruiting-candidate-modal .recruiting-candidate-grid select,
.recruiting-candidate-modal .recruiting-candidate-grid textarea {
  border: 1px solid #d8e2eb;
  border-radius: 11px;
  color: #1f2b3d;
  background: #fafcfd;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.025);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.recruiting-candidate-modal .recruiting-modal-choices input,
.recruiting-candidate-modal .recruiting-smart-select-options input,
.recruiting-candidate-modal .recruiting-owner-dropdown-menu input {
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.recruiting-candidate-modal .recruiting-candidate-grid input:hover,
.recruiting-candidate-modal .recruiting-candidate-grid select:hover,
.recruiting-candidate-modal .recruiting-candidate-grid textarea:hover {
  border-color: #bfcfdb;
  background: #ffffff;
}

.recruiting-candidate-modal .recruiting-candidate-grid input:focus,
.recruiting-candidate-modal .recruiting-candidate-grid select:focus,
.recruiting-candidate-modal .recruiting-candidate-grid textarea:focus {
  outline: none;
  border-color: #16a3b5;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(7, 149, 167, 0.12);
}

.recruiting-expertise-field {
  display: grid;
  gap: 7px;
}

.recruiting-expertise-dropdown {
  min-width: 0;
  border: 1px solid #d8e2eb;
  border-radius: 11px;
  background: #fafcfd;
}

.recruiting-expertise-dropdown[open] {
  border-color: #7cc4b3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 108, 89, .09), 0 12px 30px rgba(31, 74, 63, .11);
}

.recruiting-expertise-dropdown > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  color: #263a4e;
  cursor: pointer;
  list-style: none;
}

.recruiting-expertise-dropdown > summary::-webkit-details-marker { display: none; }
.recruiting-expertise-dropdown > summary > span { display: flex; min-width: 0; align-items: center; gap: 8px; }
.recruiting-expertise-dropdown > summary i,
.recruiting-expertise-options i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--expertise-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--expertise-color) 14%, white); }
.recruiting-expertise-dropdown > summary strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.recruiting-expertise-dropdown > summary > b { color: #769086; font-size: 12px; transition: transform .16s ease; }
.recruiting-expertise-dropdown[open] > summary > b { transform: rotate(180deg); }

.recruiting-expertise-menu { display: grid; gap: 12px; padding: 0 10px 10px; border-top: 1px solid #e5efeb; }
.recruiting-expertise-options { display: grid; max-height: 190px; gap: 5px; margin-top: 10px; overflow: auto; }
.recruiting-expertise-option-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
.recruiting-expertise-option-row > [data-recruiting-expertise-choice] { display: grid; grid-template-columns: 12px minmax(0, 1fr) 16px; min-height: 34px; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 0 9px; color: #466159; background: transparent; font: inherit; font-size: 11px; font-weight: 800; text-align: left; cursor: pointer; }
.recruiting-expertise-option-row > [data-recruiting-expertise-choice]:hover { border-color: #d2e7df; background: #f4faf7; }
.recruiting-expertise-option-row > [data-recruiting-expertise-choice].selected { border-color: #acd4c8; color: #176c59; background: #eaf7f2; }
.recruiting-expertise-option-row > [data-recruiting-expertise-choice] b { color: #16705c; text-align: center; }
.recruiting-expertise-delete { min-width: 42px; min-height: 30px; align-self: center; border: 1px solid #efc9c5; border-radius: 8px; padding: 0 8px; color: #a33b32; background: #fff7f6; font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.recruiting-expertise-delete:hover { color: #b42318; background: #fff0ee; }

.recruiting-expertise-custom { display: grid; gap: 9px; padding: 12px; border: 1px solid #dcebe5; border-radius: 11px; background: #f7fbf9; }
.recruiting-expertise-custom header { display: grid; gap: 2px; }
.recruiting-expertise-custom header strong { color: #285c50; font-size: 12px; }
.recruiting-expertise-custom header small { color: #7a9189; font-size: 9px; line-height: 1.4; }
.recruiting-expertise-custom input { width: 100%; min-height: 37px !important; }
.recruiting-expertise-palette { display: flex; flex-wrap: wrap; gap: 7px; }
.recruiting-expertise-palette button { width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; padding: 0; background: var(--expertise-color); box-shadow: 0 0 0 1px #bfd6ce; cursor: pointer; }
.recruiting-expertise-palette button.selected { box-shadow: 0 0 0 2px #176c59; }
.recruiting-expertise-color-custom { position: relative; display: inline-flex; min-height: 24px; align-items: center; gap: 5px; border: 1px solid #bfd6ce; border-radius: 999px; padding: 2px 8px 2px 3px; color: #58746b; background: #fff; font-size: 9px; font-weight: 800; cursor: pointer; }
.recruiting-expertise-color-custom.selected { border-color: #176c59; box-shadow: 0 0 0 1px #176c59; }
.recruiting-expertise-color-custom input { width: 20px !important; min-height: 20px !important; height: 20px; border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.recruiting-expertise-color-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.recruiting-expertise-color-custom input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.recruiting-expertise-custom > .primary-button { min-height: 36px; border-radius: 9px; }

.recruiting-candidate-modal .recruiting-modal-choices {
  gap: 7px;
}

.recruiting-candidate-modal .recruiting-modal-choices span {
  min-height: 36px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.035);
}

.recruiting-candidate-modal .recruiting-modal-choices input:checked + span {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(7, 149, 167, 0.12), 0 5px 12px rgba(15, 23, 42, 0.08);
}

.recruiting-candidate-modal .grade-choice span {
  min-width: 48px;
  opacity: 0.72;
}

.recruiting-candidate-modal .grade-choice input:checked + span {
  opacity: 1;
}

.recruiting-candidate-modal .channel-choice span {
  min-height: 38px;
  border-radius: 10px;
}

.recruiting-candidate-modal .recruiting-url-editor {
  border: 1px dashed #cbdbe5;
  border-radius: 12px;
  padding: 13px;
  background: #f9fbfd;
}

.recruiting-candidate-modal .recruiting-url-add {
  min-height: 32px;
  border-radius: 8px;
  color: #087f90;
  background: #ffffff;
}

.recruiting-candidate-modal .compact-note textarea {
  min-height: 84px;
}

.recruiting-candidate-modal .large-note textarea {
  min-height: 148px;
}

.recruiting-candidate-modal-foot {
  justify-content: space-between;
  min-height: 70px;
  padding: 14px 20px;
  background: #ffffff;
}

.recruiting-candidate-modal-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #7b899d;
  font-size: 10px;
  font-weight: 750;
}

.recruiting-candidate-modal-foot > span i {
  color: #0aa0b2;
  font-size: 8px;
  font-style: normal;
}

.recruiting-candidate-modal-foot > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recruiting-candidate-modal-foot button {
  min-height: 40px;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 900;
}

.recruiting-candidate-modal-foot .primary-button {
  min-width: 124px;
  box-shadow: 0 9px 20px rgba(7, 149, 167, 0.2);
}

@media (max-width: 760px) {
  .modal.recruiting-candidate-modal {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
    border-radius: 15px;
  }

  .recruiting-candidate-modal-head {
    min-height: 88px;
    padding: 16px;
  }

  .recruiting-candidate-modal-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 14px;
  }

  .recruiting-candidate-modal-title h2 {
    font-size: 19px;
  }

  .recruiting-candidate-modal-title p {
    display: none;
  }

  .recruiting-candidate-modal .recruiting-candidate-grid {
    padding: 10px;
  }

  .recruiting-candidate-section {
    padding: 13px;
  }

  .recruiting-candidate-section-grid,
  .recruiting-candidate-modal .recruiting-name-fee-row {
    grid-template-columns: 1fr;
  }

  .recruiting-grade-action-row {
    grid-template-columns: 1fr;
  }

  .recruiting-modal-quick-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .recruiting-candidate-modal-foot > span {
    display: none;
  }

  .recruiting-candidate-modal-foot {
    justify-content: flex-end;
  }
}

.modal.competitor-video-detail-modal {
  width: min(1360px, calc(100vw - 56px));
  max-height: calc(100vh - 40px);
  overflow-x: hidden;
}

.modal.competitor-video-detail-modal .competitor-video-detail-modal-body {
  padding: 24px;
  overflow-x: hidden;
  background: #f8fafc;
}

.modal.competitor-video-detail-modal .competitor-video-detail-layout {
  grid-template-columns: minmax(520px, 1fr) minmax(430px, 0.82fr);
  gap: 24px;
  width: 100%;
  max-width: 100%;
}

.modal.competitor-video-detail-modal .competitor-video-info-card,
.modal.competitor-video-detail-modal .competitor-video-memo-card,
.modal.competitor-video-detail-modal .competitor-detail-recent-card {
  min-width: 0;
}

.modal.competitor-video-detail-modal .competitor-video-detail-right,
.modal.competitor-video-detail-modal .competitor-video-detail-left {
  min-width: 0;
}

.modal.competitor-video-detail-modal .competitor-video-info-list {
  min-width: 0;
}

.modal.competitor-video-detail-modal .competitor-video-info-list > div {
  grid-template-columns: 88px minmax(0, 1fr);
  min-width: 0;
}

.modal.competitor-video-detail-modal .competitor-video-info-list dd {
  overflow-wrap: anywhere;
}

.modal.competitor-video-detail-modal .competitor-detail-metric {
  min-width: 0;
}

.modal.competitor-video-detail-modal .competitor-detail-value-number {
  font-size: clamp(22px, 1.55vw, 26px);
}

.modal.competitor-video-detail-modal .competitor-detail-value-unit {
  font-size: clamp(15px, 1vw, 18px);
}

@media (max-width: 1180px) {
  .modal.competitor-video-detail-modal {
    width: min(980px, calc(100vw - 36px));
  }

  .modal.competitor-video-detail-modal .competitor-video-detail-layout {
    grid-template-columns: 1fr;
  }

  .modal.competitor-video-detail-modal .competitor-video-detail-media {
    width: min(100%, 640px);
  }
}

@media (max-width: 720px) {
  .modal.competitor-video-detail-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .modal.competitor-video-detail-modal .competitor-video-detail-modal-body {
    padding: 14px;
  }

  .modal.competitor-video-detail-modal .competitor-detail-metric-grid,
  .modal.competitor-video-detail-modal .competitor-video-info-list,
  .modal.competitor-video-detail-modal .competitor-video-info-list > div {
    grid-template-columns: 1fr;
  }

  .modal.competitor-video-detail-modal .competitor-video-info-list > div {
    gap: 6px;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid label {
  display: grid;
  gap: 6px;
  color: #34445f;
  font-weight: 800;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.compact-task-form {
  gap: 16px 18px;
}

.date-picker-group {
  display: grid;
  gap: 8px;
}

.field-label {
  color: #34445f;
  font-weight: 800;
}

.date-picker-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) minmax(170px, 1fr);
  gap: 10px;
  align-items: center;
}

.date-picker-row select,
.date-picker-row input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--text);
  background: #fff;
}

.date-picker-row select {
  border-color: var(--line);
  padding-left: 10px;
  background: #fff;
  font-weight: 800;
}

.date-picker-row input {
  border-color: var(--line);
  background: #fff;
}

.youtube-picker {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}

.youtube-search-helper {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(170px, 0.8fr) auto auto;
  align-items: end;
  gap: 10px;
}

.youtube-results {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}

.youtube-search-message {
  border: 1px dashed var(--line-strong);
  border-radius: 7px;
  padding: 11px;
  color: #526278;
  background: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.youtube-search-message.warning {
  color: var(--red);
  background: var(--red-soft);
  border-color: #ffd4d4;
}

.youtube-result {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  color: #24304a;
  background: #ffffff;
  text-align: left;
}

.youtube-result.selected {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.youtube-result img,
.youtube-result-thumb {
  width: 112px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  background: #e7eef5;
}

.youtube-result strong,
.youtube-result small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.youtube-result strong {
  line-height: 1.35;
}

.youtube-result small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.detail-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 20px;
}

.task-recruiting-link-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 1.45fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #cfe9ed;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f6fcfd;
}

.task-recruiting-link-panel > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.task-recruiting-link-panel span {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 950;
}

.task-recruiting-link-panel strong {
  color: #17213a;
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.task-recruiting-link-panel small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.task-recruiting-link-panel dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.task-recruiting-link-panel dl div {
  min-width: 0;
  border-radius: 7px;
  padding: 7px 8px;
  background: #ffffff;
}

.task-recruiting-link-panel dt {
  margin-bottom: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
}

.task-recruiting-link-panel dd {
  margin: 0;
  color: #17213a;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-form-section {
  display: grid;
  align-content: start;
  gap: 14px;
}

.detail-form-section h3 {
  font-size: 17px;
  color: #17213a;
}

.detail-series-list {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

.detail-series-list button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fbfdff;
  text-align: left;
}

.detail-series-list button.active {
  border-color: #bfe8ed;
  background: #f0fbfc;
}

.detail-series-list span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 12px;
  font-weight: 900;
}

.detail-series-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-series-list small {
  color: var(--muted);
  font-weight: 800;
}

.manager-list {
  display: grid;
  gap: 8px;
}

.manager-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px 70px;
  gap: 8px;
  align-items: center;
}

.manager-row:has([data-manager-role]) {
  grid-template-columns: minmax(0, 1fr) 110px 94px 70px;
}

.manager-row input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
}

.manager-row button {
  min-height: 36px;
  border: 1px solid #ffd4d4;
  border-radius: 7px;
  color: var(--red);
  background: #fffafa;
  font-weight: 800;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  max-width: 360px;
  padding: 14px 16px;
  border-radius: 8px;
  color: #fff;
  background: #10203d;
  box-shadow: var(--shadow);
  font-weight: 800;
}

.row-context-menu {
  position: fixed;
  z-index: 1200;
  min-width: 180px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 10px;
}

.row-context-menu strong {
  max-width: 220px;
  color: #23304b;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-context-menu button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfdff;
  color: #31415f;
  font-weight: 800;
  text-align: left;
  padding: 0 10px;
}

.dashboard-context-menu button {
  color: #087d89;
  border-color: #bfe6ec;
  background: #effcfd;
}

.calendar-context-menu button {
  color: #0f766e;
  border-color: #bae6df;
  background: #effcf9;
}

.row-context-menu button:disabled {
  color: #94a3b8;
  background: #f8fafc;
  cursor: not-allowed;
}

.context-memo-label {
  display: grid;
  gap: 6px;
  color: #41526c;
  font-size: 12px;
  font-weight: 900;
}

.context-memo-label textarea {
  min-width: 260px;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  color: #24304a;
  background: #fbfdff;
  font: inherit;
  font-weight: 700;
}

.row-context-menu button.danger {
  color: var(--red);
  background: var(--red-soft);
}

.handoff-context-menu {
  min-width: 190px;
}

.handoff-color-context-menu {
  min-width: 264px;
}

.handoff-context-colors {
  display: grid;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.handoff-context-current {
  display: grid;
  grid-template-columns: auto 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: 7px;
  padding: 8px;
  background: #ffffff;
}

.handoff-context-current span,
.handoff-context-colors > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.handoff-context-current b {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  background: var(--handoff-context-color);
}

.handoff-context-current code {
  color: #17213a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
}

.handoff-context-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.row-context-menu .handoff-context-color {
  width: 30px;
  min-height: 30px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  padding: 0;
  background: var(--handoff-context-color);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.row-context-menu .handoff-context-color.active {
  border-color: #17213a;
  box-shadow: 0 0 0 3px rgba(7, 149, 167, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.handoff-context-color-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 2px 7px 2px 8px;
  background: #ffffff;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.handoff-context-color-custom input[type="color"] {
  width: 24px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.decision-modal {
  width: min(820px, calc(100vw - 28px));
  border-radius: 14px;
  padding: 22px;
  background: #ffffff;
  box-shadow: 0 22px 60px rgba(15, 28, 56, 0.18);
}

.decision-modal__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.decision-modal__header h2 {
  margin: 18px 0 0;
  color: #13213a;
  font-size: 25px;
  line-height: 1.25;
}

.decision-modal__title {
  margin: 0;
  color: #13213a;
  font-size: 16px;
  font-weight: 900;
}

.decision-flow {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0;
  margin: 26px 0 16px;
}

.decision-flow button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #8b98ad;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.decision-flow button::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #d8e2ec;
}

.decision-flow button:first-child::before {
  left: 50%;
  width: 50%;
}

.decision-flow button:last-child::before {
  width: 50%;
}

.decision-flow i {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 2px solid #ccd8e6;
  border-radius: 50%;
  background: #ffffff;
}

.decision-flow .is-done::before,
.decision-flow .is-current::before {
  background: #0ea5b4;
}

.decision-flow .is-done i {
  border-color: #0ea5b4;
  background: #0ea5b4;
}

.decision-flow .is-current {
  color: #078a99;
}

.decision-flow .is-current i {
  width: 24px;
  height: 24px;
  margin-top: -4px;
  border-color: #0ea5b4;
  background: #ffffff;
  box-shadow: inset 0 0 0 5px #0ea5b4, 0 0 0 4px rgba(14, 165, 180, 0.16);
}

.decision-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.decision-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #dce7f0;
  border-radius: 7px;
  padding: 0 13px;
  color: #41516a;
  background: #fbfdff;
  font-size: 13px;
  font-weight: 900;
}

.decision-today {
  display: grid;
  gap: 10px;
  border-top: 1px solid #e7edf4;
  padding-top: 18px;
}

.decision-today span,
.decision-status-card span {
  color: #516179;
  font-size: 13px;
  font-weight: 900;
}

.decision-today strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 116px;
  border: 1px solid #dceaf0;
  border-radius: 10px;
  padding: 16px 22px;
  color: #13213a;
  background: linear-gradient(180deg, #f7fdfe, #eef8fa);
  line-height: 1.2;
}

.decision-action-main {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.decision-inline-support {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.decision-inline-support .support-task-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 118px;
  height: 46px;
  gap: 10px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
}

.decision-inline-support .support-task-button span {
  position: static;
  inset: auto;
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  font-size: 20px;
  place-items: center;
}

.decision-inline-support .support-task-button em,
.decision-inline-support .support-task-button b {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
}

.decision-inline-support .support-task-button b {
  color: #b45309;
}

.decision-inline-support .support-task-button.done b {
  color: #047857;
}

.decision-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 14px;
}

.decision-status-card {
  display: grid;
  gap: 12px;
  min-height: 104px;
  border: 1px solid #dfe8f1;
  border-radius: 10px;
  padding: 16px;
  background: #ffffff;
}

.decision-status-card strong {
  color: #13213a;
  font-size: 19px;
  line-height: 1.25;
}

.readiness-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid #dfe8f1;
  border-radius: 10px;
  padding: 12px;
  background: #ffffff;
}

.readiness-item {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 38px;
  border: 1px solid #e4edf5;
  border-radius: 999px;
  padding: 0 13px;
  color: #34445f;
  background: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.readiness-item + .readiness-item {
  border-left: 1px solid #e4edf5;
}

.readiness-item:hover {
  background: #f4fafb;
  border-color: #b9dce3;
}

.readiness-item.is-active {
  border-color: #0ea5b4;
  color: #087d89;
  background: #eefcfd;
  box-shadow: 0 6px 16px rgba(14, 165, 180, 0.12);
}

.readiness-edit-modal {
  width: min(520px, calc(100vw - 28px));
}

.readiness-item b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.readiness-item b:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(14, 165, 180, 0.12);
}

.readiness-ok b {
  color: #178049;
  background: #e9f7ee;
}

.readiness-progress b {
  color: #c97012;
  background: #fff4df;
}

.readiness-missing b {
  color: #d94b4b;
  background: #fdecec;
}

.readiness-detail-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  border: 1px solid #d8e7ef;
  border-radius: 12px;
  padding: 16px;
  background: #fbfdff;
}

.readiness-detail-panel strong {
  display: block;
  color: #13213a;
  font-size: 16px;
  font-weight: 950;
}

.readiness-detail-panel p {
  margin: 6px 0 0;
  color: #61718a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.readiness-inline-form {
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: end;
}

.readiness-inline-form label {
  display: grid;
  gap: 8px;
  color: #42536d;
  font-size: 13px;
  font-weight: 950;
}

.readiness-inline-form input,
.readiness-inline-form textarea {
  width: 100%;
  border: 1px solid #d8e4ee;
  border-radius: 9px;
  padding: 11px 12px;
  color: #13213a;
  background: #ffffff;
  font: inherit;
  font-weight: 800;
  resize: vertical;
}

.readiness-thumbnail-panel {
  grid-template-columns: minmax(0, 0.8fr) minmax(220px, 1fr);
  align-items: stretch;
}

.readiness-thumbnail-preview {
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 1px dashed #bfd5e4;
  border-radius: 10px;
  color: #7a8ca5;
  background: linear-gradient(135deg, #f8fbfd, #eef7fb);
  font-size: 13px;
  font-weight: 900;
}

.readiness-thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.decision-memo {
  margin-top: 14px;
  border: 1px solid #dfe8f1;
  border-radius: 10px;
  padding: 13px 15px;
  background: #fbfdff;
}

.decision-memo p {
  margin: 0;
  color: #40516b;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.decision-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 16px;
  margin-top: 18px;
}

.decision-modal__actions button {
  min-height: 48px;
}

@media (max-width: 720px) {
  .settings-grid,
  .detail-modal-grid {
    grid-template-columns: 1fr;
  }

  .task-recruiting-link-panel,
  .task-recruiting-link-panel dl,
  .recruiting-history-snapshot,
  .recruiting-completed-card-detail > dl,
  .recruiting-completed-card-notes,
  .recruiting-completed-archive-summary {
    grid-template-columns: 1fr;
  }

  .task-recruiting-link-panel > button {
    width: 100%;
  }

  .decision-modal {
    padding: 18px;
  }

  .decision-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 0;
  }

  .decision-flow button::before {
    display: none;
  }

  .decision-status-grid,
  .decision-modal__actions {
    grid-template-columns: 1fr;
  }

  .decision-action-main {
    font-size: 29px;
  }

  .decision-today strong {
    align-items: flex-start;
    flex-direction: column;
  }

  .readiness-item {
    width: 50%;
    padding: 5px 10px;
  }

  .readiness-item + .readiness-item {
    border-left: 0;
  }

  .readiness-detail-panel,
  .readiness-inline-form,
  .readiness-thumbnail-panel {
    grid-template-columns: 1fr;
  }
}

/* Final visual override: memo/time landing pages */
.handoff-memo-page {
  min-height: calc(100vh - 78px);
}

.time-tracking-page {
  min-height: 0;
}

.handoff-memo-page,
.time-tracking-page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 10%, rgba(83, 177, 201, 0.18), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(139, 124, 246, 0.14), transparent 28%),
    linear-gradient(135deg, #f7fbff 0%, #f3fbf8 47%, #f8f5ff 100%);
}

.handoff-memo-page::before,
.time-tracking-page::before {
  content: "";
  position: absolute;
  inset: 18px 20px auto auto;
  z-index: -1;
  width: min(520px, 44vw);
  height: min(520px, 44vw);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0)),
    radial-gradient(circle, rgba(78, 150, 230, 0.13), transparent 68%);
  pointer-events: none;
}

.handoff-memo-page > .page-head h1,
.time-management-home-head h1 {
  color: #10213b;
  letter-spacing: -0.045em;
}

.handoff-memo-page > .page-head p,
.time-management-home-head p {
  color: #5b6d86;
  font-weight: 750;
}

.handoff-home {
  min-height: calc(100vh - 245px);
  padding: 18px 0 58px;
}

.handoff-home-choice-grid,
.time-management-choice-grid {
  gap: 24px;
}

.handoff-choice-card,
.time-management-big-button {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(155, 178, 208, 0.42);
  border-radius: 24px;
  transform: translateY(0);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
  box-shadow:
    0 22px 55px rgba(39, 61, 91, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.handoff-choice-card::before,
.time-management-big-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0.54)),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.9), transparent 34%);
  opacity: 0.72;
  pointer-events: none;
}

.handoff-choice-card::after,
.time-management-big-button::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -76px;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.07;
  pointer-events: none;
}

.handoff-choice-card:hover,
.handoff-choice-card:focus-visible,
.time-management-big-button:hover,
.time-management-big-button:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 28px 68px rgba(39, 61, 91, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.handoff-choice-card > *,
.time-management-big-button > * {
  position: relative;
  z-index: 1;
}

.handoff-choice-card {
  grid-template-rows: auto auto auto auto;
  gap: 15px;
  min-height: 282px;
  border-radius: 24px;
  padding: 34px 32px 30px;
  text-align: left;
}

.handoff-choice-card--received {
  color: #147985;
  border-color: rgba(79, 179, 194, 0.35);
  background:
    linear-gradient(145deg, rgba(250, 254, 255, 0.97), rgba(229, 248, 250, 0.94)),
    #eefbfc;
}

.handoff-choice-card--sent {
  color: #7357b6;
  border-color: rgba(155, 135, 234, 0.34);
  background:
    linear-gradient(145deg, rgba(254, 252, 255, 0.98), rgba(241, 236, 255, 0.94)),
    #f4f0ff;
}

.handoff-choice-card--received:hover,
.handoff-choice-card--received:focus-visible {
  border-color: rgba(46, 154, 173, 0.65);
}

.handoff-choice-card--sent:hover,
.handoff-choice-card--sent:focus-visible {
  border-color: rgba(119, 91, 200, 0.58);
}

.handoff-choice-icon {
  width: 60px;
  height: 60px;
  justify-self: start;
  border-radius: 20px;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(37, 67, 98, 0.15);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.handoff-choice-card--received .handoff-choice-icon {
  background: linear-gradient(135deg, #20a8b5, #4cc8b7);
}

.handoff-choice-card--sent .handoff-choice-icon {
  background: linear-gradient(135deg, #8667dc, #c084dc);
}

.handoff-choice-card strong {
  color: #14243c;
  font-size: 27px;
  letter-spacing: -0.035em;
}

.handoff-choice-card p {
  max-width: 280px;
  color: #5a6b84;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.62;
}

.handoff-choice-count {
  min-height: 31px;
  justify-self: start;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.74);
  color: currentColor;
  box-shadow: 0 8px 18px rgba(31, 51, 77, 0.08);
  backdrop-filter: blur(10px);
}

.handoff-choice-card .handoff-status-unread {
  color: #be5d21;
  background: rgba(255, 247, 237, 0.84);
}

.handoff-choice-card .handoff-status-checked {
  color: #168060;
  background: rgba(235, 253, 244, 0.86);
}

.time-management-home {
  width: min(980px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 20px;
}

.time-management-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.time-management-big-button {
  min-height: 238px;
  border-radius: 24px;
  padding: 34px 32px;
}

.time-management-big-button--classic {
  color: #2f73b7;
  border-color: rgba(89, 151, 214, 0.34);
  background:
    linear-gradient(145deg, rgba(251, 254, 255, 0.98), rgba(233, 244, 255, 0.95)),
    #edf6ff;
}

.time-management-big-button--realtime {
  color: #16836f;
  border-color: rgba(78, 178, 154, 0.34);
  background:
    linear-gradient(145deg, rgba(250, 255, 253, 0.98), rgba(230, 249, 243, 0.95)),
    #eaf9f4;
}

.time-management-big-button--classic:hover,
.time-management-big-button--classic:focus-visible {
  border-color: rgba(70, 137, 204, 0.62);
}

.time-management-big-button--realtime:hover,
.time-management-big-button--realtime:focus-visible {
  border-color: rgba(48, 158, 132, 0.62);
}

.time-management-card-icon {
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(37, 67, 98, 0.15);
}

.time-management-card-copy small {
  color: currentColor;
  opacity: 0.82;
}

.time-management-card-copy strong {
  color: #14243c;
  letter-spacing: -0.035em;
}

.time-management-card-copy > span {
  color: #5a6b84;
  font-weight: 750;
}

.time-management-card-arrow {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 22px rgba(31, 51, 77, 0.08);
}

@media (max-width: 820px) {
  .handoff-home-choice-grid,
  .time-management-choice-grid {
    grid-template-columns: 1fr;
  }

  .handoff-choice-card,
  .time-management-big-button {
    min-height: 210px;
  }
}

/* Company PC connection panel in realtime tracking */
.realtime-device-box {
  display: grid;
  gap: 12px;
}

.realtime-pairing-code,
.realtime-device-current,
.realtime-device-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #d9e8f2;
  border-radius: 18px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 249, 252, 0.92)),
    #ffffff;
  box-shadow: 0 14px 32px rgba(30, 55, 85, 0.07);
}

.realtime-pairing-code {
  border-color: #bfe6ec;
  background:
    radial-gradient(circle at 12% 20%, rgba(7, 149, 167, 0.12), transparent 34%),
    linear-gradient(135deg, #f8feff, #edfafa);
}

.realtime-pairing-code span,
.realtime-pairing-code small,
.realtime-device-current small,
.realtime-device-current span,
.realtime-device-empty span,
.realtime-device-note {
  color: #61728b;
  font-size: 12px;
  font-weight: 800;
}

.realtime-pairing-code strong {
  border-radius: 16px;
  padding: 10px 18px;
  color: #075f70;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #c7edf2, 0 10px 22px rgba(7, 149, 167, 0.12);
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: 0.16em;
}

.realtime-device-current > div,
.realtime-device-empty {
  display: grid;
  gap: 6px;
}

.realtime-device-current strong,
.realtime-device-empty strong {
  color: #14243c;
  font-size: 17px;
  font-weight: 950;
}

.realtime-device-badge {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  color: #16745d !important;
  background: #e7f8ef;
  font-size: 11px !important;
}

.realtime-device-current button {
  min-height: 34px;
  border: 1px solid #f4c7c7;
  border-radius: 10px;
  padding: 0 12px;
  color: #b42318;
  background: #fff7f7;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.realtime-device-current button:hover {
  border-color: #e99a9a;
  background: #fff0f0;
}

.realtime-device-note {
  margin: 0;
}

#dashboardPage .summary-card {
  gap: 8px;
  padding: 14px 12px;
}

#dashboardPage .summary-icon {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  font-size: 18px;
}

#dashboardPage .summary-card p,
#dashboardPage .summary-card small {
  word-break: keep-all;
}

#dashboardPage .summary-card p {
  font-size: 12px;
}

#dashboardPage .summary-card small {
  font-size: 11px;
}

#dashboardPage .summary-card strong {
  font-size: 28px;
}
/* Competitor topic discovery */
.topic-discovery {
  margin: 22px 0;
  padding: 24px;
  border: 1px solid #dfe8e6;
  border-radius: 22px;
  background: linear-gradient(145deg, #f7fbfa 0%, #ffffff 62%);
  box-shadow: 0 12px 34px rgba(25, 72, 66, 0.07);
}

.topic-section-head,
.topic-card-head,
.topic-card-meta,
.topic-detail-total,
.topic-score-part {
  display: flex;
  align-items: center;
}

.topic-section-head { justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.topic-section-head span,
.topic-detail header > span { color: #0f766e; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.topic-section-head h2,
.topic-detail h2 { margin: 4px 0 5px; color: #152b2a; }
.topic-section-head p,
.topic-detail header p { margin: 0; color: #6b7c7a; font-size: 13px; }
.topic-section-head > em { color: #0f766e; font-size: 12px; font-style: normal; font-weight: 700; }

.topic-candidate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.topic-candidate-card { min-width: 0; padding: 17px; border: 1px solid #e2ebe9; border-radius: 17px; background: #fff; }
.topic-card-head { align-items: flex-start; gap: 13px; }
.topic-card-head > div { min-width: 0; }
.topic-card-head h3 { margin: 1px 0 6px; color: #183331; font-size: 16px; line-height: 1.35; }
.topic-card-head p { margin: 0; color: #73817f; font-size: 12px; line-height: 1.45; }
.topic-score { display: grid; flex: 0 0 58px; min-height: 58px; place-content: center; border-radius: 15px; text-align: center; }
.topic-score strong { font-size: 18px; line-height: 1; }
.topic-score small { margin-top: 4px; font-size: 9px; }
.topic-score.is-confirmed { color: #11665f; background: #dff5f1; }
.topic-score.is-provisional { color: #805b12; background: #fff2cf; }
.topic-card-meta { gap: 8px; margin: 13px 0; color: #627370; font-size: 11px; }
.topic-card-meta span { padding: 4px 7px; border-radius: 999px; background: #f0f5f4; }
.topic-card-meta em { color: #9a6700; font-style: normal; }
.topic-evidence-list { display: grid; gap: 7px; }
.topic-evidence { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 9px; width: 100%; padding: 7px; border: 0; border-radius: 11px; background: #f7f9f9; color: inherit; text-align: left; cursor: pointer; }
.topic-evidence img,
.topic-evidence > span { width: 42px; height: 30px; border-radius: 7px; object-fit: cover; background: #dce9e7; display: grid; place-items: center; }
.topic-evidence em { min-width: 0; font-style: normal; }
.topic-evidence strong,
.topic-evidence small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-evidence strong { color: #29413f; font-size: 11px; }
.topic-evidence small { margin-top: 2px; color: #82908e; font-size: 10px; }
.topic-detail-button { width: 100%; margin-top: 12px; padding: 9px 12px; border: 1px solid #cadbd8; border-radius: 10px; background: #fff; color: #176c65; font-weight: 700; cursor: pointer; }
.topic-discovery-compact,
.topic-discovery-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topic-discovery-compact { padding: 15px 19px; }
.topic-discovery-compact span,
.topic-discovery-empty p { color: #748481; font-size: 12px; }

.topic-detail-modal { width: min(920px, calc(100vw - 32px)); }
.topic-detail { color: #243b39; }
.topic-detail-total { gap: 10px; margin: 17px 0; }
.topic-detail-total strong { color: #0f766e; font-size: 34px; }
.topic-detail-total span { color: #70817e; font-size: 12px; }
.topic-score-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.topic-score-part { justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid #e2eae8; border-radius: 12px; background: #fafcfc; }
.topic-score-part span { color: #6d7d7a; font-size: 11px; }
.topic-score-part strong { color: #2b4542; font-size: 12px; }
.topic-detail-evidence { margin-top: 20px; }
.topic-detail-evidence h3 { margin-bottom: 10px; }
.topic-detail-evidence-list { display: grid; gap: 8px; }
.topic-detail-evidence-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.topic-split-button,
.topic-admin-actions button,
.topic-admin-actions select { padding: 9px 11px; border: 1px solid #cbdad8; border-radius: 9px; background: #fff; color: #31504d; font-size: 11px; }
.topic-split-button,
.topic-admin-actions button { cursor: pointer; }
.topic-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e3ebe9; }

@media (max-width: 760px) {
  .topic-discovery { padding: 17px; border-radius: 17px; }
  .topic-candidate-grid,
  .topic-score-parts { grid-template-columns: 1fr; }
  .topic-section-head { align-items: flex-start; }
  .topic-section-head > em { display: none; }
  .topic-discovery-compact,
  .topic-discovery-empty { align-items: flex-start; flex-direction: column; }
  .topic-detail-evidence-row { grid-template-columns: 1fr; }
}
.competitor-transcript-card {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.competitor-transcript-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.competitor-transcript-head span {
  display: block;
  margin-bottom: 5px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.competitor-transcript-head h2 { margin: 0; font-size: 18px; }
.competitor-transcript-head p { margin: 6px 0 0; color: #64748b; font-size: 12px; }
.competitor-transcript-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.competitor-transcript-actions .secondary-button { min-height: 39px; font-size: 11px; }

.competitor-transcript-empty {
  display: grid;
  gap: 5px;
  padding: 24px;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
}

.competitor-transcript-empty strong { color: #334155; }
.competitor-question-list { display: grid; gap: 9px; }

.competitor-question-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  color: inherit;
  text-decoration: none;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.competitor-question-item:hover { border-color: #93c5fd; background: #f8fbff; }
.competitor-question-item time { color: #2563eb; font-weight: 800; }
.competitor-question-item span { display: grid; gap: 4px; min-width: 0; }
.competitor-question-item small { color: #64748b; font-size: 11px; }
.competitor-question-item strong { color: #172033; font-size: 13px; line-height: 1.5; }
.competitor-question-item i { color: #77869a; font-size: 10px; font-style: normal; line-height: 1.55; }
.competitor-question-item p { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 7px; margin: 3px 0 0; padding-top: 7px; border-top: 1px solid #edf1f5; color: #536379; font-size: 10px; line-height: 1.55; }
.competitor-question-item p b { color: #16877e; font-size: 9px; }
.competitor-question-item em { color: #2563eb; font-size: 11px; font-style: normal; white-space: nowrap; }

@media (max-width: 720px) {
  .competitor-question-item { grid-template-columns: 48px minmax(0, 1fr); }
  .competitor-question-item em { display: none; }
}

/* Competitor intelligence redesign · 2026-07 */
.monitoring-dashboard {
  --ci-ink: #172033;
  --ci-muted: #6f7b90;
  --ci-line: #e3e8f0;
  --ci-blue: #2f64f5;
  --ci-teal: #13a38f;
  --ci-violet: #7656df;
  display: grid;
  gap: 22px;
  color: var(--ci-ink);
}

.monitoring-hero {
  position: relative;
  min-height: 300px;
  padding: 42px 46px;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 18%, rgba(91, 133, 255, .42), transparent 28%),
    radial-gradient(circle at 70% 100%, rgba(18, 184, 166, .23), transparent 30%),
    linear-gradient(125deg, #121a2f 0%, #18284d 53%, #203b68 100%);
  box-shadow: 0 24px 55px rgba(29, 48, 88, .2);
}

.monitoring-hero::before,
.monitoring-hero::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; pointer-events: none; }
.monitoring-hero::before { width: 360px; height: 360px; right: -90px; top: -160px; }
.monitoring-hero::after { width: 230px; height: 230px; right: 80px; bottom: -150px; }
.monitoring-hero-copy { position: relative; z-index: 1; max-width: 730px; }
.monitoring-hero-copy > span { margin: 0 0 16px; color: #7ee5d5; font-size: 11px; letter-spacing: .18em; }
.monitoring-hero-copy h1 { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 48px); line-height: 1.16; letter-spacing: -.045em; }
.monitoring-hero-copy h1 em { color: #8db5ff; font-style: normal; }
.monitoring-hero-copy p { max-width: 650px; margin: 18px 0 0; color: #c0cadb; font-size: 15px; line-height: 1.7; }
.monitoring-proof-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.monitoring-proof-badges b { padding: 8px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #dce6f8; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 700; }
.monitoring-hero-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; min-width: 190px; }
.monitoring-hero-mark { position: relative; display: grid; justify-items: end; gap: 1px; padding: 7px 0 0 30px; }
.monitoring-hero-mark i { position: absolute; left: 7px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: #43e0bb; box-shadow: 0 0 0 7px rgba(67,224,187,.12); }
.monitoring-hero-mark span { margin: 0; color: #7ee5d5; font-size: 10px; letter-spacing: .15em; }
.monitoring-hero-mark strong { color: #fff; font-size: 42px; line-height: 1; }
.monitoring-hero-mark small { color: #9eacc3; }
.monitoring-hero-actions button { border-color: rgba(255,255,255,.16); color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.monitoring-hero-actions button:hover { background: rgba(255,255,255,.15); }

.monitoring-toolbar { padding: 0 4px; }
.monitoring-toolbar > div { display: flex; align-items: center; gap: 11px; }
.monitoring-periods { padding: 4px; background: #e9edf4; }
.monitoring-periods button { min-width: 58px; color: #657187; }
.monitoring-periods button.is-active { background: #172033; box-shadow: 0 4px 12px rgba(23,32,51,.18); }
.monitoring-view-note { color: #8690a1; font-size: 11px; }

.monitoring-summary-grid { gap: 13px; }
.monitoring-summary-grid article { position: relative; display: flex; align-items: flex-start; gap: 15px; min-height: 138px; padding: 22px; overflow: hidden; border: 1px solid var(--ci-line); border-radius: 20px; background: #fff; box-shadow: 0 9px 24px rgba(34,48,75,.045); }
.monitoring-summary-grid article::after { content: ""; position: absolute; right: -28px; bottom: -35px; width: 95px; height: 95px; border-radius: 50%; background: currentColor; opacity: .055; }
.monitoring-summary-grid article > span { display: grid; place-items: center; flex: 0 0 37px; height: 37px; border-radius: 12px; color: currentColor; background: color-mix(in srgb, currentColor 10%, white); font-size: 10px; font-weight: 900; }
.monitoring-summary-grid article > div { display: grid; gap: 4px; }
.monitoring-summary-grid small { color: #7c8799; font-size: 11px; }
.monitoring-summary-grid strong { color: #182238; font-size: 30px; letter-spacing: -.04em; }
.monitoring-summary-grid strong em { margin-left: 3px; color: #7a8596; font-size: 12px; font-style: normal; font-weight: 700; }
.monitoring-summary-grid p { margin: 0; color: #9aa3b1; font-size: 10px; }
.monitoring-summary-grid .is-blue { color: var(--ci-blue); }
.monitoring-summary-grid .is-teal { color: var(--ci-teal); }
.monitoring-summary-grid .is-violet { color: var(--ci-violet); }
.monitoring-summary-grid .is-amber { color: #d28a18; }

.monitoring-status-strip { grid-template-columns: 1.35fr repeat(4, minmax(90px, .72fr)) auto; border-radius: 20px; box-shadow: 0 8px 20px rgba(34,48,75,.035); }
.monitoring-status-strip > div { min-height: 72px; align-content: center; padding: 16px 20px; }
.monitoring-status-strip .monitoring-status-title { gap: 2px; background: #f7f9fc; }
.monitoring-status-title span { color: var(--ci-blue); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.monitoring-status-title strong { font-size: 14px; }
.monitoring-status-strip strong { font-size: 22px; }
.monitoring-status-strip strong em { margin-left: 2px; color: #8a94a4; font-size: 10px; font-style: normal; }
.monitoring-status-strip > a { color: var(--ci-blue); }
.monitoring-status-strip > a span { margin-left: 5px; }

.monitoring-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--ci-line); border-radius: 22px; background: #fff; }
.monitoring-insight-grid article { min-height: 175px; padding: 24px 26px; border-right: 1px solid #edf0f5; }
.monitoring-insight-grid article:last-child { border-right: 0; }
.monitoring-insight-grid article > div { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.monitoring-insight-grid article > div span { color: var(--ci-blue); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.monitoring-insight-grid article:nth-child(2) > div span { color: var(--ci-violet); }
.monitoring-insight-grid article:nth-child(3) > div span { color: var(--ci-teal); }
.monitoring-insight-grid article > div em { color: #8c96a6; font-size: 11px; font-style: normal; }
.monitoring-insight-grid article > strong { display: block; min-height: 46px; color: #1d2940; font-size: 16px; line-height: 1.45; }
.monitoring-insight-grid article > p { margin: 10px 0 0; color: #7e899b; font-size: 12px; line-height: 1.55; }

.topic-discovery { padding: 28px; border: 1px solid var(--ci-line); border-radius: 24px; background: #f8fafc; box-shadow: none; }
.topic-section-head { margin-bottom: 22px; }
.topic-section-head span { color: var(--ci-teal); letter-spacing: .16em; }
.topic-section-head h2 { margin-top: 7px; color: #172033; font-size: 25px; letter-spacing: -.035em; }
.topic-section-head p { color: #7a8596; }
.topic-section-head > em { padding: 7px 10px; border-radius: 999px; color: #147d70; background: #e4f5f1; }
.topic-candidate-grid { gap: 16px; }
.topic-candidate-card { position: relative; padding: 20px; overflow: hidden; border-color: #dfe6ee; border-radius: 20px; box-shadow: 0 8px 22px rgba(35,50,77,.055); }
.topic-candidate-card.is-leading { border-color: #b9dcd7; box-shadow: 0 14px 30px rgba(25,125,111,.09); }
.topic-card-accent { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.topic-card-accent span { color: var(--ci-teal); font-size: 10px; font-weight: 900; }
.topic-card-accent em { color: #9aa3b0; font-size: 9px; font-style: normal; letter-spacing: .1em; }
.topic-card-head { display: grid; grid-template-columns: minmax(0,1fr) 66px; }
.topic-card-head h3 { margin: 8px 0 7px; color: #172338; font-size: 18px; }
.topic-state-badge { display: inline-flex; padding: 5px 8px; border-radius: 999px; color: #996410; background: #fff2d8; font-size: 9px; font-weight: 900; }
.topic-state-badge.is-confirmed { color: #087969; background: #ddf5ef; }
.topic-score { min-height: 66px; border-radius: 18px; }
.topic-score strong { font-size: 22px; }
.topic-score small { font-size: 9px; }
.topic-card-meta { padding: 11px 0; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; }
.topic-card-meta span { padding: 0; background: transparent; }
.topic-card-meta b { color: #26354d; }
.topic-card-meta em { margin-left: auto; padding: 4px 7px; border-radius: 999px; background: #fff1d8; }
.topic-card-meta em.is-spread { color: #087969; background: #ddf5ef; }
.topic-evidence-list { margin-top: 12px; }
.topic-evidence { position: relative; grid-template-columns: 22px 52px minmax(0,1fr) auto; padding: 8px; border: 1px solid transparent; background: #f7f9fc; }
.topic-evidence:hover { border-color: #d6e1ed; background: #fff; }
.topic-evidence-order { color: #9ba4b2; font-size: 9px; font-weight: 900; text-align: center; }
.topic-evidence img, .topic-evidence-fallback { width: 52px !important; height: 34px !important; }
.topic-evidence > b { color: #93a0b1; font-size: 10px; }
.topic-evidence-empty { padding: 16px; color: #8b96a6; background: #f7f9fc; font-size: 11px; text-align: center; }
.topic-detail-button { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding: 11px 13px; border-color: #d4dde8; color: #2d5dde; }
.topic-detail-button:hover { border-color: #90aaf5; background: #f6f8ff; }
.topic-discovery-empty { min-height: 210px; display: grid; grid-template-columns: 120px minmax(0,1fr) 180px; align-items: center; padding: 30px 34px; background: linear-gradient(135deg,#fbfcfe,#f5f8fc); }
.topic-empty-visual { position: relative; width: 90px; height: 90px; }
.topic-empty-visual span { position: absolute; width: 28px; height: 28px; border: 2px solid #91a8cb; border-radius: 50%; }
.topic-empty-visual span:nth-child(1) { left: 3px; top: 43px; }
.topic-empty-visual span:nth-child(2) { left: 32px; top: 23px; }
.topic-empty-visual span:nth-child(3) { right: 1px; top: 4px; }
.topic-empty-visual::before { content:""; position:absolute; left:18px; top:20px; width:60px; height:48px; border-top:2px solid #c1cee0; transform:rotate(-32deg); }
.topic-empty-visual b { position: absolute; right: 2px; top: 48px; color: var(--ci-blue); }
.topic-empty-copy > span { color: var(--ci-teal); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.topic-empty-copy h2 { margin: 8px 0; color: #1b2941; font-size: 22px; }
.topic-empty-copy p { max-width: 610px; margin: 0; color: #748096; line-height: 1.65; }
.topic-empty-copy p strong { color: #2b5ee7; }
.topic-empty-rule { display: grid; gap: 5px; padding: 18px; border: 1px solid #dfe6ef; border-radius: 16px; background: #fff; }
.topic-empty-rule small { color: #8d97a7; }
.topic-empty-rule strong { color: #1e2c44; }
.topic-empty-rule span { color: #8590a1; font-size: 10px; }
.topic-discovery-compact { min-height: 120px; justify-content: flex-start; }
.topic-empty-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--ci-blue); background: #edf2ff; font-size: 18px; font-weight: 900; }
.topic-discovery-compact > div:last-child { display: grid; gap: 5px; }

.monitoring-results { border-radius: 24px; box-shadow: 0 12px 30px rgba(34,48,75,.055); }
.monitoring-section-head { padding: 26px 28px; }
.monitoring-section-head > div > span { color: var(--ci-blue); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.monitoring-section-head h2 { margin-top: 6px; font-size: 23px; letter-spacing: -.03em; }
.monitoring-section-head > strong { padding: 8px 11px; border-radius: 999px; color: #2a5de5; background: #edf2ff; font-size: 10px; }
.monitoring-video-card { position: relative; min-height: 118px; }
.monitoring-video-card.is-outperforming { box-shadow: inset 3px 0 0 var(--ci-teal); }
.monitoring-video-open { grid-template-columns: 48px 142px minmax(0,1fr) 120px 22px; min-height: 118px; padding: 15px 28px; gap: 18px; }
.monitoring-video-open:hover { background: #f8faff; }
.monitoring-rank { display: grid; width: auto; height: auto; gap: 1px; background: transparent; }
.monitoring-rank small { color: #a2abb8; font-size: 8px; letter-spacing: .1em; }
.monitoring-rank strong { color: #24334c; font-size: 22px; }
.monitoring-thumb { position: relative; border-radius: 13px; }
.monitoring-thumb i { position: absolute; left: 7px; bottom: 6px; padding: 4px 6px; border-radius: 6px; color: #fff; background: rgba(15,24,40,.78); font-size: 8px; font-style: normal; backdrop-filter: blur(5px); }
.monitoring-copy { gap: 6px; }
.monitoring-copy small { color: var(--ci-teal); font-size: 10px; }
.monitoring-copy strong { color: #1b273c; font-size: 15px; }
.monitoring-copy span { color: #7c8799; }
.monitoring-metrics small { color: #919aa8; font-size: 9px; }
.monitoring-metrics > strong { color: #1e2a40; font-size: 18px; }
.monitoring-metrics > strong em { margin-left: 2px; color: #8b95a5; font-size: 10px; font-style: normal; }
.monitoring-metrics > span { padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.monitoring-metrics .is-ready { color: #0b7c6b; background: #e0f5ef; }
.monitoring-metrics .is-waiting { color: #7b8494; background: #f1f3f6; }
.monitoring-row-arrow { color: #a8b0bd; font-size: 17px; }
.monitoring-tier-action, .monitoring-tier-state { position: absolute; right: 27px; bottom: 9px; z-index: 2; padding: 0; border: 0; color: #735bd1; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.monitoring-tier-state { color: #68768c; }
.monitoring-source-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 16px 20px; border: 1px solid var(--ci-line); border-radius: 16px; color: #7f8999; background: #fff; font-size: 10px; }
.monitoring-source-legend b { color: #28364e; }
.monitoring-source-legend span { display: flex; align-items: center; gap: 6px; }
.monitoring-source-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--ci-blue); }
.monitoring-source-legend i.is-source { background: var(--ci-teal); }
.monitoring-source-legend i.is-ai { background: var(--ci-violet); }
.monitoring-empty { min-height: 280px; margin: 0; border: 0; border-radius: 0; background: linear-gradient(180deg,#fff,#fafbfe); }
.monitoring-empty-orbit { position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.monitoring-empty-orbit i { position: absolute; inset: 0; border: 1px solid #d8e0ec; border-radius: 50%; }
.monitoring-empty-orbit i::after { content:""; position:absolute; right:4px; top:12px; width:9px; height:9px; border-radius:50%; background:var(--ci-blue); }
.monitoring-empty-orbit span { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--ci-blue); background:#edf2ff; font-size:19px; }
.monitoring-empty > small { color: var(--ci-blue); font-size: 9px; font-weight: 900; letter-spacing: .14em; }

.topic-detail-modal { width: min(1080px, calc(100vw - 32px)); }
.topic-detail { color: #1d2a40; }
.topic-detail-hero { display: grid; grid-template-columns: minmax(0,1fr) 130px; gap: 28px; padding: 8px 2px 24px; border-bottom: 1px solid #e5eaf1; }
.topic-detail-hero > div:first-child > span { color: var(--ci-teal); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.topic-detail-badges { display: flex; gap: 6px; margin: 12px 0; }
.topic-detail-badges b { padding: 5px 8px; border-radius: 999px; color: #815d18; background: #fff0cf; font-size: 9px; }
.topic-detail-badges b.is-confirmed { color: #087969; background: #dcf4ee; }
.topic-detail-badges b + b { color: #2f60d8; background: #eaf0ff; }
.topic-detail-hero h2 { margin: 0; color: #19263b; font-size: 28px; }
.topic-detail-hero p { max-width: 680px; margin-top: 10px; line-height: 1.65; }
.topic-detail-total { align-self: stretch; display: grid; place-content: center; justify-items: center; margin: 0; border-radius: 20px; color: #fff; background: linear-gradient(145deg,#1c3053,#2f64f5); }
.topic-detail-total strong { color: #fff; font-size: 38px; }
.topic-detail-total span, .topic-detail-total small { color: #dce7ff; }
.topic-proof-principle { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 20px 0; }
.topic-proof-principle div { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid #e3e8ef; border-radius: 13px; background: #fafbfd; }
.topic-proof-principle b { display: grid; place-items: center; width: 35px; height: 25px; border-radius: 7px; color: #2b5ddb; background: #eaf0ff; font-size: 9px; }
.topic-proof-principle span { color: #677389; font-size: 10px; }
.topic-score-parts { gap: 10px; }
.topic-score-part { position: relative; display: grid; gap: 8px; padding: 14px; overflow: hidden; }
.topic-score-part i { display: block; width: var(--score); height: 3px; border-radius: 99px; background: linear-gradient(90deg,var(--ci-blue),var(--ci-teal)); }
.topic-detail-evidence { margin-top: 25px; padding-top: 23px; border-top: 1px solid #e5eaf1; }
.topic-detail-evidence > div:first-child > span { color: var(--ci-teal); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.topic-detail-evidence h3 { margin: 6px 0; }
.topic-detail-evidence p { margin: 0 0 14px; color: #7b8799; font-size: 11px; }
.topic-detail-evidence-row .topic-evidence { grid-template-columns: 25px 72px minmax(0,1fr) auto; min-height: 65px; }
.topic-detail-evidence-row .topic-evidence img, .topic-detail-evidence-row .topic-evidence-fallback { width: 72px !important; height: 45px !important; }
.topic-admin-actions > span { width: 100%; color: #8a95a5; font-size: 9px; font-weight: 900; letter-spacing: .13em; }

.competitor-detail-v2 { grid-template-columns: minmax(0, 1.65fr) minmax(290px, .72fr); gap: 20px; }
.competitor-video-detail-head { align-items: flex-end; margin-bottom: 18px; padding: 4px 2px 18px; border-bottom: 1px solid #e2e7ef; }
.competitor-video-detail-head > div > p { margin: 7px 0 0; color: #7a8597; font-size: 11px; }
.competitor-detail-page-kicker { display: block; margin: 16px 0 5px; color: #2f63e9; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.competitor-detail-head-actions { display: flex; gap: 8px; }
.competitor-detail-head-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.competitor-detail-v2 .competitor-video-detail-left, .competitor-detail-v2 .competitor-video-detail-right { gap: 18px; }
.competitor-detail-hero-card { padding: 0; overflow: hidden; border-radius: 22px; }
.competitor-detail-hero-label { display: flex; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e8ecf2; background: #fafbfd; }
.competitor-detail-hero-label > span { color: #2c60e5; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.competitor-detail-hero-label > div { display: flex; gap: 6px; }
.competitor-detail-hero-label b { padding: 4px 7px; border-radius: 999px; color: #2d5dd6; background: #eaf0ff; font-size: 8px; }
.competitor-detail-hero-label b.is-ready { color: #087969; background: #dcf4ee; }
.competitor-detail-hero-body { display: grid; grid-template-columns: minmax(240px,.85fr) minmax(0,1.2fr); gap: 24px; padding: 20px; }
.competitor-detail-hero-body .competitor-video-detail-media { position: relative; width: 100%; min-height: 190px; border-radius: 15px; }
.competitor-video-detail-media > span { position: absolute; right: 10px; bottom: 10px; padding: 7px 9px; border-radius: 9px; color: #fff; background: rgba(15,23,42,.78); font-size: 9px; backdrop-filter: blur(5px); }
.competitor-video-detail-media.is-playing { position: relative; aspect-ratio: 16 / 9; background: #07111f; }
.competitor-video-detail-media.is-playing iframe { display: block; width: 100%; height: 100%; border: 0; }
.competitor-video-detail-media.is-playing > button { position: absolute; top: 10px; right: 10px; z-index: 2; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; padding: 7px 10px; color: #fff; background: rgba(6,15,27,.78); font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; backdrop-filter: blur(6px); }
.competitor-detail-hero-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.competitor-detail-channel-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #66748a; font-size: 10px; }
.competitor-detail-channel-line i { width: 3px; height: 3px; border-radius: 50%; background: #b1b8c4; }
.competitor-detail-hero-copy h2 { margin: 10px 0 8px; color: #17243a; font-size: 23px; line-height: 1.35; letter-spacing: -.025em; }
.competitor-detail-hero-copy > p { margin: 0; color: #7d889a; font-size: 11px; }
.competitor-detail-hero-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 20px; }
.competitor-detail-hero-metrics > div { display: grid; gap: 4px; padding: 10px; border: 1px solid #e7ebf1; border-radius: 11px; background: #fafbfd; }
.competitor-detail-hero-metrics small { color: #8791a1; font-size: 8px; }
.competitor-detail-hero-metrics strong { color: #26344b; font-size: 15px; }
.competitor-detail-hero-metrics strong em { margin-left: 2px; color: #8d96a5; font-size: 8px; font-style: normal; }
.competitor-detail-hero-metrics .is-accent { border-color: #cbd8ff; background: #f1f5ff; }
.competitor-detail-hero-metrics .is-accent strong { color: #2d5ee5; }
.competitor-detail-hero-metrics.competitor-detail-hero-metrics-five { grid-template-columns: repeat(5,minmax(0,1fr)); }
.competitor-detail-summary-card { display: grid; grid-template-columns: minmax(190px,.7fr) minmax(0,1.6fr); gap: 18px; padding: 20px; border: 1px solid #e3e8ef; border-radius: 19px; background: #fff; }
.competitor-detail-summary-card > div:first-child > span, .competitor-detail-trust-card > span, .competitor-detail-video-analysis-placeholder span { color: #2f63e9; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.competitor-detail-summary-card h2, .competitor-detail-trust-card h2, .competitor-detail-video-analysis-placeholder h2 { margin: 6px 0; color: #1d2a40; font-size: 16px; }
.competitor-detail-summary-card p, .competitor-detail-video-analysis-placeholder p { margin: 0; color: #7c8798; font-size: 10px; line-height: 1.55; }
.competitor-detail-status-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.competitor-detail-status-grid > div { display: grid; align-content: center; justify-items: center; gap: 7px; min-height: 92px; padding: 9px; border: 1px solid #e6eaf0; border-radius: 12px; text-align: center; }
.competitor-detail-status-grid > div > b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #7e8999; background: #f0f2f6; font-size: 10px; }
.competitor-detail-status-grid span { display: grid; gap: 3px; }
.competitor-detail-status-grid strong { color: #324057; font-size: 9px; }
.competitor-detail-status-grid small { color: #929baa; font-size: 7px; }
.competitor-detail-status-grid .is-done > b { color: #087969; background: #dcf4ee; }
.competitor-detail-status-grid .is-locked { background: #fafbfc; opacity: .75; }
.competitor-detail-trust-card { padding: 20px; border: 0; border-radius: 20px; color: #fff; background: linear-gradient(145deg,#17243d,#243b64); box-shadow: 0 14px 28px rgba(28,43,72,.15); }
.competitor-detail-trust-card > span { color: #7ee5d5; }
.competitor-detail-trust-card h2 { margin-bottom: 16px; color: #fff; }
.competitor-detail-trust-card > div { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.09); }
.competitor-detail-trust-card > div > b { display: grid; place-items: center; width: 38px; height: 25px; border-radius: 7px; color: #bcd1ff; background: rgba(98,143,255,.14); font-size: 8px; }
.competitor-detail-trust-card > div.is-ready > b { color: #8be7d5; background: rgba(35,193,164,.14); }
.competitor-detail-trust-card p { display: grid; gap: 2px; margin: 0; }
.competitor-detail-trust-card strong { color: #edf3ff; font-size: 10px; }
.competitor-detail-trust-card small { color: #93a2ba; font-size: 8px; }
.competitor-detail-video-analysis-placeholder { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px; border: 1px dashed #cbd5e3; border-radius: 17px; background: linear-gradient(135deg,#fbfcff,#f5f7fd); }
.competitor-detail-video-analysis-placeholder > b { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #7656df; background: #eee9ff; font-size: 8px; }
.competitor-transcript-card { padding: 22px; border-radius: 20px; box-shadow: 0 9px 24px rgba(30,44,69,.045); }
.competitor-transcript-head span { letter-spacing: .14em; }
.competitor-transcript-facts { display: flex; gap: 8px; margin: -4px 0 17px; }
.competitor-transcript-facts span { padding: 6px 9px; border-radius: 999px; color: #6d788b; background: #f1f4f8; font-size: 9px; }
.competitor-transcript-facts b { color: #2e5fdf; }
.competitor-transcript-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.competitor-transcript-columns > section { min-width: 0; padding: 15px; border: 1px solid #e5e9ef; border-radius: 15px; background: #fafbfd; }
.competitor-transcript-section-head { margin-bottom: 11px; }
.competitor-transcript-section-head > span { color: #2f63e9; font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.competitor-transcript-section-head h3 { margin: 4px 0 0; color: #26344b; font-size: 12px; }
.competitor-question-item { grid-template-columns: 43px minmax(0,1fr); padding: 10px; background: #fff; }
.competitor-question-item em { display: none; }
.competitor-question-item strong { font-size: 10px; }
.competitor-segment-list { display: grid; gap: 6px; }
.competitor-segment-list > a { display: grid; grid-template-columns: 38px minmax(0,1fr) 12px; gap: 8px; padding: 9px; border: 1px solid #e6eaf0; border-radius: 10px; color: inherit; background: #fff; text-decoration: none; }
.competitor-segment-list time { color: #2e61e3; font-size: 9px; font-weight: 900; }
.competitor-segment-list span { overflow: hidden; color: #546176; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.competitor-segment-list b { color: #98a2b1; font-size: 8px; }
.competitor-transcript-preview { display: grid; gap: 9px; padding: 13px; border-radius: 11px; background: #fff; }
.competitor-transcript-preview p { margin: 0; color: #536077; font-size: 10px; line-height: 1.65; }
.competitor-transcript-preview small { color: #929baa; font-size: 8px; }
.competitor-transcript-full-text {
  overflow-y: auto;
  max-height: 520px;
  padding: 16px 17px;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  background: #fff;
  color: #34445a;
  font-size: 11px;
  line-height: 1.8;
  white-space: pre-wrap;
  scrollbar-color: #b9c7d5 transparent;
  scrollbar-width: thin;
}
.competitor-video-memo-card { border-radius: 19px; }

@media (max-width: 1100px) {
  .monitoring-summary-grid { grid-template-columns: repeat(2,1fr); }
  .monitoring-status-strip { grid-template-columns: repeat(4,1fr); }
  .monitoring-status-title, .monitoring-status-strip > a { grid-column: span 2; }
  .competitor-detail-v2 { grid-template-columns: 1fr; }
  .competitor-video-detail-right { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .competitor-detail-recent-card { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .monitoring-hero { min-height: auto; padding: 30px 25px; }
  .monitoring-hero-side { min-width: 0; }
  .monitoring-hero-mark { display: none; }
  .monitoring-hero-copy h1 br { display: none; }
  .monitoring-insight-grid, .topic-candidate-grid { grid-template-columns: 1fr; }
  .monitoring-insight-grid article { border-right: 0; border-bottom: 1px solid #edf0f5; }
  .monitoring-insight-grid article:last-child { border-bottom: 0; }
  .topic-discovery-empty { grid-template-columns: 80px minmax(0,1fr); }
  .topic-empty-rule { grid-column: 1 / -1; }
  .monitoring-video-list { overflow-x: visible; }
  .monitoring-video-open { grid-template-columns: 40px 105px minmax(0,1fr) 18px; min-width: 0; padding: 14px; gap: 10px; }
  .monitoring-metrics { display: none; }
  .competitor-detail-hero-body { grid-template-columns: 1fr; }
  .competitor-detail-summary-card { grid-template-columns: 1fr; }
  .competitor-transcript-columns { grid-template-columns: 1fr; }
  .competitor-transcript-head { align-items: stretch; flex-direction: column; }
  .competitor-transcript-actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .monitoring-hero { display: grid; }
  .monitoring-hero-side { align-items: stretch; }
  .monitoring-hero-actions { margin-top: 20px; }
  .monitoring-summary-grid { grid-template-columns: 1fr 1fr; }
  .monitoring-summary-grid article { min-height: 120px; padding: 15px; }
  .monitoring-summary-grid article > span { display: none; }
  .monitoring-status-strip { grid-template-columns: repeat(2,1fr); }
  .monitoring-status-title, .monitoring-status-strip > a { grid-column: 1 / -1; }
  .topic-discovery { padding: 20px; }
  .topic-discovery-empty { grid-template-columns: 1fr; }
  .topic-empty-visual { display: none; }
  .monitoring-video-open { grid-template-columns: 34px 82px minmax(0,1fr); min-width: 0; }
  .monitoring-row-arrow { display: none; }
  .monitoring-copy span { display: none; }
  .topic-proof-principle, .topic-score-parts { grid-template-columns: repeat(2,1fr); }
  .topic-detail-hero { grid-template-columns: 1fr; }
  .topic-detail-total { min-height: 110px; }
  .competitor-detail-hero-metrics,
  .competitor-detail-hero-metrics.competitor-detail-hero-metrics-five,
  .competitor-detail-status-grid { grid-template-columns: repeat(2,1fr); }
  .competitor-video-detail-right { grid-template-columns: 1fr; }
}

/* Money Report cast management — calendar-first workboard */
.cast-management-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 1440px; margin: 0 auto; padding: 18px 24px 24px; color: #173b3d; }
.cast-management-view-tabs, .cast-summary-grid, .cast-concentration-notice, .cast-category-grid, .cast-detail-grid, .cast-plan-board { grid-column: 1 / -1; }
.cast-management-head { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border: 1px solid #dce6e2; border-radius: 20px; background: #fff; box-shadow: 0 7px 18px rgba(25, 71, 67, .045); }
.cast-management-head h2, .cast-management-head p, .cast-calendar-panel h3, .cast-calendar-panel p, .cast-candidate-tray h3, .cast-candidate-tray p { margin: 0; }
.cast-management-head h2 { margin-top: 2px; color: #103f42; font-size: 21px; letter-spacing: -.04em; }
.cast-management-eyebrow { color: #16816f; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.cast-management-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cast-month-controls, .cast-management-view-tabs { display: flex; align-items: center; gap: 8px; }
.cast-month-controls { padding: 5px; border: 1px solid #d9e6e1; border-radius: 13px; background: rgba(255,255,255,.75); }
.cast-month-controls strong { min-width: 104px; color: #245758; text-align: center; }
.cast-management-view-tabs { justify-self: start; padding: 5px; border: 1px solid #dfe7e3; border-radius: 13px; background: #f5f8f6; }
.cast-management-view-tabs button { min-height: 35px; padding: 0 17px; border: 0; border-radius: 9px; background: transparent; color: #69756f; font: inherit; font-weight: 800; cursor: pointer; }
.cast-management-view-tabs button.active { background: #174f4e; color: #fff; box-shadow: 0 4px 10px rgba(21, 79, 78, .2); }

.cast-calendar-panel { grid-column: 1 / -1; overflow: hidden; border: 1px solid #dce6e2; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(25, 71, 67, .06); }
.cast-calendar-panel > header, .cast-candidate-tray > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid #e8eeeb; background: linear-gradient(90deg, #fcfffd, #f6faf8); }
.cast-candidate-tray > header { display: grid; gap: 5px; }
.cast-candidate-tray > header h3 { display: flex; align-items: center; gap: 4px; }
.cast-calendar-head-actions { display: flex; align-items: center; gap: 8px; }
.cast-confirmed-list-button { min-height: 30px; padding: 0 10px; border-color: #cfe0da; color: #275c57; font-size: 11px; white-space: nowrap; }
.cast-calendar-panel h3, .cast-candidate-tray h3 { color: #174f4e; font-size: 16px; }
.cast-calendar-panel p, .cast-candidate-tray p { margin-top: 5px; color: #718078; font-size: 12px; }
.cast-calendar-month { display: inline-flex; align-items: center; min-height: 29px; padding: 0 11px; border: 1px solid #cfe2d8; border-radius: 99px; background: #e9f6ef; color: #197060; font-size: 11px; font-weight: 850; white-space: nowrap; }
.cast-week-row { overflow: hidden; border: 1px solid #e4ebe7; border-radius: 14px; }
.cast-calendar-panel .cast-week-row { margin: 14px; }
.cast-week-row:nth-of-type(even) { background: #fbfdfc; }
.cast-week-row > header { padding: 8px 12px; border-bottom: 1px solid #e8eeeb; color: #58716a; font-size: 11px; font-weight: 850; }
.cast-week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; padding: 10px; }
.cast-date-cell { display: grid; align-content: start; gap: 6px; min-height: 118px; padding: 10px; border: 1px solid #e5ece8; border-radius: 11px; background: #fff; }
.cast-date-cell.is-outside { opacity: .48; background: #f7f8f6; }
.cast-date-label { display: inline-flex; width: max-content; min-height: 25px; align-items: center; gap: 6px; border: 1px solid #e0e9e5; border-radius: 9px; padding: 3px 7px 3px 8px; background: linear-gradient(145deg, #f8fbfa, #f1f6f4); color: #49645d; box-shadow: 0 2px 6px rgba(39, 83, 75, .04); }
.cast-date-label > strong { font-size: 14px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.cast-date-label > span { border-left: 1px solid #d6e1dc; padding-left: 6px; color: #75867f; font-size: 9px; font-weight: 850; line-height: 1; white-space: nowrap; }
.cast-date-cell.is-sunday .cast-date-label { border-color: #f2d9dc; background: linear-gradient(145deg, #fffafa, #fff2f3); }
.cast-date-cell.is-sunday .cast-date-label > strong, .cast-date-cell.is-sunday .cast-date-label > span { color: #c44f5a; }
.cast-date-cell.is-saturday .cast-date-label { border-color: #d9e4f3; background: linear-gradient(145deg, #fafcff, #f0f5fc); }
.cast-date-cell.is-saturday .cast-date-label > strong, .cast-date-cell.is-saturday .cast-date-label > span { color: #4774a9; }
.cast-confirmed-event { position: relative; display: grid; gap: 2px; padding: 15px 8px 8px; border-left: 3px solid var(--cast-category-color, #188b79); border-radius: 8px; background: color-mix(in srgb, var(--cast-category-color, #188b79) 13%, white); color: #284b4a; }
.cast-confirmed-event::before { position: absolute; top: 4px; left: 8px; color: #177564; content: "확정"; font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.cast-confirmed-event strong, .cast-draft-event strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cast-confirmed-event span { overflow: hidden; color: #687991; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.cast-confirmed-event small { color: #718078; font-size: 9px; }
.cast-confirmed-list-panel[hidden] { display: none !important; }
.cast-confirmed-list-panel { position: fixed; z-index: 75; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(18, 53, 51, .23); backdrop-filter: blur(5px); }
.cast-confirmed-list-dialog { width: min(980px, calc(100vw - 56px)); max-height: min(760px, calc(100vh - 56px)); overflow: auto; border: 1px solid rgba(204, 224, 216, .92); border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(15, 49, 47, .26), 0 2px 0 rgba(255,255,255,.85) inset; }
.cast-confirmed-list-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 23px 26px 18px; border-bottom: 1px solid #e8eeeb; background: radial-gradient(circle at 0 0, rgba(67, 174, 147, .13), transparent 38%), linear-gradient(105deg, #f4faf7, #fff); }
.cast-confirmed-list-dialog h3, .cast-confirmed-list-dialog p { margin: 0; }
.cast-confirmed-list-dialog h3 { margin-top: 3px; color: #133f3d; font-size: 20px; letter-spacing: -.035em; }
.cast-confirmed-list-dialog > header p { margin-top: 5px; color: #718078; font-size: 12px; }
.cast-confirmed-list-eyebrow { color: #1b8b73; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.cast-confirmed-list-close { min-height: 32px; padding: 0 12px; border: 1px solid #d4e3dd; border-radius: 10px; background: rgba(255,255,255,.82); color: #45665e; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(41, 89, 78, .06); }
.cast-confirmed-list-close:hover { border-color: #9fcfc1; color: #176d5b; background: #f7fcfa; }
.cast-confirmed-list-summary { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 24px; border-bottom: 1px solid #edf1ee; background: #fbfdfc; }
.cast-confirmed-list-summary span { padding: 5px 8px; border-radius: 99px; background: #eaf6ef; color: #287362; font-size: 10px; font-weight: 800; }
.cast-confirmed-list-summary .uncategorized { background: #fff3e3; color: #996321; }
.cast-confirmed-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 20px 24px 22px; background: #fff; }
.cast-confirmed-category-card { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto 16px; gap: 9px; align-items: center; min-height: 68px; padding: 11px 12px; border: 1px solid #dfe9e5; border-radius: 15px; background: linear-gradient(145deg, #fff, #f9fcfb); color: #395b55; text-align: left; font: inherit; cursor: pointer; box-shadow: 0 7px 18px rgba(37, 79, 69, .04); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.cast-confirmed-category-card > i { width: 5px; height: 36px; border-radius: 99px; background: var(--cast-category-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cast-category-color) 11%, white); }
.cast-confirmed-category-card > span { overflow: hidden; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.cast-confirmed-category-card > strong { color: var(--cast-category-color); font-size: 19px; letter-spacing: -.04em; }.cast-confirmed-category-card > strong small { margin-left: 2px; color: #87958f; font-size: 9px; letter-spacing: 0; }
.cast-confirmed-category-card > b { color: #9baca5; font-size: 20px; font-weight: 500; transition: transform .16s ease; }
.cast-confirmed-category-card:hover { border-color: color-mix(in srgb, var(--cast-category-color) 40%, #dfe9e5); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37, 79, 69, .09); }
.cast-confirmed-category-card[aria-pressed="true"] { border-color: color-mix(in srgb, var(--cast-category-color) 54%, white); background: color-mix(in srgb, var(--cast-category-color) 7%, white); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cast-category-color) 10%, transparent), 0 11px 25px rgba(37, 79, 69, .09); }.cast-confirmed-category-card[aria-pressed="true"] > b { color: var(--cast-category-color); transform: rotate(90deg); }
.cast-confirmed-category-panels { border-top: 1px solid #e8efec; background: #fbfdfc; }
.cast-confirmed-category-panel[hidden] { display: none !important; }
.cast-confirmed-category-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 24px 12px; }.cast-confirmed-category-panel > header > div { display: flex; align-items: center; gap: 8px; color: #315853; }.cast-confirmed-category-panel > header i { width: 8px; height: 8px; border-radius: 50%; background: var(--cast-category-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cast-category-color) 12%, white); }.cast-confirmed-category-panel > header strong { font-size: 13px; }.cast-confirmed-category-panel > header > span { padding: 4px 8px; border-radius: 99px; background: #e9f4ef; color: #35705f; font-size: 10px; font-weight: 850; }
.cast-confirmed-category-panel .cast-confirmed-list-rows { max-height: 360px; overflow: auto; border-top: 1px solid #edf2ef; background: #fff; }
.cast-confirmed-list-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(120px, .9fr) minmax(110px, .8fr) minmax(180px, 1.3fr); gap: 16px; align-items: center; padding: 15px 24px; border-bottom: 1px solid #edf1ee; }
.cast-confirmed-list-row strong { color: #264b49; font-size: 12px; }
.cast-confirmed-list-row small { display: block; overflow: hidden; margin-top: 3px; color: #77857f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.cast-confirmed-list-row p { overflow: hidden; color: #62736d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cast-confirmed-list-category { display: inline-flex; width: max-content; max-width: 100%; padding: 5px 7px; border-radius: 99px; background: color-mix(in srgb, var(--cast-category-color) 13%, white); color: #315a57; font-size: 10px; font-weight: 800; }
.cast-confirmed-list-empty { padding: 34px 24px; color: #718078; font-size: 12px; text-align: center; }
.cast-draft-list { display: grid; gap: 5px; }
.cast-draft-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px 5px 4px 7px; border: 1px solid #c8ded5; border-left: 3px solid var(--cast-category-color, #4f8e7d); border-radius: 8px; background: #f4f8f6; color: #365d55; }
.cast-draft-event-detail { display: grid; min-width: 0; gap: 2px; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-draft-event-category { overflow: hidden; color: var(--cast-category-color, #4f8e7d); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.cast-draft-event-detail:hover strong, .cast-draft-event-detail:focus-visible strong { color: #0e7462; text-decoration: underline; text-underline-offset: 3px; }
.cast-draft-event-detail:focus-visible { outline: 2px solid #2a9986; outline-offset: 2px; border-radius: 3px; }
.cast-draft-event > button:not(.cast-draft-event-detail) { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: #e2eee8; color: #4e776b; cursor: pointer; font: inherit; line-height: 1; }
.cast-draft-event > button:not(.cast-draft-event-detail):hover { background: #cfe1d8; color: #245e51; }

.cast-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cast-summary-grid article { position: relative; display: grid; gap: 5px; overflow: hidden; min-height: 100px; padding: 19px 20px 22px; border: 1px solid #dfe8e4; border-radius: 16px; background: #fff; box-shadow: 0 7px 18px rgba(45, 63, 57, .045); }
.cast-summary-grid article::after { position: absolute; right: 20px; bottom: 10px; left: 20px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, #287b75 0 62%, #e6eee9 62%); content: ""; }
.cast-summary-grid article:nth-child(2)::after { background: linear-gradient(90deg, #b8793e 0 44%, #f3eadf 44%); }
.cast-summary-grid strong { color: #123f41; font-size: 29px; letter-spacing: -.04em; }
.cast-summary-grid span { color: #6b7771; font-size: 12px; font-weight: 750; }
.cast-concentration-notice { padding: 13px 16px; border: 1px solid #ead4ae; border-radius: 14px; background: #fffaf0; color: #805b20; font-size: 13px; font-weight: 700; }
.cast-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cast-category-card { display: grid; gap: 12px; min-height: 122px; padding: 16px; border: 1px solid #e0e9e5; border-top: 4px solid var(--cast-category-color); border-radius: 16px; background: #fff; box-shadow: 0 7px 18px rgba(45, 63, 57, .035); }
.cast-category-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #245456; font-size: 13px; }
.cast-category-card header span { display: grid; min-width: 23px; min-height: 23px; place-items: center; border-radius: 99px; background: color-mix(in srgb, var(--cast-category-color) 14%, white); color: var(--cast-category-color); font-size: 11px; font-weight: 850; }
.cast-category-card small { color: #89918c; font-size: 11px; }

.cast-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cast-unscheduled-card { display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(34, 62, 58, .04); }
.cast-unscheduled-card { border: 1px solid #dce7e1; }
.cast-unscheduled-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cast-unscheduled-card strong { color: #294f4b; font-size: 13px; }
.cast-unscheduled-card > div, .cast-uncategorized-warning > div { display: grid; gap: 10px; }
.cast-uncategorized-warning { display: grid; gap: 12px; padding: 18px; border: 1px solid #eed4a9; border-radius: 16px; background: #fffaf0; box-shadow: 0 8px 20px rgba(34, 62, 58, .04); }
.cast-uncategorized-warning strong { color: #805b20; font-size: 13px; }
.cast-uncategorized-warning p { margin: 0; color: #78613a; font-size: 12px; line-height: 1.5; }
.cast-person-card { display: grid; gap: 12px; padding: 15px; border: 1px solid #dce8e3; border-radius: 16px; background: #fff; box-shadow: 0 6px 15px rgba(25, 71, 67, .045); }
.cast-person-card header, .cast-person-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cast-person-card-open-detail, .cast-plan-candidate-detail { display: grid; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-person-card-open-detail { gap: 3px; }.cast-person-card-open-detail:hover strong, .cast-plan-candidate-detail:hover strong, .cast-confirmed-event [data-cast-open-detail]:hover, .cast-confirmed-list-row [data-cast-open-detail]:hover { color: #0a7d70; text-decoration: underline; }.cast-person-card-open-detail:focus-visible, .cast-plan-candidate-detail:focus-visible, .cast-confirmed-event [data-cast-open-detail]:focus-visible, .cast-confirmed-list-row [data-cast-open-detail]:focus-visible { outline: 2px solid #0b9aad; outline-offset: 3px; border-radius: 4px; }
.cast-person-card header strong { color: #173f3d; font-size: 14px; }
.cast-person-card header span { overflow: hidden; color: #718078; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cast-person-card header small { padding: 4px 7px; border-radius: 99px; background: #e8f5ef; color: #187361; font-size: 10px; font-weight: 800; white-space: nowrap; }
.cast-person-card dl { display: grid; gap: 7px; margin: 0; }
.cast-person-card dl > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
.cast-person-card dt { color: #82908a; font-size: 10px; font-weight: 800; }
.cast-person-card dd { overflow: hidden; margin: 0; color: #48615c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cast-person-card footer { padding-top: 11px; border-top: 1px solid #edf1ee; }
.cast-person-card footer button { min-height: 31px; padding: 0 10px; font-size: 11px; }

.cast-plan-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.cast-plan-layout { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.cast-plan-layout.is-candidate-tray-open { grid-template-columns: minmax(232px, .28fr) minmax(0, 1fr); }
.cast-plan-layout .cast-calendar-panel { grid-column: auto; }
.cast-candidate-tray { display: none; gap: 12px; align-self: start; padding-bottom: 16px; overflow: hidden; border: 1px solid #d6e5df; border-radius: 20px; background: linear-gradient(180deg, #f8fcfa, #fff 22%); box-shadow: 0 14px 34px rgba(31, 74, 64, .08); }
.cast-plan-layout.is-candidate-tray-open .cast-candidate-tray { display: grid; }
.cast-candidate-tray > header { display: grid; gap: 5px; padding: 18px 18px 14px; border-bottom: 1px solid #e4eee9; background: radial-gradient(circle at 100% 0, rgba(32, 158, 128, .13), transparent 46%); }
.cast-candidate-tray header h3 span { display: inline-grid; min-width: 19px; min-height: 19px; margin-left: 0; place-items: center; border-radius: 99px; background: #e8f4ee; color: #1d725f; font-size: 10px; vertical-align: middle; }
.cast-candidate-tray .cast-uncategorized-warning { margin: 0 18px; }
.cast-candidate-group { display: grid; margin: 0 14px; overflow: hidden; border: 1px solid #dce9e3; border-radius: 14px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
.cast-candidate-group[open] { border-color: color-mix(in srgb, var(--cast-category-color) 30%, #dce9e3); box-shadow: 0 9px 22px rgba(39, 82, 71, .08); }
.cast-candidate-group summary, .cast-plan-uncategorized summary { cursor: pointer; list-style: none; }.cast-candidate-group summary::-webkit-details-marker, .cast-plan-uncategorized summary::-webkit-details-marker { display: none; }
.cast-candidate-group summary { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto 14px; gap: 9px; align-items: center; min-height: 45px; padding: 8px 11px; color: #4f6962; font-size: 11px; letter-spacing: .02em; background: linear-gradient(100deg, color-mix(in srgb, var(--cast-category-color) 7%, white), #fff 62%); }
.cast-candidate-group summary > i { width: 5px; height: 25px; border-radius: 99px; background: var(--cast-category-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cast-category-color) 10%, white); }
.cast-candidate-group summary > strong { overflow: hidden; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.cast-candidate-group summary span { display: inline-grid; min-width: 21px; min-height: 21px; padding: 0 5px; place-items: center; border-radius: 99px; background: color-mix(in srgb, var(--cast-category-color) 12%, white); color: var(--cast-category-color); font-size: 9px; font-weight: 900; }
.cast-candidate-group summary::after { color: #72877f; content: "⌄"; font-size: 14px; transition: transform .18s ease; }.cast-candidate-group[open] summary::after { color: var(--cast-category-color); transform: rotate(180deg); }
.cast-candidate-group > div { display: grid; gap: 7px; padding: 8px; border-top: 1px solid #e8efec; background: #fbfdfc; }
.cast-plan-calendar-title-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cast-candidate-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 1px solid #148676; border-radius: 10px; background: linear-gradient(135deg, #168e7c, #116f69); color: #fff; font-size: 11px; font-weight: 850; white-space: nowrap; box-shadow: 0 7px 16px rgba(17, 111, 105, .22); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }.cast-candidate-toggle:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 9px 20px rgba(17, 111, 105, .28); }.cast-candidate-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.cast-candidate-toggle span { display: inline-grid; min-width: 18px; min-height: 18px; place-items: center; margin-left: 1px; border-radius: 99px; background: rgba(255,255,255,.18); color: #fff; font-size: 9px; }.cast-candidate-toggle[aria-expanded="true"] { background: linear-gradient(135deg, #105c5b, #0b4648); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(9, 70, 72, .25); }
.cast-candidate-empty { display: grid; gap: 5px; margin: 0 14px; padding: 20px; border: 1px dashed #c7d2cb; border-radius: 14px; background: #fafcf9; color: #405d55; text-align: left; }
.cast-candidate-empty p { margin: 0; color: #75827b; font-size: 12px; line-height: 1.5; }
.cast-plan-candidate { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto 23px; gap: 8px; align-items: center; min-height: 57px; padding: 7px; border: 1px solid transparent; border-radius: 11px; background: #fbfdfc; color: #294f4b; cursor: grab; }
.cast-plan-candidate:hover { border-color: #cde1d8; background: #f1f8f4; }
.cast-plan-candidate.dragging { opacity: .45; }
.cast-plan-candidate > i { width: 4px; height: 35px; border-radius: 99px; background: var(--cast-category-color, #188b79); }
.cast-plan-candidate > div, .cast-plan-candidate-detail { min-width: 0; }
.cast-plan-candidate strong, .cast-plan-candidate span, .cast-plan-candidate small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-plan-candidate strong { color: #284d49; font-size: 12px; }
.cast-plan-candidate span { margin-top: 2px; color: #6d7c76; font-size: 9px; }
.cast-plan-candidate small { margin-top: 2px; color: #9a7463; font-size: 9px; }
.cast-plan-candidate b { padding: 4px 5px; border-radius: 6px; background: #fff2e5; color: #a06a2a; font-size: 8px; font-weight: 850; white-space: nowrap; }
.cast-plan-candidate b.placed { background: #eeeafa; color: #665087; }
.cast-plan-candidate .icon-button { width: 23px; min-width: 23px; height: 23px; padding: 0; border-color: transparent; color: #668078; font-size: 15px; }
.cast-plan-candidate .icon-button:hover { border-color: #d4e2dc; background: #fff; }
.cast-confirmed-event [data-cast-open-detail], .cast-confirmed-list-row [data-cast-open-detail] { display: block; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 800; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.modal.cast-candidate-detail-modal { width: min(700px, calc(100vw - 32px)); }.cast-candidate-detail-modal .modal-head { align-items: flex-start; }.cast-candidate-detail-summary { margin-bottom: 15px; }.cast-candidate-detail-summary span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 99px; background: color-mix(in srgb, var(--cast-category-color) 14%, white); color: var(--cast-category-color); font-size: 11px; font-weight: 850; }.cast-candidate-detail-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e4eeea; }.cast-candidate-detail-tabs button { flex: 1; padding: 10px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #758981; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }.cast-candidate-detail-tabs button[aria-selected="true"] { border-color: #1b896f; color: #176b59; }.cast-candidate-detail-tabs button:focus-visible { outline: 2px solid #0b9aad; outline-offset: -2px; }.cast-detail-tab-panel { min-height: 180px; padding-top: 18px; }.cast-candidate-detail-list { display: grid; gap: 10px; margin: 0; }.cast-candidate-detail-list > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf2ef; }.cast-candidate-detail-list dt { color: #81938c; font-size: 11px; font-weight: 800; }.cast-candidate-detail-list dd { margin: 0; color: #365d55; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }.cast-candidate-detail-links { display: grid; gap: 7px; margin-top: 15px; }.cast-candidate-detail-links strong { color: #526d65; font-size: 11px; }.cast-candidate-detail-links a { color: #0b806e; font-size: 12px; font-weight: 750; }.cast-candidate-progress-list { display: grid; gap: 10px; }.cast-candidate-progress-list article { padding: 11px 13px; border-left: 3px solid #8fcdbc; border-radius: 0 10px 10px 0; background: #f7fbf9; }.cast-candidate-progress-list time { color: #638179; font-size: 10px; font-weight: 800; }.cast-candidate-progress-list p { margin: 5px 0 0; color: #365d55; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }.cast-detail-empty { color: #74877f; font-size: 12px; }
.cast-plan-uncategorized { display: grid; gap: 8px; margin: 0 14px; padding: 0; overflow: hidden; border: 1px solid #ead6b5; border-radius: 14px; background: #fffaf0; }
.cast-plan-uncategorized summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 8px; align-items: center; min-height: 43px; padding: 8px 11px; color: #7e5922; font-size: 11px; font-weight: 800; background: linear-gradient(100deg, #fff5e4, #fffaf2); }.cast-plan-uncategorized summary span { display: inline-grid; min-width: 20px; min-height: 20px; place-items: center; margin-left: 5px; border-radius: 99px; background: #f2ddba; color: #845b1f; font-size: 9px; }.cast-plan-uncategorized summary::after { color: #9d7b48; content: "⌄"; font-size: 14px; transition: transform .18s ease; }.cast-plan-uncategorized[open] summary::after { transform: rotate(180deg); }.cast-plan-uncategorized > p { margin: 0; padding: 0 11px; color: #8c744d; font-size: 10px; line-height: 1.45; }
.cast-plan-uncategorized > div { display: grid; gap: 5px; padding: 0 8px 8px; }.cast-plan-uncategorized button { display: grid; gap: 2px; padding: 7px; border: 1px solid rgba(221, 193, 146, .35); border-radius: 9px; background: rgba(255,255,255,.72); color: #6d552e; text-align: left; font: inherit; cursor: pointer; }.cast-plan-uncategorized button:hover { border-color: #d9ba83; background: #fff; }
.cast-plan-uncategorized button strong { font-size: 10px; }.cast-plan-uncategorized button span { overflow: hidden; color: #947a50; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cast-plan-drop-target { position: relative; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.cast-plan-drop-target.drag-over { border-color: #65a894; background: #f1faf5; box-shadow: inset 0 0 0 1px #65a894; }
.cast-plan-drop-preview { position: absolute; z-index: 3; right: 6px; bottom: 6px; max-width: calc(100% - 12px); overflow: hidden; border: 1px dashed #6db8a4; border-radius: 7px; padding: 5px 7px; background: rgba(238, 250, 245, .96); color: #236f5d; font-size: 9px; font-weight: 800; pointer-events: none; text-overflow: ellipsis; white-space: nowrap; }
.cast-draft-candidate { display: grid; gap: 2px; width: 100%; padding: 10px 11px; border: 1px solid #e0e5df; border-radius: 10px; background: #fff; color: #284e4d; text-align: left; font: inherit; cursor: pointer; }
.cast-draft-candidate:hover, .cast-draft-candidate.selected { border-color: #6fa59c; background: #f2f8f4; box-shadow: 0 3px 10px rgba(47, 105, 96, .1); }
.cast-draft-candidate strong { font-size: 12px; }.cast-draft-candidate span { color: #718197; font-size: 10px; }
.cast-plan-date { display: grid; align-content: start; gap: 5px; min-height: 32px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.cast-plan-date:focus-visible { outline: 2px solid #287b75; outline-offset: 2px; border-radius: 4px; }
.cast-confirmed-hint { color: #956e33; font-size: 9px; font-weight: 750; }
.modal.cast-category-modal { width: min(560px, calc(100vw - 32px)); }
.cast-category-modal .modal-body { display: grid; gap: 14px; }
.cast-category-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cast-category-option { min-height: 42px; padding: 9px 12px; border: 1px solid #d5e0e9; border-radius: 9px; background: #fff; color: #334b67; font: inherit; font-size: 13px; font-weight: 750; text-align: left; cursor: pointer; }
.cast-category-option i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; }
.cast-category-option:hover { border-color: #68b9c7; background: #f4fcfc; }
.cast-category-option.selected { border-color: #0b9aad; background: #eaf9fa; color: #087988; box-shadow: inset 0 0 0 1px #0b9aad; }
.cast-category-option:focus-visible { outline: 2px solid #0b9aad; outline-offset: 2px; }
.cast-category-custom-card { display: grid; gap: 14px; padding: 18px; border: 1px solid #c9e5da; border-radius: 16px; background: linear-gradient(135deg, #f5fbf8 0%, #fbfefd 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.cast-category-custom-card-head { display: flex; align-items: center; gap: 9px; }.cast-category-custom-card-head > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 9px; background: #dff3ea; color: #167060; font-size: 17px; font-weight: 700; }.cast-category-custom-card-head > div { display: grid; gap: 2px; }.cast-category-custom-card-head strong { color: #174f45; font-size: 14px; }.cast-category-custom-card-head small { color: #78928a; font-size: 11px; font-weight: 650; }
.cast-category-custom-name, .cast-category-custom-color { display: grid; gap: 7px; }.cast-category-custom-name > span, .cast-category-custom-color > span { color: #537167; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.cast-category-custom-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }.cast-category-custom-field input { min-width: 0; height: 42px; padding: 0 13px; border: 1px solid #b9d8cc; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(34, 85, 71, .04); }.cast-category-custom-field input:focus { border-color: #2d9985; outline: 3px solid rgba(45, 153, 133, .14); }.cast-category-custom-field .primary-button { min-height: 42px; padding: 0 16px; border-radius: 10px; box-shadow: 0 7px 14px rgba(18, 119, 101, .16); white-space: nowrap; }
.cast-category-custom-palette { display: flex; flex-wrap: wrap; gap: 8px; }.cast-category-custom-palette button { width: 24px; height: 24px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--cast-palette-color); box-shadow: 0 0 0 1px #c9ddd5; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }.cast-category-custom-palette button:hover { transform: translateY(-1px); }.cast-category-custom-palette button.selected { box-shadow: 0 0 0 2px #176c59, 0 3px 7px rgba(23, 108, 89, .18); }
.cast-category-color-details { display: grid; gap: 12px; border-top: 1px solid #e2ece7; padding-top: 15px; }.cast-category-color-details-head { display: grid; gap: 3px; }.cast-category-color-details-head strong { color: #365e55; font-size: 13px; }.cast-category-color-details-head small { color: #7b9189; font-size: 11px; }
.cast-category-color-editor { display: grid; gap: 8px; }
.cast-category-editor-row { display: grid; grid-template-columns: minmax(105px, .7fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid #e0ebe5; border-radius: 11px; background: #fbfdfc; }
.cast-category-editor-name { display: flex; align-items: center; min-width: 0; gap: 7px; color: #43645b; font-size: 12px; font-weight: 800; }.cast-category-editor-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.cast-category-editor-name small { color: #84968f; font-size: 10px; font-weight: 700; }
.cast-category-palette { display: flex; flex-wrap: wrap; gap: 6px; }.cast-category-palette button { width: 20px; height: 20px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--cast-palette-color); box-shadow: 0 0 0 1px rgba(29, 69, 58, .18); cursor: pointer; }.cast-category-palette button.selected { border-color: #fff; box-shadow: 0 0 0 2px #174f4e; }
.cast-category-delete-button { padding: 3px 6px; border: 1px solid #edc9c9; border-radius: 6px; background: #fffafa; color: #b34747; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }.cast-category-delete-button:hover { border-color: #d88989; background: #fff2f2; }
.modal.cast-planning-modal { width: min(820px, calc(100vw - 32px)); }
.cast-planning-modal .modal-head { align-items: flex-start; }
.cast-planning-modal .modal-body { display: grid; gap: 12px; }
.cast-planning-date-picker { display: grid; gap: 10px; }
.cast-planning-date-picker .cast-week-row { margin: 0; }
.cast-planning-date-picker .cast-week-days { padding: 7px; }
.cast-planning-date-picker .cast-date-cell { min-height: 76px; padding: 6px; }
.cast-planning-date-picker .cast-plan-date { min-height: 58px; padding: 7px; border: 1px solid transparent; border-radius: 6px; background: #f8fbfc; }
.cast-planning-date-picker .cast-plan-date:hover:not(:disabled) { border-color: #78c2cd; background: #edfafa; }
.cast-planning-date-picker .cast-plan-date.selected { border-color: #0b9aad; background: #dff6f7; box-shadow: inset 0 0 0 1px #0b9aad; }
.cast-planning-date-picker .cast-plan-date:disabled { cursor: default; }

/* Category-first weekly programming slots */
.cast-slot-tray { max-height: calc(100vh - 150px); overflow-y: auto; }
.cast-slot-tray > header { position: sticky; z-index: 4; top: 0; }
.cast-slot-create-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.cast-slot-create-actions button { min-height: 34px; padding-inline: 8px; font-size: 10px; }
.cast-slot-week { display: grid; gap: 7px; margin: 0 12px; padding: 10px; border: 1px solid #e1ebe6; border-radius: 13px; background: rgba(255,255,255,.84); }
.cast-slot-week > header, .cast-week-row > header:has(span) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cast-slot-week > header strong { color: #2b6159; font-size: 11px; }
.cast-slot-week > header span, .cast-week-row > header span { padding: 3px 6px; border-radius: 99px; background: #edf5f1; color: #648078; font-size: 8px; font-weight: 800; }
.cast-slot-week > div { display: grid; gap: 7px; }
.cast-slot-week > div > p { margin: 0; padding: 8px; border: 1px dashed #d7e3dd; border-radius: 9px; color: #8a9892; font-size: 9px; line-height: 1.45; }
.cast-slot-card { display: grid; gap: 7px; padding: 9px; border: 1px solid #d9e6e0; border-left: 4px solid var(--cast-category-color, #188b79); border-radius: 11px; background: #fff; box-shadow: 0 4px 12px rgba(30, 73, 63, .05); cursor: grab; }
.cast-slot-card:hover { border-color: color-mix(in srgb, var(--cast-category-color) 48%, #d9e6e0); box-shadow: 0 7px 17px rgba(30, 73, 63, .09); }
.cast-slot-card.dragging { opacity: .45; }
.cast-slot-card.is-emergency { border-top-color: #e29154; background: linear-gradient(135deg, #fffaf4, #fff); }
.cast-slot-card > header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cast-slot-card > header span { color: var(--cast-category-color, #188b79); font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.cast-slot-card > header b { overflow: hidden; padding: 3px 5px; border-radius: 99px; background: #edf5f1; color: #5e776f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.cast-slot-card > button { display: grid; min-width: 0; gap: 3px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-slot-card > button strong { overflow: hidden; color: #173f3c; font-size: 13px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.cast-slot-card > button span { overflow: hidden; color: #526d66; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.cast-slot-card > button small { color: #81918b; font-size: 9px; }
.cast-slot-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; border-top: 1px solid #edf2ef; padding-top: 7px; }
.cast-slot-card > footer span { overflow: hidden; color: #778b84; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.cast-slot-card > footer button { flex: 0 0 auto; padding: 4px 6px; border: 1px solid #cde2da; border-radius: 6px; background: #f4faf7; color: #1e705f; font: inherit; font-size: 8px; font-weight: 850; cursor: pointer; }
.cast-date-slot-list { display: grid; gap: 5px; }
.cast-slot-card.is-compact { gap: 4px; padding: 6px; border-left-width: 3px; border-radius: 8px; box-shadow: none; }
.cast-slot-card.is-compact > header span { font-size: 7px; }
.cast-slot-card.is-compact > header b { max-width: 66px; font-size: 7px; }
.cast-slot-card.is-compact > button strong { font-size: 10px; }
.cast-slot-card.is-compact > button span, .cast-slot-card.is-compact > button small { font-size: 8px; }
.modal.cast-slot-modal { width: min(760px, calc(100vw - 32px)); }
.cast-slot-modal .modal-head { align-items: flex-start; }
.cast-slot-modal-eyebrow { color: #16816f; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.cast-slot-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.cast-slot-form-grid > label { display: grid; gap: 6px; color: #4f6a63; font-size: 11px; font-weight: 800; }
.cast-slot-form-grid > label > span small { color: #91a099; font-weight: 700; }
.cast-slot-form-grid select, .cast-slot-form-grid input, .cast-slot-form-grid textarea { width: 100%; min-height: 41px; border: 1px solid #cfded8; border-radius: 9px; padding: 8px 10px; background: #fff; color: #294e49; font: inherit; }
.cast-slot-form-grid textarea { resize: vertical; }
.cast-slot-form-grid .full { grid-column: 1 / -1; }
.cast-slot-match-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; border-top: 1px solid #e3ece8; padding-top: 15px; color: #245a52; }
.cast-slot-match-heading small { color: #81928c; font-size: 10px; }
.cast-slot-modal .modal-foot, .cast-slot-modal .modal-foot > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recruiting-semi-fixed-toggle { display: flex !important; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px; border: 1px solid #d6e5df; border-radius: 11px; background: #f7fbf9; cursor: pointer; }
.recruiting-semi-fixed-toggle input { width: 17px; height: 17px; accent-color: #16816f; }
.recruiting-semi-fixed-toggle span { display: grid; gap: 2px; }
.recruiting-semi-fixed-toggle strong { color: #275d55; font-size: 11px; }
.recruiting-semi-fixed-toggle small { color: #7c8f88; font-size: 9px; font-weight: 650; }

/* Spacious production pass for the category-first planner */
.cast-management-shell { max-width: 1760px; padding: 22px 28px 32px; }
.cast-plan-layout.is-candidate-tray-open { grid-template-columns: minmax(340px, .34fr) minmax(0, 1fr); gap: 22px; }
.cast-slot-tray { max-height: calc(100vh - 142px); }
.cast-slot-tray > header { padding: 21px 20px 17px; background: #f8fcfa; }
.cast-slot-create-actions { gap: 8px; margin-top: 13px; }
.cast-slot-create-actions button { min-height: 40px; font-size: 11px; }
.cast-slot-week { gap: 10px; margin: 0 15px; padding: 13px; border-radius: 15px; }
.cast-slot-week > header strong { font-size: 13px; }
.cast-slot-week > header span, .cast-week-row > header span { padding: 5px 8px; font-size: 9px; }
.cast-slot-week > div { gap: 10px; }
.cast-slot-week > div > p { padding: 12px; font-size: 10px; }
.cast-plan-calendar .cast-week-row { margin: 17px; }
.cast-plan-calendar .cast-week-row > header { padding: 10px 14px; font-size: 12px; }
.cast-plan-calendar .cast-week-days { gap: 9px; padding: 12px; }
.cast-plan-calendar .cast-date-cell { min-height: 148px; padding: 11px; }
.cast-slot-card { gap: 9px; padding: 12px; border-radius: 13px; }
.cast-slot-card > header span { font-size: 9px; }
.cast-slot-card > header b { padding: 4px 7px; font-size: 9px; }
.cast-slot-card > header b.is-progress { background: #eef4f1; color: #59756d; }
.cast-slot-card > header b.is-ready { background: #e5f4ee; color: #16705d; }
.cast-slot-card > header b.is-done { background: #e9f3fb; color: #346b91; }
.cast-slot-card > header b.is-risk { background: #fff1e5; color: #a45f28; }
.cast-slot-card > button { gap: 5px; }
.cast-slot-card > button strong { font-size: 15px; }
.cast-slot-card > button span { font-size: 12px; font-weight: 750; }
.cast-slot-card > button em { color: #9a7041; font-size: 10px; font-style: normal; font-weight: 750; }
.cast-slot-card > button small { font-size: 10px; line-height: 1.45; }
.cast-slot-card > footer { padding-top: 9px; }
.cast-slot-card > footer span, .cast-slot-card > footer button { font-size: 9px; }
.cast-slot-card.is-compact { gap: 6px; padding: 8px; }
.cast-slot-card.is-compact > header span, .cast-slot-card.is-compact > header b { font-size: 8px; }
.cast-slot-card.is-compact > button strong { font-size: 12px; }
.cast-slot-card.is-compact > button span { font-size: 10px; }
.cast-slot-card.is-compact > button em, .cast-slot-card.is-compact > button small { font-size: 9px; }
.modal.cast-slot-modal { width: min(1040px, calc(100vw - 40px)); max-height: min(900px, calc(100vh - 36px)); }
.cast-slot-form-grid { gap: 16px; padding: 22px 24px; }
.cast-slot-form-grid > label { gap: 8px; font-size: 12px; }
.cast-slot-form-grid select, .cast-slot-form-grid input, .cast-slot-form-grid textarea { min-height: 44px; padding: 9px 12px; font-size: 12px; }
.cast-slot-match-heading { margin-top: 8px; padding-top: 19px; }
.cast-slot-match-heading strong { font-size: 15px; }
.cast-slot-match-heading small { font-size: 11px; }
.cast-slot-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.cast-slot-role-card { position: relative; min-height: 186px; overflow: hidden; border: 1px solid #d7e4df; border-radius: 16px; background: #fff; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.cast-slot-role-card:hover { border-color: #80b9aa; background: #f9fdfb; transform: translateY(-1px); }
.cast-slot-role-card.is-selected { display: grid; align-content: start; gap: 10px; border-color: #70aa9a; padding: 15px; background: #f6fbf8; box-shadow: inset 0 0 0 1px rgba(39, 134, 112, .08); }
.cast-slot-role-card.is-final { border-color: #df5b60; background: #fff6f6; box-shadow: inset 0 0 0 1px rgba(207, 55, 62, .16), 0 8px 24px rgba(149, 38, 43, .08); }
.cast-slot-role-card.is-final .cast-slot-selected-person > i { background: #f9dfe0; color: #a7272d; }
.cast-slot-role-card-main { display: grid; width: 100%; min-height: 184px; align-content: start; gap: 9px; padding: 15px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-slot-role-label { color: #486b62; font-size: 11px; font-weight: 850; }
.cast-slot-role-card.is-empty .cast-slot-role-card-main { place-items: center; align-content: center; text-align: center; }
.cast-slot-role-card.is-empty .cast-slot-role-label { position: absolute; top: 15px; left: 15px; }
.cast-slot-role-card.is-empty .cast-slot-role-card-main > i { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #bcd7ce; border-radius: 50%; background: #eef8f4; color: #287b69; font-size: 21px; font-style: normal; }
.cast-slot-role-card.is-empty strong { color: #275b52; font-size: 13px; }
.cast-slot-role-card.is-empty small { color: #85958f; font-size: 10px; font-weight: 650; }
.cast-slot-selected-person { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 11px; margin-top: 9px; }
.cast-slot-selected-person > i { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #dff1ea; color: #176b59; font-size: 14px; font-style: normal; font-weight: 900; }
.cast-slot-selected-person > span { display: grid; min-width: 0; gap: 4px; }
.cast-slot-selected-person strong { overflow: hidden; color: #173f3a; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.cast-slot-selected-person small { color: #6f837c; font-size: 10px; line-height: 1.45; }
.cast-slot-role-card-main footer,
.cast-slot-role-card.is-selected footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: auto; border-top: 1px solid #dfeae5; padding-top: 11px; }
.cast-slot-role-card-main footer b,
.cast-slot-role-card.is-selected footer > b { padding: 4px 7px; border-radius: 99px; background: #e4f3ed; color: #22715f; font-size: 9px; }
.cast-slot-role-card-main footer span { color: #397c6c; font-size: 10px; font-weight: 850; }
.cast-slot-role-card.is-selected footer > div { display: flex; gap: 6px; }
.cast-slot-final-button,
.cast-slot-change-button { min-height: 30px; border: 1px solid #cadbd5; border-radius: 8px; padding: 0 10px; background: #fff; color: #3e665c; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.cast-slot-final-button:hover,
.cast-slot-change-button:hover { border-color: #78aa9d; background: #edf7f3; }
.cast-slot-final-button.selected { border-color: #c93b42; background: #c93b42; color: #fff; }
.cast-slot-role-card.is-final footer > b { background: #f7dcdd; color: #a7292f; }
.cast-slot-role-remove { position: absolute; top: 11px; right: 10px; padding: 3px 6px; border: 0; background: transparent; color: #8b9a94; font: inherit; font-size: 9px; cursor: pointer; }
.cast-slot-role-remove:hover { color: #b14f4f; }
.cast-slot-extra-candidates { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid #dce7e2; border-radius: 15px; background: #f8fbfa; }
.cast-slot-extra-candidates > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cast-slot-extra-candidates > header > div { display: grid; gap: 3px; }
.cast-slot-extra-candidates > header strong { color: #244f47; font-size: 13px; }
.cast-slot-extra-candidates > header small { color: #71857e; font-size: 10px; line-height: 1.45; }
.cast-slot-extra-candidates > header > span { flex: 0 0 auto; border-radius: 999px; padding: 5px 9px; background: #e6f2ed; color: #28715f; font-size: 9px; font-weight: 850; }
.cast-slot-extra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cast-slot-extra-input { display: grid; gap: 6px; border: 1px solid #d7e3df; border-radius: 12px; padding: 12px; background: #fff; }
.cast-slot-extra-input > span { color: #355f55; font-size: 11px; font-weight: 850; }
.cast-slot-extra-input textarea { width: 100%; min-height: 66px; resize: vertical; box-sizing: border-box; border: 1px solid #cbdad5; border-radius: 9px; padding: 10px 11px; background: #fbfdfc; color: #203f38; font: inherit; font-size: 12px; line-height: 1.5; }
.cast-slot-extra-input textarea:focus { border-color: #4d9a86; outline: 3px solid rgba(54, 151, 126, .12); background: #fff; }
.cast-slot-extra-input > small { color: #7c8d87; font-size: 9px; line-height: 1.4; }
.cast-candidate-picker-panel[hidden] { display: none; }
.cast-candidate-picker-panel { position: fixed; z-index: 95; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(20, 52, 49, .28); backdrop-filter: blur(5px); }
.cast-candidate-picker-dialog { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(880px, calc(100vw - 56px)); max-height: min(780px, calc(100vh - 56px)); overflow: hidden; border: 1px solid #cfe0d9; border-radius: 22px; background: #fff; box-shadow: 0 26px 70px rgba(18, 55, 49, .22); }
.cast-candidate-picker-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 22px 24px 17px; border-bottom: 1px solid #e4ece8; }
.cast-candidate-picker-dialog > header span { color: #18816d; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.cast-candidate-picker-dialog h3, .cast-candidate-picker-dialog p { margin: 0; }
.cast-candidate-picker-dialog h3 { margin-top: 3px; color: #153f3a; font-size: 20px; }
.cast-candidate-picker-dialog p { margin-top: 5px; color: #7b8c86; font-size: 11px; }
.cast-candidate-picker-search { position: relative; padding: 15px 24px; }
.cast-candidate-picker-search svg { position: absolute; top: 27px; left: 38px; width: 17px; fill: none; stroke: #6d8980; stroke-width: 1.8; }
.cast-candidate-picker-search input { width: 100%; min-height: 44px; border: 1px solid #cfddd8; border-radius: 11px; padding: 0 14px 0 42px; background: #f9fbfa; color: #284e47; font: inherit; }
.cast-candidate-picker-search input:focus { border-color: #58a38f; outline: 3px solid rgba(54, 151, 126, .12); background: #fff; }
.cast-candidate-picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow-y: auto; padding: 2px 24px 20px; }
.cast-candidate-picker-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 22px; align-items: center; gap: 11px; min-height: 92px; padding: 13px; border: 1px solid #dbe5e1; border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-candidate-picker-card:hover { border-color: #83b9aa; background: #f8fcfa; }
.cast-candidate-picker-card.selected { border-color: #3f927b; background: #eaf6f1; box-shadow: inset 0 0 0 1px rgba(63,146,123,.18); }
.cast-candidate-picker-avatar { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #e7f2ee; color: #286c5c; font-size: 13px; font-style: normal; font-weight: 900; }
.cast-candidate-picker-card > span { display: grid; min-width: 0; gap: 3px; }
.cast-candidate-picker-card strong { color: #1d4942; font-size: 14px; }
.cast-candidate-picker-card small { overflow: hidden; color: #617a72; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.cast-candidate-picker-card em { color: #82918c; font-size: 9px; font-style: normal; }
.cast-candidate-picker-card > b { padding: 4px 6px; border-radius: 99px; background: #fff3dc; color: #956228; font-size: 8px; white-space: nowrap; }
.cast-candidate-picker-card > svg { width: 20px; fill: none; stroke: #23816c; stroke-width: 2.2; opacity: 0; }
.cast-candidate-picker-card.selected > svg { opacity: 1; }
.cast-candidate-picker-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 24px; border-top: 1px solid #e2ebe7; background: #fafcfb; }
.cast-candidate-picker-dialog > footer > div { display: flex; gap: 8px; }
.cast-candidate-picker-empty { grid-column: 1 / -1; margin: 0; padding: 35px; border: 1px dashed #ceddd7; border-radius: 14px; color: #788d85; text-align: center; font-size: 12px; }

/* LIVE fixed programming and linked derivative content */
.cast-content-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.cast-content-filters button { min-height: 30px; padding: 0 11px; border: 1px solid #d7e3df; border-radius: 99px; background: #fff; color: #657b74; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.cast-content-filters button.active { border-color: #356f89; background: #e8f3f8; color: #245f7b; box-shadow: inset 0 0 0 1px rgba(53,111,137,.08); }

/* 발행 목표 중심 편성안 */
.cast-plan-toolbar { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; }
.cast-plan-toolbar .cast-content-filters { margin-top: 0; }
.cast-schedule-view-tabs { display: flex; grid-column: 1 / -1; gap: 6px; width: fit-content; padding: 5px; border: 1px solid #d8e5e0; border-radius: 13px; background: #f4f9f7; }
.cast-schedule-view-tabs button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: #607970; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.cast-schedule-view-tabs button.active { background: #fff; color: #176b59; box-shadow: 0 3px 10px rgba(30,73,63,.1); }
.cast-plan-view-content { display: grid; min-width: 0; gap: 20px; }
.cast-month-plan-summary { display: block !important; }
.cast-role-goals { display: grid; gap: 11px; margin: 14px 15px; padding: 14px; border: 1px solid #deebe5; border-radius: 14px; background: #fff; }
.cast-role-goals > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 10px; }
.cast-role-goals strong { color: #866b3c; font-size: 11px; }
.cast-role-goals strong.is-filled { color: #17715e; }
.cast-role-goals i { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: #e9f0ed; }
.cast-role-goals i b { display: block; height: 100%; border-radius: inherit; background: #51a68f; }
.cast-role-badge { display: inline-flex; width: fit-content; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 99px; background: #e8f5f0; color: #176b59 !important; font-size: 9px !important; font-weight: 900; }
.cast-role-badge.is-role-deep, .is-role-deep .cast-role-badge { background: #e9f1f7; color: #356f89 !important; }
.cast-role-badge.is-role-market-live, .is-role-market-live .cast-role-badge { background: #e9f4f1; color: #236f62 !important; }
.cast-role-badge.is-role-close-live, .is-role-close-live .cast-role-badge { background: #f1eef7; color: #675185 !important; }
.cast-role-badge.is-role-urgent, .is-role-urgent .cast-role-badge { background: #fff0e4; color: #a45f28 !important; }
.cast-week-fill-summary { display: grid; gap: 9px; margin: 14px 15px 18px; }
.cast-week-fill-summary > div { padding: 11px; border: 1px solid #e1ebe6; border-radius: 12px; background: rgba(255,255,255,.85); }
.cast-week-fill-summary header { display: flex; justify-content: space-between; gap: 8px; }
.cast-week-fill-summary header strong { color: #2b6159; font-size: 11px; }
.cast-week-fill-summary header span { color: #80918b; font-size: 9px; }
.cast-week-fill-summary p { display: flex; gap: 4px; margin: 8px 0 0; }
.cast-week-fill-summary p i { display: grid; width: 29px; height: 23px; place-items: center; border: 1px dashed #ccd9d4; border-radius: 6px; color: #a0ada8; font-size: 8px; font-style: normal; }
.cast-week-fill-summary p i.is-filled { border-style: solid; border-color: #9dcabd; background: #e8f5f0; color: #176b59; font-weight: 900; }
.cast-weekly-planning { overflow: visible; }
.cast-planning-week-list { display: grid; gap: 15px; padding: 16px; }
.cast-planning-week { overflow: hidden; border: 1px solid #dce8e3; border-radius: 15px; background: #fafdfb; }
.cast-planning-week > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #e4ece8; background: #f5faf7; }
.cast-planning-week > header > div { display: flex; align-items: baseline; gap: 8px; }
.cast-planning-week > header strong { color: #174f4e; font-size: 14px; }
.cast-planning-week > header span, .cast-planning-week > header p { margin: 0; color: #71867f; font-size: 10px; }
.cast-planning-week > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; padding: 13px; }
.cast-empty-week, .cast-empty-waiting { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed #d4e1dc; border-radius: 11px; color: #84958e; text-align: center; }
.cast-planning-card > button dl { display: grid; gap: 4px; margin: 5px 0; }
.cast-planning-card > button dl div { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 7px; }
.cast-planning-card > button dt { color: #82918c; font-size: 9px; }
.cast-planning-card > button dd { margin: 0; color: #3d6159; font-size: 9px; font-weight: 800; }
.cast-planning-live-card { border-left: 4px solid #367b6f; }
.cast-planning-live-card.is-role-close-live { border-left-color: #75608c; }
.cast-slot-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 9px; border-top: 1px solid #e3ece8; padding-top: 18px; }
.cast-slot-section-heading:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.cast-slot-section-heading strong { color: #245a52; font-size: 15px; }
.cast-slot-section-heading small { color: #81928c; font-size: 10px; }
.cast-planning-intent textarea { min-height: 100px; border-color: #8ebdaf; background: #f9fdfb; font-size: 14px !important; line-height: 1.55; }
.cast-slot-importance { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 0; border: 0; padding: 0; }
.cast-slot-importance legend { margin-bottom: 8px; color: #4f6a63; font-size: 12px; font-weight: 850; }
.cast-slot-importance label { cursor: pointer; }
.cast-slot-importance input { position: absolute; opacity: 0; }
.cast-slot-importance label > span { display: grid; gap: 4px; min-height: 68px; padding: 12px; border: 1px solid #d7e3df; border-radius: 11px; background: #fff; }
.cast-slot-importance input:checked + span { border-color: #4d9a86; background: #eaf6f1; box-shadow: inset 0 0 0 1px rgba(77,154,134,.15); }
.cast-slot-importance strong { color: #315f56; font-size: 11px; }
.cast-slot-importance small { color: #81918b; font-size: 9px; }
.cast-publish-guide { margin: -7px 0 0; color: #71867f; font-size: 10px; }
.cast-recommended-schedule { padding: 14px; border: 1px solid #bcd9d0; border-radius: 13px; background: #f2faf6; }
.cast-recommended-schedule.is-emergency { border-color: #efd0b5; background: #fff8f1; }
.cast-recommended-schedule > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cast-recommended-schedule > header div { display: grid; gap: 3px; }
.cast-recommended-schedule > header strong { color: #236b5b; font-size: 12px; }
.cast-recommended-schedule > header span { color: #6f857d; font-size: 9px; }
.cast-recommended-schedule > header b { padding: 4px 7px; border-radius: 99px; background: #dcefe7; color: #26745f; font-size: 8px; }
.cast-recommended-schedule > div, .cast-actual-production > div, .cast-publish-decision > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.cast-recommended-schedule label, .cast-actual-production label, .cast-publish-decision label { display: grid; gap: 5px; color: #4f6a63; font-size: 10px; font-weight: 800; }
.cast-actual-production, .cast-publish-decision { border: 1px solid #dce7e2; border-radius: 13px; background: #fbfdfc; }
.cast-actual-production summary, .cast-publish-decision summary { display: flex; align-items: center; justify-content: space-between; padding: 14px; cursor: pointer; }
.cast-actual-production summary span, .cast-publish-decision summary span { display: grid; gap: 3px; }
.cast-actual-production summary strong, .cast-publish-decision summary strong { color: #315f56; font-size: 12px; }
.cast-actual-production summary small, .cast-publish-decision summary small { color: #81918b; font-size: 9px; }
.cast-actual-production summary b, .cast-publish-decision summary b { color: #3e7b6d; font-size: 9px; }
.cast-actual-production > div, .cast-publish-decision > div { padding: 0 14px 14px; }
.cast-slot-timeline { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); margin: 0; padding: 0; list-style: none; }
.cast-slot-timeline li { position: relative; display: grid; justify-items: center; gap: 6px; color: #93a19c; font-size: 8px; text-align: center; }
.cast-slot-timeline li::before { position: absolute; z-index: 0; top: 12px; right: 50%; width: 100%; height: 2px; background: #dfe7e4; content: ""; }
.cast-slot-timeline li:first-child::before { display: none; }
.cast-slot-timeline i { position: relative; z-index: 1; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #e8efec; font-style: normal; }
.cast-slot-timeline .is-complete, .cast-slot-timeline .is-current { color: #176b59; font-weight: 850; }
.cast-slot-timeline .is-complete::before, .cast-slot-timeline .is-current::before { background: #75b7a5; }
.cast-slot-timeline .is-complete i, .cast-slot-timeline .is-current i { background: #dff2eb; }
.cast-slot-timeline .is-current i { box-shadow: 0 0 0 3px rgba(77,154,134,.16); }
.cast-production-event, .cast-publish-event { display: grid; width: 100%; gap: 3px; margin-top: 5px; padding: 7px; border: 1px solid #cfe1da; border-radius: 8px; background: #f5faf7; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-production-event span, .cast-publish-event span { color: #287362; font-size: 7px; font-weight: 900; }
.cast-production-event strong, .cast-publish-event strong { overflow: hidden; color: #234d46; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cast-production-event small, .cast-production-event i, .cast-publish-event small { color: #768a83; font-size: 7px; font-style: normal; }
.cast-publish-event.is-confirmed { border-color: #6fb3a1; background: #eaf6f1; }
.cast-unscheduled-production, .cast-publish-waiting { margin: 15px; padding: 15px; border: 1px solid #dce7e2; border-radius: 14px; background: #fafdfb; }
.cast-unscheduled-production > header, .cast-publish-waiting > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cast-unscheduled-production > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.cast-publish-waiting > header div { display: grid; gap: 3px; }
.cast-publish-waiting > header strong { color: #245a52; }
.cast-publish-waiting > header p { margin: 0; }
.cast-publish-waiting-table { overflow-x: auto; }
.cast-publish-waiting-table > div, .cast-publish-waiting-table > button { display: grid; grid-template-columns: 42px 1.6fr .7fr .75fr .75fr .7fr .9fr .75fr; min-width: 840px; align-items: center; gap: 8px; width: 100%; padding: 9px; border: 0; border-bottom: 1px solid #e4ece8; background: transparent; color: #536e66; font: inherit; font-size: 9px; text-align: left; }
.cast-publish-waiting-table > button { cursor: pointer; }
.cast-publish-waiting-table > button:hover { background: #f0f8f4; }
.cast-publish-waiting-table .is-head { color: #81918b; font-weight: 850; }
.cast-publish-waiting-table strong { color: #254d46; }
@media (max-width: 1100px) {
  .cast-plan-layout.is-candidate-tray-open { grid-template-columns: 1fr; }
  .cast-slot-tray { max-height: none; }
  .cast-planning-week > div { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cast-plan-toolbar { align-items: stretch; flex-direction: column; }
  .cast-schedule-view-tabs { width: 100%; overflow-x: auto; }
  .cast-schedule-view-tabs button { flex: 0 0 auto; }
  .cast-slot-importance, .cast-recommended-schedule > div, .cast-actual-production > div, .cast-publish-decision > div { grid-template-columns: 1fr; }
  .cast-slot-timeline { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px 0; }
  .cast-slot-timeline li:nth-child(5)::before { display: none; }
  .cast-unscheduled-production > div { grid-template-columns: 1fr; }
}
.cast-live-card, .cast-derived-card { min-width: 0; border-radius: 10px; }
.cast-live-card { overflow: hidden; border: 1px solid #89b8c9; border-left: 4px solid #167ea0; background: linear-gradient(145deg, #f0f9fc, #fff); box-shadow: 0 5px 14px rgba(40,105,130,.09); }
.cast-live-card.is-done { border-left-color: #21745e; background: linear-gradient(145deg, #eff9f5, #fff); }
.cast-live-card.is-off { opacity: .72; border-left-color: #899893; background: #f4f6f5; }
.cast-live-card > button, .cast-derived-card > button { display: grid; width: 100%; min-width: 0; gap: 4px; padding: 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-live-card header, .cast-derived-card header { display: flex; align-items: center; gap: 5px; }
.cast-live-card header span { color: #0b789d; font-size: 8px; font-weight: 950; letter-spacing: .08em; white-space: nowrap; }
.cast-live-card header b { padding: 2px 5px; border-radius: 99px; background: #dceff6; color: #336f84; font-size: 7px; }
.cast-live-card header em { margin-left: auto; color: #55736f; font-size: 7px; font-style: normal; font-weight: 850; white-space: nowrap; }
.cast-live-card strong, .cast-derived-card strong { overflow: hidden; color: #183f4a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cast-live-card small, .cast-derived-card small { overflow: hidden; color: #607b83; font-size: 8px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cast-live-card p { margin: 2px 0 0; color: #315b68; font-size: 9px; font-weight: 750; line-height: 1.35; }
.cast-live-card i { color: #6b8790; font-size: 7px; font-style: normal; }
.cast-derived-card { border: 1px dashed #9d8bc3; background: linear-gradient(145deg, #faf8ff, #fff); }
.cast-derived-card header span { padding: 2px 5px; border-radius: 99px; background: #eee8fb; color: #6b4fa0; font-size: 7px; font-weight: 900; }
.cast-derived-card header b { margin-left: auto; color: #796b93; font-size: 7px; }
.cast-derived-card strong { color: #43365c; }
.cast-derived-card small { color: #7e7094; }
.cast-date-cell .cast-live-card header b { display: none; }
.cast-derived-card > .cast-derived-parent-link { padding-top: 0; color: #796894; font-size: 7px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-derived-card > small { padding: 0 8px 7px; }
.cast-date-cell .cast-live-card + .cast-live-card, .cast-date-cell .cast-derived-card + .cast-derived-card, .cast-date-cell .cast-live-card + .cast-derived-card { margin-top: 2px; }
.cast-undated-derived { display: grid; gap: 9px; margin: 0 15px 15px; padding: 13px; border: 1px dashed #aa99c7; border-radius: 15px; background: #fbf9ff; }
.cast-undated-derived > header { display: flex; justify-content: space-between; color: #5e4b80; font-size: 11px; }
.cast-undated-derived > div { display: grid; gap: 8px; }
.cast-live-eyebrow, .cast-derived-eyebrow { color: #167e9f; font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.cast-live-template-modal { width: min(850px, calc(100vw - 30px)); max-height: calc(100vh - 30px); }
.cast-live-template-list { display: grid; gap: 14px; padding: 20px 24px; }
.cast-live-template-card { padding: 16px; border: 1px solid #d6e4e7; border-radius: 15px; background: #f9fcfd; }
.cast-live-template-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.cast-live-template-card > header > div { display: grid; gap: 3px; }
.cast-live-template-card > header strong { color: #214e5b; font-size: 14px; }
.cast-live-template-card > header small { color: #7b9197; font-size: 10px; }
.cast-live-active { display: flex; align-items: center; gap: 6px; color: #3e696f; font-size: 10px; font-weight: 800; }
.cast-live-active input { width: 16px; height: 16px; accent-color: #167e9f; }
.cast-live-template-fields, .cast-live-detail-grid, .cast-derived-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cast-live-template-fields label, .cast-live-detail-grid label, .cast-live-detail-body label, .cast-derived-form-grid label { display: grid; gap: 6px; color: #49666c; font-size: 10px; font-weight: 800; }
.cast-live-template-fields input, .cast-live-detail-grid input, .cast-live-detail-grid select, .cast-live-detail-body textarea, .cast-derived-form-grid input, .cast-derived-form-grid select, .cast-derived-form-grid textarea { box-sizing: border-box; width: 100%; min-height: 42px; border: 1px solid #cfdddd; border-radius: 10px; padding: 9px 11px; background: #fff; color: #244a50; font: inherit; }
.cast-live-template-fields .full, .cast-live-detail-grid .full, .cast-derived-form-grid .full { grid-column: 1 / -1; }
.modal-backdrop:has(.cast-live-drawer) { place-items: stretch end; padding: 0; }
.cast-live-drawer { width: min(570px, 100vw); height: 100vh; max-height: none; border-radius: 22px 0 0 22px; }
.cast-live-detail-body { display: grid; gap: 18px; padding: 20px 24px; }
.cast-live-detail-body > section { display: grid; gap: 11px; }
.cast-live-detail-body h3 { margin: 0; color: #204e58; font-size: 13px; }
.cast-live-detail-body textarea { resize: vertical; }
.cast-live-derived-list > header { display: flex; align-items: center; justify-content: space-between; }
.cast-live-derived-list > header span { color: #7a6a97; font-size: 10px; }
.cast-live-derived-list > button { display: grid; gap: 3px; padding: 10px 12px; border: 1px dashed #aa99c7; border-radius: 10px; background: #faf8ff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-live-derived-list > button strong { color: #49385f; font-size: 11px; }
.cast-live-derived-list > button small, .cast-live-derived-list > p { margin: 0; color: #807490; font-size: 9px; }
.cast-live-drawer .modal-foot, .cast-live-drawer .modal-foot > div, .cast-derived-modal .modal-foot > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.cast-create-derived-button { border-color: #8bb8c7; color: #25677e; }
.cast-derived-modal { width: min(650px, calc(100vw - 30px)); }
.cast-derived-form-grid { padding: 20px 24px; }
.cast-derived-form-grid textarea { resize: vertical; }
.cast-derived-parent { display: grid; gap: 3px; padding: 12px 14px; border-left: 4px solid #167e9f; border-radius: 10px; background: #eef8fb; }
.cast-derived-parent span, .cast-derived-parent small { color: #6d878e; font-size: 9px; }
.cast-derived-parent strong { color: #224f5b; font-size: 12px; }

/* LIVE planning studio */
.cast-add-live-slot { border-color: #72a9bc; background: #eaf5f8; color: #226a82; }
.cast-live-create-modal { width: min(1040px, calc(100vw - 38px)); max-height: calc(100vh - 38px); }
.cast-live-create-body { display: grid; gap: 26px; padding: 28px 32px 34px; }
.cast-live-create-body > section, .cast-live-planning-section { display: grid; gap: 18px; }
.cast-live-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cast-live-section-heading > div { display: flex; align-items: center; gap: 10px; }
.cast-live-section-heading > div > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #e7f3f6; color: #20728a; font-size: 12px; font-weight: 900; }
.cast-live-section-heading h3 { margin: 0; color: #183f49; font-size: 18px; letter-spacing: -.02em; }
.cast-live-section-heading p { margin: 0; color: #72888e; font-size: 13px; }
.cast-live-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cast-live-preset-card { position: relative; display: grid; min-height: 180px; align-content: start; gap: 9px; padding: 22px; border: 1px solid #d5e2e5; border-radius: 18px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: .16s ease; }
.cast-live-preset-card:hover { transform: translateY(-2px); border-color: #87b7c5; box-shadow: 0 12px 30px rgba(36,91,105,.09); }
.cast-live-preset-card.selected { border-color: #3d8ca3; background: linear-gradient(145deg, #edf8fb, #fff); box-shadow: inset 0 0 0 2px rgba(61,140,163,.1); }
.cast-live-preset-card > span { color: #167b9a; font-size: 13px; font-weight: 900; }
.cast-live-preset-card > strong { color: #183f49; font-size: 18px; line-height: 1.3; }
.cast-live-preset-card > p { margin: 0; color: #71868c; font-size: 14px; line-height: 1.5; }
.cast-live-preset-card > i { position: absolute; right: 16px; bottom: 15px; padding: 5px 9px; border-radius: 99px; background: #f0f4f4; color: #7b8b8e; font-size: 11px; font-style: normal; font-weight: 850; }
.cast-live-preset-card.selected > i { background: #dceff4; color: #1d7188; }
.cast-live-create-schedule { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 20px; border: 1px solid #dce7e8; border-radius: 17px; background: #fafcfc; }
.cast-live-create-schedule label { display: grid; gap: 8px; color: #42636a; font-size: 13px; font-weight: 800; }
.cast-live-create-schedule input { min-height: 48px; border: 1px solid #ccdadd; border-radius: 11px; padding: 0 13px; background: #fff; color: #244b54; font: inherit; font-size: 15px; }
.cast-live-create-schedule .cast-live-custom-name { grid-column: 1 / -1; }
.cast-live-create-schedule [hidden] { display: none; }

.modal-backdrop:has(.cast-live-drawer) { background: rgba(20,42,48,.34); backdrop-filter: blur(6px); }
.cast-live-drawer { width: min(980px, calc(100vw - 42px)); border-radius: 24px 0 0 24px; box-shadow: -24px 0 80px rgba(15,48,57,.2); }
.cast-live-detail-head { align-items: center; padding: 25px 30px; }
.cast-live-detail-head h2 { margin-top: 5px; font-size: 24px; }
.cast-live-detail-head p { margin: 5px 0 0; color: #688087; font-size: 14px; }
.cast-live-detail-head > .icon-button { margin-left: 4px; }
.cast-live-status-pill { margin-left: auto; padding: 8px 13px; border-radius: 99px; background: #e6f3ef; color: #256d5d; font-size: 13px; font-weight: 900; }
.cast-live-status-pill.is-done { background: #e8f0f7; color: #356780; }
.cast-live-status-pill.is-off { background: #eef0ef; color: #6e7c78; }
.cast-live-detail-body { gap: 22px; padding: 25px 30px 38px; background: #f5f8f8; }
.cast-live-planning-section { padding: 24px; border: 1px solid #dce6e6; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(35,73,78,.045); }
.cast-live-detail-grid { gap: 14px; }
.cast-live-detail-grid label { gap: 8px; font-size: 13px; }
.cast-live-detail-grid input { min-height: 49px; border-radius: 11px; padding: 0 14px; font-size: 15px; }
.cast-live-fixed-cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cast-live-person-card { position: relative; display: grid; width: 100%; min-height: 126px; align-content: start; gap: 11px; padding: 17px; border: 1px solid #d6e2e2; border-radius: 16px; background: #fbfdfd; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-live-person-card > span { color: #527078; font-size: 13px; font-weight: 900; }
.cast-live-person-card > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 4px 12px; }
.cast-live-person-card > div > i { grid-row: 1 / 3; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: #dff0f3; color: #236d80; font-size: 14px; font-style: normal; font-weight: 900; }
.cast-live-person-card strong { color: #203f47; font-size: 16px; }
.cast-live-person-card small { color: #71868b; font-size: 13px; }
.cast-live-person-card > em { position: absolute; right: 16px; top: 16px; color: #34798c; font-size: 12px; font-style: normal; font-weight: 850; }
.cast-live-person-card.is-empty { place-items: center; align-content: center; min-height: 126px; text-align: center; }
.cast-live-person-card.is-empty > span { position: absolute; top: 16px; left: 16px; }
.cast-live-person-card.is-empty > i, .cast-live-add-guest > i { color: #2d8197; font-size: 25px; font-style: normal; }
.cast-live-guest-heading { display: flex; align-items: baseline; gap: 10px; margin-top: 3px; }
.cast-live-guest-heading strong { color: #355a62; font-size: 15px; }
.cast-live-guest-heading small { color: #839499; font-size: 12px; }
.cast-live-guest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cast-live-guest-card { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; border: 1px solid #d8e4e4; border-radius: 15px; background: #fafcfc; }
.cast-live-guest-card > div { display: flex; min-width: 0; align-items: center; gap: 10px; }
.cast-live-guest-card i { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: #e3f0f2; color: #317386; font-size: 12px; font-style: normal; font-weight: 900; }
.cast-live-guest-card span { display: grid; min-width: 0; gap: 3px; }
.cast-live-guest-card strong { overflow: hidden; color: #28474e; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cast-live-guest-card small { overflow: hidden; color: #788b90; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cast-live-guest-card > button { border: 0; background: transparent; color: #9a7777; font-size: 18px; cursor: pointer; }
.cast-live-add-guest { display: grid; min-height: 88px; place-items: center; align-content: center; gap: 3px; border: 1px dashed #9cbfc8; border-radius: 15px; background: #f7fbfc; color: #3a717f; font: inherit; cursor: pointer; }
.cast-live-add-guest strong { font-size: 14px; }.cast-live-add-guest small { font-size: 11px; }
.cast-live-agenda-list { display: grid; gap: 11px; }
.cast-live-agenda-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 13px; border: 1px solid #d6e3e3; border-radius: 15px; background: #fbfdfd; }
.cast-live-agenda-card > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #e6f2f4; color: #26758b; font-size: 14px; font-weight: 950; }
.cast-live-agenda-card textarea { min-height: 58px; resize: vertical; border: 0; padding: 8px 4px; background: transparent; color: #203f47; font: inherit; font-size: 16px; font-weight: 750; line-height: 1.45; }
.cast-live-agenda-card textarea:focus { outline: 0; }
.cast-live-agenda-card > div { display: flex; gap: 5px; }
.cast-live-agenda-card > div button { width: 31px; height: 31px; border: 1px solid #d4e0e0; border-radius: 8px; background: #fff; color: #688085; cursor: pointer; }
.cast-live-add-agenda, .cast-live-add-linked { min-height: 44px; border: 1px dashed #8fb6c1; border-radius: 12px; background: #f5fafb; color: #28758a; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }
.cast-live-linked-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.cast-live-linked-grid > button { display: grid; gap: 7px; padding: 16px; border: 1px dashed #a999c7; border-radius: 15px; background: #fbfaff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-live-linked-grid > button span { color: #69548f; font-size: 12px; font-weight: 900; }
.cast-live-linked-grid > button strong { color: #44375d; font-size: 15px; }
.cast-live-linked-grid > button small, .cast-live-linked-grid > p { margin: 0; color: #7d728c; font-size: 12px; }
.cast-live-management { align-items: start; }
.cast-live-status-segments, .cast-derived-segments, .cast-derived-mini-segments, .cast-derived-status-segments { display: flex; flex-wrap: wrap; gap: 8px; }
.cast-live-status-segments label, .cast-derived-mini-segments label, .cast-derived-status-segments label { cursor: pointer; }
.cast-live-status-segments input, .cast-derived-segments input, .cast-derived-mini-segments input, .cast-derived-status-segments input { position: absolute; opacity: 0; pointer-events: none; }
.cast-live-status-segments span, .cast-derived-mini-segments span, .cast-derived-status-segments span { display: grid; min-height: 40px; place-items: center; padding: 0 15px; border: 1px solid #d3dfdf; border-radius: 10px; background: #fff; color: #63787d; font-size: 13px; font-weight: 850; }
.cast-live-status-segments label.selected span { border-color: #5b9a89; background: #e8f4f0; color: #276b5b; }
.cast-live-sticky-actions { position: sticky; bottom: 0; z-index: 3; padding: 17px 30px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.cast-live-sticky-actions > span { color: #778a8f; font-size: 12px; }

.cast-derived-modal { width: min(820px, calc(100vw - 38px)); max-height: calc(100vh - 38px); }
.cast-derived-modal .modal-head { padding: 24px 28px; }
.cast-derived-modal .modal-head h2 { font-size: 23px; }
.cast-derived-form-grid { gap: 18px; padding: 24px 28px 30px; }
.cast-derived-form-grid > label { gap: 8px; font-size: 13px; }
.cast-derived-form-grid input, .cast-derived-form-grid textarea { min-height: 48px; border-radius: 11px; padding: 11px 14px; font-size: 15px; }
.cast-derived-parent { border: 1px solid #cfe1e5; border-left: 5px solid #287f98; padding: 15px 17px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-derived-parent span, .cast-derived-parent small { font-size: 12px; }.cast-derived-parent strong { font-size: 16px; }
.cast-derived-title input { min-height: 55px; font-size: 17px; font-weight: 750; }
.cast-derived-choice { min-width: 0; margin: 0; border: 0; padding: 0; }
.cast-derived-choice legend { margin-bottom: 9px; color: #49666c; font-size: 13px; font-weight: 850; }
.cast-derived-segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cast-derived-segments label { cursor: pointer; }
.cast-derived-segments label > span { display: grid; gap: 4px; min-height: 82px; align-content: center; padding: 14px 16px; border: 1px solid #d6e1e1; border-radius: 13px; background: #fff; }
.cast-derived-segments strong { color: #3e555b; font-size: 15px; }.cast-derived-segments small { color: #7d8d91; font-size: 12px; }
.cast-derived-segments label.selected > span { border-color: #8e7bad; background: #f8f5fc; box-shadow: inset 0 0 0 1px rgba(142,123,173,.12); }
.cast-derived-segments label.selected strong { color: #5d477f; }
.cast-derived-mini-segments label.selected span, .cast-derived-status-segments label.selected span { border-color: #9180ad; background: #f3eff9; color: #634e85; }

.cast-live-card > button > b { overflow: hidden; color: #54757d; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cast-live-card > button > i { width: max-content; padding: 2px 5px; border-radius: 99px; background: #e7f3f6; color: #27748a; font-weight: 850; }
.cast-derived-card header span { white-space: nowrap; }
.cast-derived-card header b { padding: 2px 5px; border-radius: 99px; background: #f0ecf7; white-space: nowrap; }

@media (max-width: 980px) {
  .cast-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cast-confirmed-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cast-plan-layout { grid-template-columns: 1fr; }
  .cast-plan-layout.is-candidate-tray-open { grid-template-columns: 1fr; }
  .cast-slot-role-grid { grid-template-columns: 1fr; }
  .cast-live-preset-grid { grid-template-columns: 1fr; }
  .cast-live-preset-card { min-height: 135px; }
  .cast-live-create-schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cast-live-guest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .cast-management-shell { padding: 14px; }
  .cast-management-head { align-items: flex-start; flex-direction: column; padding: 17px; }
  .cast-month-controls { width: 100%; overflow-x: auto; }
  .cast-management-view-tabs { width: 100%; }
  .cast-summary-grid { grid-template-columns: 1fr; }
  .cast-category-grid { grid-template-columns: 1fr; }
  .cast-confirmed-list-panel { padding: 9px; }
  .cast-confirmed-list-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); border-radius: 18px; }
  .cast-confirmed-category-grid { grid-template-columns: 1fr; padding: 14px; }
  .cast-confirmed-list-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 14px; }.cast-confirmed-list-row > p { grid-column: 1 / -1; }
  .cast-detail-grid, .cast-plan-board { grid-template-columns: 1fr; }
  .cast-candidate-group > div { grid-template-columns: 1fr; }
  .cast-week-days { min-width: 670px; }
  .cast-calendar-panel { overflow-x: auto; }
  .cast-calendar-panel .cast-week-row { min-width: 680px; }
  .modal.cast-category-modal, .modal.cast-planning-modal { width: calc(100vw - 18px); }
  .cast-category-options { grid-template-columns: 1fr; }
  .cast-planning-modal .modal-body { padding: 14px; overflow-x: auto; }
  .cast-planning-date-picker { min-width: 620px; }
  .cast-slot-form-grid { grid-template-columns: 1fr; }
  .cast-slot-form-grid .full { grid-column: auto; }
  .cast-live-template-fields, .cast-live-detail-grid, .cast-derived-form-grid { grid-template-columns: 1fr; }
  .cast-live-template-fields .full, .cast-live-detail-grid .full, .cast-derived-form-grid .full { grid-column: auto; }
  .cast-live-drawer { border-radius: 0; }
  .cast-live-create-modal, .cast-derived-modal { width: calc(100vw - 18px); }
  .cast-live-create-body, .cast-live-detail-body, .cast-derived-form-grid { padding: 18px 15px 26px; }
  .cast-live-create-schedule, .cast-live-fixed-cast, .cast-live-guest-grid, .cast-live-linked-grid, .cast-derived-segments { grid-template-columns: 1fr; }
  .cast-live-agenda-card { grid-template-columns: 38px minmax(0, 1fr); }
  .cast-live-agenda-card > div { grid-column: 2; }
  .cast-live-section-heading { align-items: flex-start; flex-direction: column; }
  .cast-candidate-picker-list { grid-template-columns: 1fr; }
  .cast-slot-extra-grid { grid-template-columns: 1fr; }
  .cast-slot-extra-candidates > header { align-items: stretch; flex-direction: column; }
  .cast-slot-extra-candidates > header > span { width: fit-content; }
  .cast-candidate-picker-panel { padding: 9px; }
  .cast-candidate-picker-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
}

/* Reference shell: standalone Studio 2 logo and selector cards. */
.sidebar {
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 0%, rgba(99, 143, 187, .17), transparent 30%), linear-gradient(180deg, #17283a 0%, #102236 58%, #17283a 100%);
  padding: 40px 14px 24px;
}

.logo { position: relative; gap: 0; min-height: 102px; margin: 0 0 42px 22px; }
.sidebar-logo-asset { display: block; flex: 0 0 auto; object-fit: contain; }
.sidebar-logo-wordmark { width: 132px; height: 96px; }
.sidebar-logo-mark { display: none; }
.logo-wordmark { display: none; }
.sidebar-logo-toggle { position: absolute; top: 7px; right: 6px; display: grid; width: 30px; min-height: 30px; place-items: center; border: 1px solid rgba(214, 235, 253, .18); border-radius: 8px; padding: 0; color: #c8deef; background: rgba(10, 29, 48, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.sidebar-logo-toggle .menu-button-icon { font-size: 20px; line-height: 1; }
.sidebar-logo-toggle .menu-button-text { display: none; }
.sidebar-logo-toggle:hover { border-color: rgba(116, 187, 255, .58); color: #8ecbff; background: rgba(29, 79, 127, .36); }
.sidebar-logo-toggle:focus-visible { outline: 2px solid #74bbff; outline-offset: 2px; }

.nav-list { gap: 8px; }
.nav-item { min-height: 50px; border-radius: 8px; padding: 12px 14px; gap: 12px; font-size: 15px; font-weight: 700; }
.nav-item.active { position: relative; isolation: isolate; width: calc(100% + 14px); margin-left: -14px; border-radius: 0 8px 8px 0; padding-left: 28px; background: linear-gradient(90deg, rgba(46, 120, 207, .54), rgba(34, 83, 139, .22)); color: #9bd5ff; box-shadow: inset 0 1px 0 rgba(149, 213, 255, .14), inset 0 -1px 0 rgba(49, 125, 210, .14), 0 0 24px rgba(44, 131, 230, .22); }
.nav-item.active::before { top: 5px; left: 0; height: calc(100% - 10px); background: #74bbff; box-shadow: 0 0 12px rgba(116, 187, 255, .92); transform: none; }
.nav-item.active::after { position: absolute; inset: 6px 10px 6px -4px; z-index: -1; border-radius: inherit; background: radial-gradient(circle at 18% 50%, rgba(89, 184, 255, .72), rgba(56, 128, 224, .3) 42%, transparent 74%); filter: blur(12px); opacity: .86; pointer-events: none; content: ""; }
.nav-icon { width: 24px; height: 24px; flex-basis: 24px; color: #c4d5e6; }
.sidebar .nav-icon svg { width: 20px; height: 20px; stroke-width: 1.7; }
.nav-item.active .nav-icon { color: #86c7ff; }

.sidebar-collapse-button { width: 100%; min-height: 44px; margin-top: auto; justify-content: center; border: 1px solid rgba(174, 207, 237, .12); border-radius: 9px; padding: 0 12px; color: #dce9f5; background: rgba(6, 24, 43, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.sidebar-collapse-button .menu-button-icon { font-size: 24px; font-weight: 500; }
.sidebar-collapse-button .menu-button-text { display: none; }
.sidebar-collapse-button:focus-visible { outline: 2px solid #74bbff; outline-offset: 2px; border-color: #74bbff; }
body.sidebar-collapsed .sidebar { padding: 28px 8px 16px; }
body.sidebar-collapsed .logo { width: 48px; min-height: 64px; height: 64px; margin: 0 auto 34px; align-items: center; }
body.sidebar-collapsed .sidebar-logo-wordmark { display: none; }
body.sidebar-collapsed .sidebar-logo-mark { display: block; width: 48px; height: auto; margin: 0 auto; }
body.sidebar-collapsed .sidebar-logo-toggle { top: 36px; right: 7px; width: 32px; min-height: 24px; border-color: transparent; background: transparent; }
body.sidebar-collapsed .sidebar-logo-toggle .menu-button-icon { font-size: 18px; transform: rotate(180deg); }

.topbar { display: none; height: 0; min-height: 0; padding: 0; border: 0; }
.topbar-navigation { display: none; }
.topbar:has(.time-management-topbar-back:not([hidden])) { display: flex; height: 56px; min-height: 56px; align-items: center; padding: 8px 22px; border-bottom: 1px solid #dfe8f1; background: #f7f9fc; }
.topbar:has(.time-management-topbar-back:not([hidden])) .topbar-navigation { display: flex; }

.sidebar-user-area { margin-top: auto; border-top: 1px solid rgba(205, 226, 244, .12); padding-top: 12px; }
.sidebar-user-switcher { display: block; width: 100%; min-width: 0; max-width: none; min-height: 58px; border: 0; border-radius: 13px; padding: 0; color: inherit; background: transparent; cursor: pointer; }
.sidebar-user-picker-art { display: block; max-width: 100%; height: auto; pointer-events: none; user-select: none; }
.sidebar-user-picker-wordmark { width: 100%; }
.sidebar-user-picker-mark { display: none; }
.sidebar-user-switcher:hover .sidebar-user-picker-wordmark { filter: brightness(1.12) saturate(1.06); transform: translateY(-1px); }
.sidebar-user-switcher:focus-visible { outline: 2px solid #86c7ff; outline-offset: 3px; }

body.sidebar-collapsed .sidebar-user-area { padding-top: 10px; }
body.sidebar-collapsed .sidebar-user-switcher { width: 44px; min-height: 44px; margin: 0 auto; border-radius: 13px; }
body.sidebar-collapsed .sidebar-user-picker-wordmark { display: none; }
body.sidebar-collapsed .sidebar-user-picker-mark { display: block; width: 44px; }
body.sidebar-collapsed .sidebar-user-switcher:hover .sidebar-user-picker-mark { filter: brightness(1.12) saturate(1.06); transform: translateY(-1px); }

@media (max-width: 760px) {
  .topbar:has(.time-management-topbar-back:not([hidden])) { height: 52px; min-height: 52px; padding-inline: 14px; }
}

/* Competitor research studio: manual YouTube research first. */
.monitoring-research-hero {
  min-height: 360px;
  padding: 46px 50px;
  background:
    radial-gradient(circle at 16% 2%, rgba(46, 137, 255, .2), transparent 34%),
    radial-gradient(circle at 88% 84%, rgba(53, 211, 174, .14), transparent 30%),
    linear-gradient(135deg, #101d33 0%, #152a45 57%, #102439 100%);
}
.monitoring-research-hero .monitoring-hero-copy { max-width: 680px; }
.monitoring-research-hero .monitoring-hero-copy > span { color: #72dccb; }
.monitoring-research-hero .monitoring-hero-copy h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.12; }
.monitoring-research-hero .monitoring-hero-copy h1 em { color: #8ec2ff; }
.monitoring-research-hero .monitoring-hero-copy p { max-width: 620px; font-size: 16px; }
.monitoring-research-hero .monitoring-hero-actions { margin-top: 28px; }
.monitoring-research-hero .monitoring-hero-actions button { min-height: 48px; border-radius: 12px; padding: 0 19px; }
.monitoring-research-hero .monitoring-hero-actions button.is-primary { border-color: transparent; color: #10213a; background: linear-gradient(135deg, #8ddfff, #70efce); box-shadow: 0 12px 28px rgba(74, 210, 198, .18); }
.monitoring-research-hero .monitoring-hero-actions button.is-primary:hover { background: linear-gradient(135deg, #a5e7ff, #88f4d8); transform: translateY(-1px); }
.monitoring-research-hero .monitoring-hero-actions button b { margin-left: 16px; font-size: 17px; }
.monitoring-research-flow { position: relative; z-index: 1; width: min(100%, 330px); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 24px; background: rgba(9, 23, 42, .5); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 20px 45px rgba(0,0,0,.18); backdrop-filter: blur(15px); }
.monitoring-research-flow > small { color: #7790ad; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.monitoring-research-flow article { display: flex; gap: 14px; align-items: center; margin-top: 18px; color: #8392a7; }
.monitoring-research-flow article > b { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; font-size: 11px; }
.monitoring-research-flow article span { display: grid; gap: 3px; margin: 0; }
.monitoring-research-flow article strong { color: #d2dae6; font-size: 14px; }
.monitoring-research-flow article em { color: #77879d; font-size: 11px; font-style: normal; }
.monitoring-research-flow article.is-active > b { border-color: rgba(83,224,190,.45); color: #81f0d5; background: rgba(64,209,174,.12); box-shadow: 0 0 25px rgba(54,216,177,.12); }
.monitoring-research-flow article.is-active strong { color: #fff; }
.monitoring-research-flow > i { display: block; width: 1px; height: 18px; margin: 2px 0 -12px 19px; background: linear-gradient(#48d3b3, rgba(255,255,255,.12)); }
.monitoring-research-flow > div { display: flex; align-items: end; justify-content: space-between; margin-top: 22px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; }
.monitoring-research-flow > div span { margin: 0; color: #8fa0b6; font-size: 12px; }
.monitoring-research-flow > div strong { color: #fff; font-size: 26px; }
.monitoring-research-flow > div strong em { margin-left: 3px; color: #8fa0b6; font-size: 11px; font-style: normal; }

.competitor-research-studio { display: grid; gap: 22px; color: #14213a; }
.competitor-studio-nav { display: flex; align-items: center; justify-content: space-between; }
.competitor-studio-nav .competitor-back-button { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; color: #53647a; cursor: pointer; }
.competitor-studio-nav .competitor-back-button:hover { color: #167b78; }
.competitor-studio-nav > span { color: #8a98aa; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.competitor-studio-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 260px; border: 1px solid #dce6ed; border-radius: 26px; padding: 38px 42px; background: radial-gradient(circle at 10% 0%, rgba(44,139,221,.12), transparent 38%), linear-gradient(135deg, #fbfdff 0%, #f2f8f8 100%); box-shadow: 0 20px 50px rgba(26, 54, 82, .08); }
.competitor-studio-hero::after { position: absolute; right: -80px; top: -150px; width: 330px; height: 330px; border: 1px solid rgba(38,121,238,.11); border-radius: 50%; content: ""; }
.competitor-studio-copy { position: relative; z-index: 1; }
.competitor-studio-kicker { display: block; margin-bottom: 12px; color: #15847b; font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.competitor-studio-copy h1 { margin: 0; color: #11213a; font-size: clamp(29px, 3.3vw, 43px); line-height: 1.17; letter-spacing: -.045em; }
.competitor-studio-copy h1 em { color: #2877c7; font-style: normal; }
.competitor-studio-copy p { margin: 16px 0 0; color: #66758a; font-size: 14px; line-height: 1.7; }
.competitor-stage-map { position: relative; z-index: 1; width: min(100%, 310px); border: 1px solid rgba(32,77,111,.1); border-radius: 19px; padding: 20px; background: rgba(255,255,255,.72); box-shadow: 0 14px 35px rgba(29,61,89,.07); backdrop-filter: blur(12px); }
.competitor-stage-map article { display: flex; gap: 13px; align-items: center; }
.competitor-stage-map article > b { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #dfe7ee; border-radius: 12px; color: #8a99aa; background: #fff; }
.competitor-stage-map article span { display: grid; gap: 3px; }
.competitor-stage-map article strong { color: #4f6076; font-size: 13px; }
.competitor-stage-map article small { color: #97a3b2; font-size: 11px; }
.competitor-stage-map article.is-active > b { border-color: #9cded5; color: #147d75; background: #eafaf6; box-shadow: 0 7px 18px rgba(39,167,151,.12); }
.competitor-stage-map article.is-active strong { color: #102a3c; }
.competitor-stage-map > i { display: block; width: 1px; height: 20px; margin: 2px 0 2px 19px; background: linear-gradient(#6fcfc0, #dfe7ee); }

.competitor-research-studio .competitor-new-layout { grid-template-columns: minmax(0, 1.4fr) minmax(330px, .6fr); gap: 24px; }
.competitor-research-studio .competitor-section { border: 1px solid #e0e8ef; border-radius: 22px; background: #fff; box-shadow: 0 16px 42px rgba(35,63,91,.065); }
.competitor-research-studio .competitor-new-form { gap: 0; padding: 0 30px; }
.competitor-research-studio .competitor-form-block { gap: 18px; padding: 30px 0; }
.competitor-research-studio .competitor-form-block + .competitor-form-block { border-top: 1px solid #edf1f5; }
.competitor-block-heading { display: flex; gap: 14px; align-items: flex-start; }
.competitor-block-heading > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; color: #167f78; background: #e9f8f5; font-size: 11px; font-weight: 950; }
.competitor-block-heading h2 { font-size: 18px; }
.competitor-block-heading p { margin: 5px 0 0; color: #8491a2; font-size: 12px; line-height: 1.5; }
.competitor-research-studio .competitor-choice-grid { gap: 12px; }
.competitor-research-studio .competitor-choice-card { min-height: 112px; border-color: #e2e8ee; border-radius: 15px; padding: 17px; box-shadow: none; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.competitor-research-studio .competitor-choice-card:hover { border-color: #b4cbc9; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,65,89,.08); }
.competitor-research-studio .competitor-choice-card.active { border-color: #3ba69c; background: linear-gradient(145deg, #f7fffd, #effaf8); box-shadow: 0 0 0 3px rgba(59,166,156,.09); }
.competitor-research-studio .competitor-choice-icon { top: 15px; right: 15px; width: 34px; height: 34px; border-radius: 11px; color: #187e77; background: #e8f7f4; }
.competitor-research-studio .competitor-choice-card strong { align-self: end; padding-right: 38px; font-size: 14px; }
.competitor-research-studio .competitor-choice-card small { margin-top: 5px; color: #58697f; }
.competitor-research-studio .competitor-choice-card em { margin-top: 3px; color: #97a2b0; font-size: 11px; }
.competitor-research-studio .competitor-choice-card b { right: 14px; bottom: 11px; color: #168278; }
.competitor-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.competitor-rule-grid .competitor-field { border: 1px solid #e3e9ef; border-radius: 15px; padding: 15px; background: #fafcfd; }
.competitor-rule-grid .competitor-field > small { color: #53657a; font-size: 11px; }
.competitor-rule-grid .competitor-field select { border-color: #d9e2ea; border-radius: 10px; background-color: #fff; }
.competitor-rule-grid .competitor-field span { min-height: 30px; line-height: 1.45; }
.competitor-baseline-field { display: grid; align-content: center; gap: 6px; border: 1px solid #e3e9ef; border-radius: 15px; padding: 15px 17px; background: #fafcfd; }
.competitor-baseline-field > small { color: #30445c; font-size: 12px; font-weight: 950; }
.competitor-baseline-field > p { margin: 0; color: #7b899b; font-size: 12px; font-weight: 750; line-height: 1.5; }
.competitor-baseline-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.competitor-baseline-choice { position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr) 24px; align-items: center; gap: 13px; min-height: 112px; border: 1px solid #dfe7ee; border-radius: 17px; padding: 17px; color: #25384f; background: #fff; text-align: left; cursor: pointer; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.competitor-baseline-choice:hover { border-color: #abcac5; transform: translateY(-2px); box-shadow: 0 13px 30px rgba(24,68,88,.08); }
.competitor-baseline-choice.active { border-color: #35a398; background: linear-gradient(145deg,#f8fffd,#eef9f7); box-shadow: 0 0 0 3px rgba(53,163,152,.1); }
.competitor-baseline-choice-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #187e77; background: #e7f7f3; font-size: 11px; font-weight: 950; }
.competitor-baseline-choice > span:nth-child(2) { display: grid; gap: 5px; }
.competitor-baseline-choice small { justify-self: start; border-radius: 999px; padding: 3px 7px; color: #177d75; background: #e5f7f3; font-size: 10px; font-weight: 950; }
.competitor-baseline-choice strong { color: #172940; font-size: 15px; font-weight: 950; line-height: 1.35; }
.competitor-baseline-choice em { color: #78879a; font-size: 11px; font-style: normal; font-weight: 750; line-height: 1.5; }
.competitor-baseline-choice > b { color: #168278; font-size: 18px; }

.competitor-research-studio .competitor-preview-panel { top: 24px; gap: 17px; overflow: hidden; padding: 26px; background: linear-gradient(180deg, #14233b 0%, #172b45 100%); color: #fff; box-shadow: 0 22px 55px rgba(15,35,60,.18); }
.competitor-research-studio .competitor-preview-panel::before { position: absolute; right: -100px; top: -120px; width: 280px; height: 280px; border: 1px solid rgba(101,235,204,.1); border-radius: 50%; content: ""; pointer-events: none; }
.competitor-preview-eyebrow { position: relative; display: flex; align-items: center; justify-content: space-between; }
.competitor-preview-eyebrow span { color: #7fe1cf; font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.competitor-preview-eyebrow b { border: 1px solid rgba(126,225,207,.22); border-radius: 999px; padding: 6px 9px; color: #93e9d9; background: rgba(72,200,177,.08); font-size: 9px; letter-spacing: .1em; }
.competitor-research-studio .competitor-preview-panel > h2 { position: relative; margin: 0; color: #fff; font-size: 23px; }
.competitor-preview-date { position: relative; margin: -10px 0 2px; color: #91a3bb; font-size: 12px; }
.competitor-research-studio .competitor-preview-stack { gap: 9px; }
.competitor-research-studio .competitor-preview-stack article { min-height: 82px; border-color: rgba(255,255,255,.09); border-radius: 14px; padding: 14px; background: rgba(255,255,255,.055); box-shadow: none; }
.competitor-research-studio .competitor-preview-icon { width: 46px; height: 46px; border-radius: 14px; }
.competitor-research-studio .competitor-preview-stack small { color: #91a2b8; }
.competitor-research-studio .competitor-preview-stack strong { color: #fff; }
.competitor-research-studio .competitor-preview-stack em { color: #7f91a8; }
.competitor-source-note { display: flex; gap: 12px; border: 1px solid rgba(120,220,200,.13); border-radius: 14px; padding: 14px; background: rgba(59,190,166,.07); }
.competitor-source-note > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; color: #0f2034; background: #7de2d0; font-size: 12px; font-weight: 950; }
.competitor-source-note strong { display: block; color: #dffcf7; font-size: 12px; }
.competitor-source-note p { margin: 5px 0 0; color: #8fa5b8; font-size: 11px; line-height: 1.55; }
.competitor-research-studio .competitor-start-button { min-height: 51px; border: 0; border-radius: 13px; color: #10223b; background: linear-gradient(135deg, #8de3ff, #71e7c8); box-shadow: 0 13px 26px rgba(72,210,187,.15); }
.competitor-research-studio .competitor-start-button:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.competitor-research-studio .competitor-preview-help { margin: -7px 0 0; color: #8395aa; }

@media (max-width: 1120px) {
  .monitoring-research-hero { padding: 38px 34px; }
  .competitor-studio-hero { align-items: flex-start; flex-direction: column; }
  .competitor-stage-map { width: 100%; }
  .competitor-research-studio .competitor-new-layout { grid-template-columns: 1fr; }
  .competitor-research-studio .competitor-preview-panel { position: relative; top: 0; }
}
@media (max-width: 760px) {
  .page.competitor-page { padding: 12px 8px 24px; }
  .competitor-page-inner { padding: 10px 4px 28px; }
  .monitoring-research-hero { min-height: 0; padding: 28px 22px; }
  .monitoring-research-hero .monitoring-hero-copy h1 { font-size: 32px; }
  .monitoring-research-hero .monitoring-hero-actions { align-items: stretch; flex-direction: column; }
  .monitoring-research-flow { width: 100%; }
  .competitor-studio-nav > span { display: none; }
  .competitor-studio-hero { gap: 26px; min-height: 0; border-radius: 20px; padding: 27px 21px; }
  .competitor-studio-copy h1 { font-size: 28px; }
  .competitor-studio-copy h1 br { display: none; }
  .competitor-research-studio .competitor-new-form { padding: 0 19px; }
  .competitor-research-studio .competitor-form-block { padding: 24px 0; }
  .competitor-research-studio .competitor-choice-grid,
  .competitor-rule-grid,
  .competitor-baseline-choice-grid { grid-template-columns: 1fr; }
  .competitor-research-studio .competitor-choice-card { min-height: 98px; }
}

/* 편성 팝업 최종 재정의: 기존 화면 규칙보다 뒤에서 적용 */
.modal.cast-slot-modal { width: min(900px, calc(100vw - 40px)); max-height: min(860px, calc(100vh - 32px)); border-radius: 24px; }
.cast-slot-form-grid, .cast-slot-clean-body { gap: 0; padding: 0; }
.cast-slot-role-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.cast-slot-role-card { min-height: 126px; border-radius: 14px; }
.cast-slot-role-card-main { min-height: 124px; gap: 7px; padding: 13px; }
.cast-slot-role-card.is-empty .cast-slot-role-card-main { min-height: 124px; }
.cast-slot-role-card.is-empty .cast-slot-role-card-main > i { width: 34px; height: 34px; }
.cast-slot-role-card.is-empty small { display: none; }
.cast-slot-selected-person { grid-template-columns: 40px minmax(0,1fr); margin-top: 4px; }
.cast-slot-selected-person > i { width: 40px; height: 40px; border-radius: 11px; }
.cast-slot-role-card-main footer { padding-top: 7px; }
.cast-slot-role-remove { bottom: 7px; }
.cast-slot-confirmed-choice { padding: 13px 15px; background: #f7faf9; }
.cast-slot-modal .modal-foot { min-height: 73px; padding: 13px 25px; border-top: 1px solid #e3ebe8; background: #fbfdfc; }
.cast-live-create-modal { width: min(900px, calc(100vw - 40px)); max-height: calc(100vh - 40px); border-radius: 24px; }
.cast-live-create-body { padding: 24px 29px 29px; }
.cast-live-preset-grid { gap: 12px; }
.cast-live-preset-card { min-height: 128px; border-radius: 15px; padding: 16px; }
.cast-live-create-schedule { grid-template-columns: repeat(3,minmax(0,1fr)); }
.cast-live-create-schedule label, .cast-live-create-schedule input { min-width: 0; }
.cast-live-create-schedule input { width: 100%; }
.modal-backdrop:has(.cast-live-drawer) { place-items: center; padding: 20px; }
.cast-live-drawer { width: min(860px, calc(100vw - 40px)); height: auto; max-height: calc(100vh - 40px); border-radius: 24px; box-shadow: 0 30px 95px rgba(15,48,57,.25); }
.cast-live-drawer .cast-live-detail-head { min-height: 118px; padding: 26px 30px; }
.cast-live-detail-body { padding: 0; }
.cast-live-planning-section { min-height: 390px; padding: 28px 30px 32px; border: 0; }
.cast-live-person-card, .cast-live-add-guest { min-height: 128px; border-radius: 15px; }
.cast-live-drawer .modal-foot { min-height: 72px; padding: 13px 26px; }
.cast-derived-modal { width: min(720px, calc(100vw - 40px)); max-height: calc(100vh - 40px); border-radius: 24px; }
.cast-derived-form-grid { gap: 16px; padding: 24px 28px 29px; }
@media (max-width: 720px) {
  .modal.cast-slot-modal, .cast-live-create-modal, .cast-live-drawer, .cast-derived-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 18px; }
  .cast-slot-role-grid { grid-template-columns: 1fr; }
  .cast-live-drawer { height: auto; }
}

/* 콘텐츠 역할 연동과 편성 전체 흐름 */
.cast-role-category-field { align-content: start; }
.cast-role-category-field > small { margin-top: 1px; color: #718780; font-size: 10px; font-weight: 750; line-height: 1.45; }
.cast-schedule-view-guide { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; border: 1px solid #dce9e5; border-radius: 12px; padding: 11px 14px; background: #f7fbf9; }
.cast-schedule-view-guide strong { flex: 0 0 auto; color: #176b59; font-size: 12px; }
.cast-schedule-view-guide span { color: #667c75; font-size: 11px; line-height: 1.45; }
.cast-flow-overview { overflow: hidden; }
.cast-flow-table { overflow-x: auto; padding: 0 18px 22px; }
.cast-flow-head, .cast-flow-row { display: grid; min-width: 690px; grid-template-columns: minmax(170px,1.25fr) repeat(3,minmax(140px,1fr)); gap: 0; }
.cast-flow-head { border-bottom: 1px solid #dce8e4; color: #71837d; font-size: 10px; font-weight: 900; }
.cast-flow-head > span { padding: 10px 13px; }
.cast-flow-row { width: 100%; border: 0; border-bottom: 1px solid #e6eeeb; padding: 0; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .16s ease; }
.cast-flow-row:hover { background: #f7fbf9; }
.cast-flow-row:last-child { border-bottom: 0; }
.cast-flow-row > span { display: grid; min-width: 0; align-content: center; gap: 5px; min-height: 98px; border-right: 1px solid #edf2f0; padding: 13px; }
.cast-flow-row > span:last-child { border-right: 0; }
.cast-flow-row b { color: #72837e; font-size: 9px; font-weight: 900; }
.cast-flow-row strong { overflow: hidden; color: #294f46; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cast-flow-row small { overflow: hidden; color: #7a8d86; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.cast-flow-row .cast-flow-content strong { color: #173f37; font-size: 13px; }
.cast-flow-row .cast-flow-content > i { width: max-content; max-width: 100%; font-size: 9px; font-style: normal; }
.cast-flow-row > .is-confirmed { background: #f2f9f6; }
.cast-flow-row > .is-confirmed b { color: #16745f; }
.cast-flow-row.is-live > span:last-child { background: #eff8fa; }
.cast-flow-row.is-derived > span:last-child { background: #f8f5fc; }
.cast-flow-empty { margin: 0; padding: 34px 16px; color: #82928d; font-size: 12px; text-align: center; }
@media (max-width: 720px) {
  .cast-schedule-view-guide { align-items: flex-start; flex-direction: column; gap: 3px; }
  .cast-flow-head { display: none; }
  .cast-flow-row { min-width: 0; grid-template-columns: 1fr; margin: 12px 0; border: 1px solid #dde9e5; border-radius: 14px; }
  .cast-flow-row > span { min-height: 74px; border-right: 0; border-bottom: 1px solid #edf2f0; }
  .cast-flow-row > span:last-child { border-bottom: 0; }
}

/* 편집국 업무표 스타일: 장식보다 정렬과 기록 흐름을 우선 */
.modal.cast-slot-modal { width: min(840px,calc(100vw - 32px)); border: 1px solid #aebeb8; border-radius: 10px; box-shadow: 0 18px 48px rgba(24,49,42,.18); }
.cast-slot-clean-head { min-height: 0; align-items: flex-start; padding: 21px 26px 19px; border-bottom: 1px solid #cfdad6; background: #fff; }
.cast-slot-clean-head > div { gap: 3px; }
.cast-slot-clean-head h2 { color: #193c34; font-size: 23px; letter-spacing: -.025em; }
.cast-slot-clean-head .muted { margin-top: 3px; color: #687b75; font-size: 11px; }
.cast-slot-modal-eyebrow { margin-bottom: 2px; color: #3b6258; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.cast-slot-clean-head .icon-button { width: 34px; height: 34px; border-radius: 4px; }
.cast-slot-tab-panel { gap: 0; padding: 0 27px 28px; }
.cast-editorial-section-title { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: start; gap: 10px; margin-top: 21px; border-top: 1px solid #dce4e1; padding-top: 18px; }
.cast-editorial-section-title:first-child { margin-top: 0; border-top: 0; padding-top: 20px; }
.cast-editorial-section-title > span { padding-top: 2px; color: #71847d; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.cast-editorial-section-title > div { display: grid; gap: 2px; }
.cast-editorial-section-title strong { color: #264b42; font-size: 14px; letter-spacing: -.01em; }
.cast-editorial-section-title small { color: #7c8d87; font-size: 10px; line-height: 1.45; }
.cast-editorial-core-grid, .cast-editorial-copy-grid { margin-top: 14px; }
.cast-editorial-core-grid { align-items: start; }
.cast-editorial-core-grid > label, .cast-editorial-copy-grid > label { align-self: start; align-content: start; }
.cast-editorial-core-grid > label > small { min-height: 28px; margin: 0; color: #778983; font-size: 9px; font-weight: 650; line-height: 1.45; }
.cast-slot-primary-grid label > span { padding-left: 0; color: #3d5951; font-size: 10px; letter-spacing: .01em; }
.cast-slot-clean-body select, .cast-slot-clean-body input, .cast-slot-clean-body textarea { min-height: 44px; border-color: #becbc7; border-radius: 5px; padding: 9px 11px; color: #203f37; font-size: 12px; transition: border-color .12s ease, outline-color .12s ease; }
.cast-slot-clean-body select:focus, .cast-slot-clean-body input:focus, .cast-slot-clean-body textarea:focus { border-color: #2f7362; background: #fff; box-shadow: none; outline: 2px solid rgba(47,115,98,.12); outline-offset: 0; }
.cast-slot-clean-body .cast-planning-intent textarea { min-height: 78px; border-color: #aebfb9; border-radius: 5px; background: #fff; font-size: 12px !important; }
.cast-slot-date-block { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); align-items: end; gap: 10px; margin-top: 14px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.cast-slot-date-block > i { margin-top: 0; padding-bottom: 14px; color: #7f918b; }
.cast-slot-date-block label { gap: 6px; color: #3d5951; font-size: 10px; }
.cast-schedule-preview { grid-template-columns: 1fr 1fr auto; gap: 0; margin-top: 13px; padding: 0; border: 1px solid #c9d5d1; border-radius: 5px; background: #fff; }
.cast-schedule-preview > div { min-height: 62px; align-content: center; gap: 3px; border-right: 1px solid #dbe3e0; padding: 10px 13px; }
.cast-schedule-preview span { color: #6f817b; font-size: 9px; }
.cast-schedule-preview strong { color: #244d42; font-size: 12px; }
.cast-schedule-preview > b { align-self: center; margin: 0 12px; border: 0; border-radius: 0; padding: 0; background: transparent; color: #667a73; font-size: 9px; font-weight: 800; }
.cast-schedule-adjustment { margin-top: 10px; border-color: #d5dfdb; border-radius: 5px; background: #fff; }
.cast-schedule-adjustment summary { padding: 11px 13px; color: #536b63; font-size: 10px; }
.cast-slot-modal .modal-foot { min-height: 64px; padding: 11px 25px; border-top-color: #cfdad6; background: #f7f9f8; }
.cast-slot-modal .modal-foot button { min-height: 38px; border-radius: 4px; }
.cast-slot-modal .primary-button { box-shadow: none; }
@media (max-width: 720px) {
  .modal.cast-slot-modal { border-radius: 6px; }
  .cast-slot-clean-head { padding: 18px; }
  .cast-slot-tab-panel { padding-inline: 18px; }
  .cast-editorial-core-grid { grid-template-columns: 1fr; }
  .cast-slot-date-block { grid-template-columns: 1fr; }
  .cast-slot-date-block > i { display: none; }
  .cast-schedule-preview { grid-template-columns: 1fr; }
  .cast-schedule-preview > div { border-right: 0; border-bottom: 1px solid #dbe3e0; }
  .cast-schedule-preview > b { margin-block: 10px; }
}

/* Competitor main landing: the first screen before a research run. */
.competitor-main-landing { display: grid; gap: 22px; color: #14233b; }
.competitor-main-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(310px,.6fr); gap: 42px; min-height: 390px; border: 1px solid rgba(29,70,106,.16); border-radius: 28px; padding: 50px; background: radial-gradient(circle at 10% 0%, rgba(54,145,255,.22), transparent 36%), radial-gradient(circle at 92% 92%, rgba(56,215,178,.15), transparent 31%), linear-gradient(137deg,#101d32 0%,#162d49 60%,#10243b 100%); box-shadow: 0 24px 60px rgba(17,38,64,.17); }
.competitor-main-hero::before { position: absolute; z-index: -1; right: -130px; top: -230px; width: 500px; height: 500px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; }
.competitor-main-hero::after { position: absolute; z-index: -1; right: 105px; bottom: -240px; width: 380px; height: 380px; border: 1px solid rgba(112,232,207,.08); border-radius: 50%; content: ""; }
.competitor-main-copy { align-self: center; max-width: 710px; }
.competitor-main-kicker { display: block; margin-bottom: 18px; color: #7ce4d0; font-size: 10px; font-weight: 950; letter-spacing: .2em; }
.competitor-main-copy h1 { margin: 0; color: #fff; font-size: clamp(36px,4.4vw,56px); line-height: 1.11; letter-spacing: -.052em; }
.competitor-main-copy h1 em { color: #91c4ff; font-style: normal; }
.competitor-main-copy p { max-width: 650px; margin: 20px 0 0; color: #b8c5d7; font-size: 15px; line-height: 1.75; }
.competitor-main-actions { display: flex; gap: 10px; margin-top: 30px; }
.competitor-main-actions button { min-height: 50px; border-radius: 13px; padding: 0 20px; font-size: 13px; font-weight: 950; cursor: pointer; transition: transform .16s ease,filter .16s ease,background .16s ease; }
.competitor-main-primary { border: 0; color: #10223a; background: linear-gradient(135deg,#91e3ff,#70e8c8); box-shadow: 0 14px 30px rgba(77,213,190,.18); }
.competitor-main-primary b { margin-left: 20px; font-size: 17px; }
.competitor-main-primary:hover { filter: brightness(1.05); transform: translateY(-2px); }
.competitor-main-history { border: 1px solid rgba(126,231,209,.35); color: #9cebdc; background: rgba(75,205,180,.11); backdrop-filter: blur(10px); }
.competitor-main-history b { margin-left: 10px; }
.competitor-main-history:hover { border-color: rgba(126,231,209,.58); background: rgba(75,205,180,.17); transform: translateY(-2px); }
.competitor-main-secondary { border: 1px solid rgba(255,255,255,.16); color: #eaf2fa; background: rgba(255,255,255,.07); backdrop-filter: blur(10px); }
.competitor-main-secondary:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.competitor-main-signal { align-self: center; border: 1px solid rgba(255,255,255,.12); border-radius: 23px; padding: 24px; background: rgba(7,21,39,.46); box-shadow: inset 0 1px rgba(255,255,255,.06),0 24px 50px rgba(3,12,25,.2); backdrop-filter: blur(16px); }
.competitor-signal-orbit { position: relative; display: grid; justify-items: end; min-height: 76px; border-bottom: 1px solid rgba(255,255,255,.09); padding: 0 0 18px 48px; }
.competitor-signal-orbit i { position: absolute; left: 8px; top: 20px; width: 11px; height: 11px; border-radius: 50%; background: #54dfbd; box-shadow: 0 0 0 9px rgba(84,223,189,.09),0 0 26px rgba(84,223,189,.3); }
.competitor-signal-orbit span { color: #6fdac4; font-size: 9px; font-weight: 950; letter-spacing: .17em; }
.competitor-signal-orbit strong { color: #fff; font-size: 34px; line-height: 1; }
.competitor-signal-orbit small { color: #8295ad; font-size: 10px; }
.competitor-main-signal ol { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.competitor-main-signal li { display: flex; gap: 13px; align-items: center; border-radius: 13px; padding: 10px; color: #8798ae; }
.competitor-main-signal li.is-active { background: rgba(73,208,180,.08); }
.competitor-main-signal li > b { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; font-size: 9px; }
.competitor-main-signal li.is-active > b { border-color: rgba(93,226,198,.35); color: #7ee7d1; background: rgba(77,211,183,.1); }
.competitor-main-signal li span { display: grid; gap: 3px; }
.competitor-main-signal li strong { color: #dce5f0; font-size: 12px; }
.competitor-main-signal li small { color: #778aa2; font-size: 10px; }

.competitor-main-start,.competitor-main-overview,.competitor-main-results,.competitor-main-data-state { border: 1px solid #e0e8ef; border-radius: 23px; background: rgba(255,255,255,.92); box-shadow: 0 16px 42px rgba(31,60,88,.07); }
.competitor-main-start { padding: 30px; }
.competitor-main-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.competitor-main-section-head span { color: #16857c; font-size: 9px; font-weight: 950; letter-spacing: .17em; }
.competitor-main-section-head h2 { margin: 7px 0 0; color: #14233b; font-size: 24px; letter-spacing: -.03em; }
.competitor-main-section-head p { margin: 7px 0 0; color: #7b899b; font-size: 12px; }
.competitor-main-section-head > small { border: 1px solid #e1e9ef; border-radius: 999px; padding: 8px 11px; color: #75859a; background: #f8fafc; font-size: 10px; }
.competitor-main-periods { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 23px; }
.competitor-main-periods button { position: relative; overflow: hidden; display: grid; min-height: 164px; border: 1px solid #e0e7ed; border-radius: 17px; padding: 19px; color: #15243c; background: #fff; text-align: left; cursor: pointer; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.competitor-main-periods button:hover { border-color: #9fcac5; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(28,72,94,.09); }
.competitor-main-periods button.is-recommended { border-color: #8fd4ca; background: linear-gradient(145deg,#fbfffe,#f0faf8); box-shadow: 0 0 0 3px rgba(64,172,156,.07); }
.competitor-main-periods button > span { display: flex; align-items: center; justify-content: space-between; color: #8795a6; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.competitor-main-periods button > span b { color: #1b897f; font-size: 10px; }
.competitor-main-periods button > strong { align-self: end; margin-top: 20px; font-size: 20px; letter-spacing: -.03em; }
.competitor-main-periods button > small { margin-top: 5px; color: #53667d; font-size: 11px; font-weight: 850; }
.competitor-main-periods button > em { margin-top: 7px; color: #96a2b0; font-size: 10px; font-style: normal; }
.competitor-main-periods button > i { position: absolute; right: 18px; bottom: 17px; color: #18877d; font-size: 17px; font-style: normal; }
.competitor-main-overview { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(290px,.6fr); gap: 0; overflow: hidden; }
.competitor-main-numbers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 25px 28px; }
.competitor-main-numbers article { display: grid; gap: 7px; padding: 5px 22px; }
.competitor-main-numbers article + article { border-left: 1px solid #e8edf2; }
.competitor-main-numbers span { color: #7a899b; font-size: 10px; font-weight: 900; }
.competitor-main-numbers strong { color: #14243c; font-size: 29px; }
.competitor-main-numbers strong em { margin-left: 3px; color: #75859a; font-size: 11px; font-style: normal; }
.competitor-main-numbers small { color: #9aa5b2; font-size: 10px; }
.competitor-main-rule { padding: 27px 29px; color: #dbe6f1; background: linear-gradient(135deg,#1c344d,#193047); }
.competitor-main-rule > span { color: #78dfca; font-size: 9px; font-weight: 950; letter-spacing: .13em; }
.competitor-main-rule strong { display: block; margin-top: 8px; color: #fff; font-size: 15px; }
.competitor-main-rule p { margin: 8px 0 0; color: #93a7bb; font-size: 11px; line-height: 1.6; }
.competitor-main-results { display: grid; gap: 20px; padding: 30px; }
.competitor-main-section-head > button { min-height: 40px; border: 1px solid #b9d8d3; border-radius: 11px; padding: 0 15px; color: #187d75; background: #f4fbfa; font-size: 11px; font-weight: 900; cursor: pointer; }
.competitor-main-section-head > button:hover { border-color: #74baaf; background: #eaf7f5; }
.competitor-local-history .competitor-report-grid { margin-top: 2px; }
.competitor-server-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 28px; overflow: hidden; border: 1px solid #c9d9ea; border-radius: 21px; padding: 25px 28px; background: radial-gradient(circle at 100% 0,rgba(90,143,222,.13),transparent 36%),linear-gradient(135deg,#f8fbff,#f3f8fd); box-shadow: 0 14px 34px rgba(39,76,117,.07); }
.competitor-server-save-bar > div { display: grid; gap: 7px; }
.competitor-server-save-bar span { color: #4b73a5; font-size: 9px; font-weight: 950; letter-spacing: .16em; }
.competitor-server-save-bar strong { color: #172b46; font-size: 17px; letter-spacing: -.02em; }
.competitor-server-save-bar p { margin: 0; color: #7c8da1; font-size: 11px; }
.competitor-server-save-bar > button { min-height: 46px; flex: 0 0 auto; border: 0; border-radius: 12px; padding: 0 18px; color: #fff; background: linear-gradient(135deg,#315f96,#397ab3); box-shadow: 0 12px 24px rgba(49,95,150,.2); font-size: 11px; font-weight: 950; cursor: pointer; }
.competitor-server-save-bar > button b { margin-left: 12px; }
.competitor-server-save-bar.is-saved { border-color: #aed8cf; background: radial-gradient(circle at 100% 0,rgba(73,194,168,.14),transparent 38%),linear-gradient(135deg,#fbfffe,#f1faf8); }
.competitor-server-save-bar.is-saved span { color: #16867b; }
.competitor-server-save-bar.is-saved > button { background: linear-gradient(135deg,#207f75,#35a293); }
.competitor-server-report-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.competitor-server-report-card { display: grid; gap: 18px; border: 1px solid #dde6ef; border-radius: 17px; padding: 19px; background: linear-gradient(145deg,#fff,#f8fbfe); }
.competitor-server-report-card > div:first-child { display: grid; gap: 5px; }
.competitor-server-report-card > div:first-child span { color: #4a72a2; font-size: 8px; font-weight: 950; letter-spacing: .14em; }
.competitor-server-report-card > div:first-child strong { color: #172a43; font-size: 17px; }
.competitor-server-report-card > div:first-child small { overflow: hidden; color: #7f8ea0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.competitor-server-report-card dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; border: 1px solid #e6edf3; border-radius: 12px; background: #fff; }
.competitor-server-report-card dl div { display: grid; gap: 3px; padding: 10px; }
.competitor-server-report-card dl div + div { border-left: 1px solid #e8eef3; }
.competitor-server-report-card dt { color: #96a2b0; font-size: 8px; }
.competitor-server-report-card dd { margin: 0; color: #3f5875; font-size: 11px; font-weight: 900; }
.competitor-server-report-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.competitor-server-report-card footer > span { color: #98a4b1; font-size: 8px; }
.competitor-server-report-card footer div { display: flex; gap: 6px; }
.competitor-server-report-card footer button { min-height: 31px; border: 1px solid #cfdeeb; border-radius: 9px; padding: 0 9px; color: #426789; background: #f8fbfd; font-size: 9px; font-weight: 900; cursor: pointer; }
.competitor-server-report-card footer button:last-child { color: #a84a55; }
.competitor-server-preview-modal,.competitor-server-report-modal { width: min(760px,calc(100vw - 32px)); }
.competitor-server-preview-modal .modal-head span,.competitor-server-report-modal .modal-head span { color: #4775a8; font-size: 8px; font-weight: 950; letter-spacing: .16em; }
.competitor-server-preview-modal .modal-head h2,.competitor-server-report-modal .modal-head h2 { margin: 5px 0 0; }
.competitor-server-preview-size { display: grid; justify-items: center; gap: 6px; border: 1px solid #cbddeb; border-radius: 18px; padding: 23px; background: radial-gradient(circle at 50% 0,rgba(79,139,205,.14),transparent 52%),#f7fbff; text-align: center; }
.competitor-server-preview-size span { color: #65809f; font-size: 9px; font-weight: 900; }
.competitor-server-preview-size strong { color: #285f93; font-size: 29px; }
.competitor-server-preview-size small { color: #8998a9; font-size: 10px; }
.competitor-server-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }
.competitor-server-preview-grid article { display: grid; gap: 5px; border: 1px solid #e1e8ef; border-radius: 13px; padding: 14px; background: #fff; }
.competitor-server-preview-grid span { color: #8b99a9; font-size: 9px; }
.competitor-server-preview-grid strong { color: #253b56; font-size: 14px; }
.competitor-server-preview-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.competitor-server-preview-rules div { border-radius: 13px; padding: 15px; }
.competitor-server-preview-rules div:first-child { color: #176e68; background: #eef9f7; }
.competitor-server-preview-rules div:last-child { color: #5c6775; background: #f3f5f7; }
.competitor-server-preview-rules strong { font-size: 11px; }
.competitor-server-preview-rules p { margin: 6px 0 0; color: inherit; font-size: 9px; line-height: 1.55; opacity: .8; }
.competitor-server-report-list { margin-top: 20px; }
.competitor-server-report-list h3 { color: #203752; font-size: 14px; }
.competitor-server-report-list a { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 11px; align-items: center; border-top: 1px solid #e8edf2; padding: 12px 4px; color: inherit; text-decoration: none; }
.competitor-server-report-list a > b { color: #4a78a5; font-size: 9px; }
.competitor-server-report-list a > span { display: grid; gap: 4px; min-width: 0; }
.competitor-server-report-list a strong { overflow: hidden; color: #24384f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.competitor-server-report-list a small { color: #8a97a7; font-size: 9px; }
.competitor-server-report-list a em { color: #197c73; font-size: 11px; font-style: normal; font-weight: 950; }
.competitor-main-results .monitoring-dashboard.is-embedded { gap: 15px; }
.competitor-main-data-state { overflow: hidden; padding: 18px; }
.competitor-main-data-state .monitoring-empty { min-height: 210px; box-shadow: none; }

@media (max-width: 1080px) {
  .competitor-main-hero { grid-template-columns: 1fr; padding: 38px; }
  .competitor-main-signal { display: grid; grid-template-columns: 150px 1fr; gap: 20px; }
  .competitor-signal-orbit { align-content: center; border-right: 1px solid rgba(255,255,255,.09); border-bottom: 0; padding: 0 20px 0 42px; }
  .competitor-main-signal ol { grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; }
  .competitor-main-signal li { align-items: flex-start; }
  .competitor-main-overview { grid-template-columns: 1fr; }
  .competitor-server-report-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .competitor-main-landing { gap: 15px; }
  .competitor-main-hero { gap: 28px; min-height: 0; border-radius: 21px; padding: 28px 21px; }
  .competitor-main-copy h1 { font-size: 32px; }
  .competitor-main-copy h1 br { display: none; }
  .competitor-main-copy p { font-size: 13px; }
  .competitor-main-actions { align-items: stretch; flex-direction: column; }
  .competitor-main-signal { display: block; padding: 18px; }
  .competitor-signal-orbit { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); padding: 0 0 15px 42px; }
  .competitor-main-signal ol { grid-template-columns: 1fr; margin-top: 12px; }
  .competitor-main-start { border-radius: 19px; padding: 22px 18px; }
  .competitor-main-section-head { align-items: flex-start; flex-direction: column; }
  .competitor-main-periods { grid-template-columns: 1fr; }
  .competitor-main-periods button { min-height: 145px; }
  .competitor-main-overview { border-radius: 19px; }
  .competitor-main-numbers { grid-template-columns: 1fr; padding: 16px 20px; }
  .competitor-main-numbers article { padding: 14px 3px; }
  .competitor-main-numbers article + article { border-top: 1px solid #e8edf2; border-left: 0; }
  .competitor-main-results { padding: 22px 16px; }
  .competitor-server-save-bar { align-items: stretch; flex-direction: column; padding: 21px 18px; }
  .competitor-server-report-grid,.competitor-server-preview-grid,.competitor-server-preview-rules { grid-template-columns: 1fr; }
  .competitor-server-report-card footer { align-items: flex-start; flex-direction: column; }
}

/* Manual YouTube run state. */
.competitor-new-layout.is-running { grid-template-columns: 1fr; }
.competitor-new-layout.is-running > .competitor-new-form,
.competitor-new-layout.is-running > .competitor-preview-panel { display: none; }
.competitor-run-progress { position: relative; overflow: hidden; display: grid; grid-template-columns: 150px minmax(0,1fr) minmax(310px,.65fr); gap: 34px; align-items: center; min-height: 390px; border: 1px solid #dbe7ed; border-radius: 24px; padding: 42px; background: radial-gradient(circle at 2% 3%,rgba(55,170,206,.12),transparent 32%),linear-gradient(145deg,#fff,#f3f8f8); box-shadow: 0 20px 52px rgba(23,57,82,.09); }
.competitor-run-progress::after { position: absolute; right: -130px; bottom: -190px; width: 380px; height: 380px; border: 1px solid rgba(32,139,126,.09); border-radius: 50%; content: ""; }
.competitor-run-visual { position: relative; display: grid; place-items: center; width: 126px; height: 126px; border-radius: 50%; background: #132941; box-shadow: 0 18px 42px rgba(18,43,68,.2); }
.competitor-run-visual span,.competitor-run-visual i { position: absolute; inset: -10px; border: 1px solid rgba(38,168,151,.25); border-top-color: #45cdb9; border-radius: 50%; animation: competitor-run-spin 2.4s linear infinite; }
.competitor-run-visual i { inset: 10px; border-color: rgba(93,174,255,.18); border-bottom-color: #75b9ff; animation-direction: reverse; animation-duration: 1.8s; }
.competitor-run-visual b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; color: #10243b; background: linear-gradient(135deg,#91e4ff,#72e8c9); font-size: 21px; }
@keyframes competitor-run-spin { to { transform: rotate(360deg); } }
.competitor-run-copy > span { color: #15867c; font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.competitor-run-copy h2 { margin: 12px 0 0; color: #14253e; font-size: clamp(26px,3vw,38px); line-height: 1.2; letter-spacing: -.04em; }
.competitor-run-copy p { max-width: 590px; margin: 14px 0 0; color: #748397; font-size: 13px; line-height: 1.7; }
.competitor-run-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.competitor-run-facts b { border: 1px solid #dce8e7; border-radius: 999px; padding: 7px 10px; color: #41605f; background: #f8fbfb; font-size: 10px; }
.competitor-run-steps { position: relative; z-index: 1; display: grid; gap: 4px; margin: 0; border: 1px solid #e0e8ed; border-radius: 18px; padding: 14px; background: rgba(255,255,255,.75); list-style: none; }
.competitor-run-steps li { display: flex; gap: 12px; align-items: center; border-radius: 12px; padding: 10px; color: #8795a6; }
.competitor-run-steps li.is-active { background: #edf9f6; }
.competitor-run-steps li > b { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid #dfe6ec; border-radius: 10px; color: #8b98a7; background: #fff; font-size: 10px; }
.competitor-run-steps li.is-done > b { border-color: #b9e4dc; color: #177e75; background: #eaf8f5; }
.competitor-run-steps li.is-active > b { border-color: #4bb8aa; color: #fff; background: #26998c; box-shadow: 0 0 0 5px rgba(38,153,140,.09); }
.competitor-run-steps li span { display: grid; gap: 3px; }
.competitor-run-steps li strong { color: #41536a; font-size: 11px; }
.competitor-run-steps li.is-active strong { color: #163f3b; }
.competitor-run-steps li small { color: #97a3b1; font-size: 9px; line-height: 1.35; }
.competitor-run-note { grid-column: 2 / -1; display: flex; gap: 10px; align-items: flex-start; margin-top: -10px; border-top: 1px solid #e4ebef; padding-top: 16px; }
.competitor-run-note span { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 5px; border-radius: 50%; background: #36b8a5; box-shadow: 0 0 0 5px rgba(54,184,165,.09); }
.competitor-run-note p { margin: 0; color: #8190a1; font-size: 10px; line-height: 1.55; }
@media (max-width: 980px) {
  .competitor-run-progress { grid-template-columns: 120px 1fr; }
  .competitor-run-steps { grid-column: 1 / -1; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .competitor-run-steps li { align-items: flex-start; }
  .competitor-run-note { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .competitor-run-progress { grid-template-columns: 1fr; gap: 24px; min-height: 0; border-radius: 20px; padding: 28px 21px; }
  .competitor-run-visual { width: 94px; height: 94px; }
  .competitor-run-copy h2 { font-size: 28px; }
  .competitor-run-steps { grid-column: auto; grid-template-columns: 1fr; }
  .competitor-run-note { grid-column: auto; margin-top: 0; }
}

/* YouTube research result workspace. */
.competitor-result-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); gap: 38px; min-height: 300px; border-radius: 25px; padding: 38px 42px; color: #fff; background: radial-gradient(circle at 5% 0%,rgba(47,142,248,.2),transparent 37%),linear-gradient(137deg,#101e33,#17304d 68%,#10273e); box-shadow: 0 21px 54px rgba(16,39,65,.16); }
.competitor-result-hero::after { position: absolute; right: -100px; top: -190px; width: 410px; height: 410px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; }
.competitor-result-hero > div,.competitor-result-hero > aside { position: relative; z-index: 1; }
.competitor-result-hero .competitor-back-button { color: #9eb1c6; }
.competitor-result-hero div > span { display: block; margin-top: 24px; color: #74dfcb; font-size: 9px; font-weight: 950; letter-spacing: .18em; }
.competitor-result-hero h1 { margin: 10px 0 0; color: #fff; font-size: clamp(31px,3.6vw,45px); line-height: 1.15; letter-spacing: -.045em; }
.competitor-result-hero h1 em { color: #91c3ff; font-style: normal; }
.competitor-result-hero p { margin: 14px 0 0; color: #9fb0c4; font-size: 12px; }
.competitor-result-hero aside { align-self: center; border: 1px solid rgba(255,255,255,.11); border-radius: 19px; padding: 20px; background: rgba(7,20,38,.43); backdrop-filter: blur(14px); }
.competitor-result-hero aside > span { color: #71869f; font-size: 9px; font-weight: 950; letter-spacing: .15em; }
.competitor-result-hero aside ol { display: grid; gap: 7px; margin: 15px 0; padding: 0; list-style: none; }
.competitor-result-hero aside li { display: flex; gap: 10px; align-items: center; color: #72849b; }
.competitor-result-hero aside li b { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; font-size: 9px; }
.competitor-result-hero aside li small { font-size: 10px; }
.competitor-result-hero aside li.is-done b { color: #102b28; background: #72dfca; }
.competitor-result-hero aside li.is-done small,.competitor-result-hero aside li.is-active small { color: #e4edf5; }
.competitor-result-hero aside li.is-active b { border-color: #6daff2; color: #91c5ff; background: rgba(73,145,222,.12); }
.competitor-result-hero aside button { width: 100%; min-height: 39px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: #e3ebf4; background: rgba(255,255,255,.07); font-size: 10px; font-weight: 900; cursor: pointer; }
.competitor-results-summary { margin-top: 2px; }
.competitor-result-section { display: grid; gap: 20px; border: 1px solid #e0e8ef; border-radius: 22px; padding: 28px; background: #fff; box-shadow: 0 14px 38px rgba(29,59,87,.065); }
.competitor-result-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.competitor-result-section-head span { color: #16847b; font-size: 9px; font-weight: 950; letter-spacing: .16em; }
.competitor-result-section-head h2 { margin: 7px 0 0; color: #14243c; font-size: 22px; letter-spacing: -.03em; }
.competitor-result-section-head p { margin: 6px 0 0; color: #8491a1; font-size: 11px; }
.competitor-result-section-head > strong { border: 1px solid #dfe8ed; border-radius: 999px; padding: 7px 10px; color: #53667c; background: #f8fafb; font-size: 10px; }
.competitor-result-video-list { display: grid; gap: 9px; }
.competitor-result-video-card { overflow: hidden; border: 1px solid #e3e9ef; border-radius: 15px; background: #fff; }
.competitor-result-video-card > button { display: grid; grid-template-columns: 38px 138px minmax(0,1fr) 110px; gap: 15px; align-items: center; width: 100%; border: 0; padding: 12px 15px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.competitor-result-video-card:hover { border-color: #a9cdc8; box-shadow: 0 10px 25px rgba(25,69,91,.07); }
.competitor-result-video-rank { color: #17867c; font-size: 10px; font-weight: 950; }
.competitor-result-video-thumb { position: relative; overflow: hidden; display: grid; place-items: center; width: 138px; aspect-ratio: 16/9; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#203d5b,#16877d); }
.competitor-result-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.competitor-result-video-thumb > i { font-size: 22px; font-style: normal; font-weight: 950; }
.competitor-result-video-thumb > em { position: absolute; right: 6px; bottom: 6px; border-radius: 6px; padding: 4px 6px; color: #fff; background: rgba(8,18,31,.76); font-size: 8px; font-style: normal; }
.competitor-result-video-copy { display: grid; gap: 4px; min-width: 0; }
.competitor-result-video-copy small { color: #17847a; font-size: 9px; font-weight: 900; }
.competitor-result-video-copy strong { overflow: hidden; color: #1a2940; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.competitor-result-video-copy span { color: #8a96a5; font-size: 10px; }
.competitor-result-video-score { display: grid; justify-items: end; }
.competitor-result-video-score small { color: #8492a3; font-size: 9px; }
.competitor-result-video-score strong { color: #175f79; font-size: 23px; }
.competitor-result-video-score strong em { margin-left: 2px; color: #758598; font-size: 9px; font-style: normal; }
.competitor-result-video-score > span { color: #929dab; font-size: 9px; }
.competitor-topic-result-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.competitor-topic-result-card { display: grid; min-height: 235px; border: 1px solid #e1e8ed; border-radius: 17px; padding: 18px; background: #fff; transition: border-color .16s ease,transform .16s ease,box-shadow .16s ease; }
.competitor-topic-result-card:hover { border-color: #a8cdc7; transform: translateY(-2px); box-shadow: 0 13px 29px rgba(24,68,88,.075); }
.competitor-topic-result-card.is-selected { border-color: #43aa9d; background: linear-gradient(145deg,#fbfffe,#f0faf8); box-shadow: 0 0 0 3px rgba(67,170,157,.08); }
.competitor-topic-result-top { display: flex; align-items: center; justify-content: space-between; }
.competitor-topic-result-top span { color: #17857b; font-size: 10px; font-weight: 950; }
.competitor-topic-result-top b { border-radius: 999px; padding: 5px 7px; color: #617188; background: #f0f4f7; font-size: 8px; }
.competitor-topic-result-card h3 { align-self: end; margin: 20px 0 0; color: #17263d; font-size: 17px; line-height: 1.4; }
.competitor-topic-result-card > p { margin: 6px 0 0; color: #8d98a7; font-size: 9px; }
.competitor-topic-result-card > div:nth-of-type(2) { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 16px; border-top: 1px solid #edf1f4; padding-top: 13px; }
.competitor-topic-result-card > div:nth-of-type(2) span { display: grid; gap: 3px; }
.competitor-topic-result-card > div:nth-of-type(2) small { color: #96a1ae; font-size: 8px; }
.competitor-topic-result-card > div:nth-of-type(2) strong { color: #44566c; font-size: 11px; }
.competitor-topic-result-card > button { min-height: 37px; margin-top: 15px; border: 1px solid #d9e6e4; border-radius: 10px; color: #197d75; background: #f6fbfa; font-size: 9px; font-weight: 950; cursor: pointer; }
.competitor-topic-result-card.is-selected > button { border-color: #53b5a9; color: #fff; background: #268f84; }
.competitor-result-single { background: linear-gradient(145deg,#fff,#fbfcfe); }
.competitor-result-soft-empty { grid-column: 1/-1; display: grid; justify-items: center; gap: 7px; min-height: 130px; place-content: center; border: 1px dashed #dce5eb; border-radius: 15px; color: #7f8d9f; background: #fafcfd; text-align: center; }
.competitor-result-soft-empty b { color: #52647a; font-size: 12px; }
.competitor-result-soft-empty span { font-size: 10px; }
.competitor-external-selection { display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid #d9e5e7; border-radius: 20px; padding: 24px 27px; background: linear-gradient(135deg,#f7fbfb,#eef7f6); }
.competitor-external-selection.has-selection { border-color: #8acfc5; box-shadow: 0 10px 30px rgba(35,144,129,.08); }
.competitor-external-selection span { color: #188379; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.competitor-external-selection strong { display: block; margin-top: 6px; color: #1a2b42; font-size: 16px; }
.competitor-external-selection p { margin: 5px 0 0; color: #7e8d9e; font-size: 10px; }
.competitor-external-selection button { min-height: 43px; border: 0; border-radius: 11px; padding: 0 17px; color: #10273b; background: linear-gradient(135deg,#92e3ff,#77e6cb); font-size: 10px; font-weight: 950; cursor: pointer; }
.competitor-external-selection button:disabled { color: #99a5b0; background: #e8edef; cursor: default; }
.competitor-external-pending { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:14px; padding:22px 27px; border:1px solid rgba(79,102,157,.28); border-radius:20px; background:linear-gradient(135deg,#172741,#203456); color:#fff; box-shadow:0 18px 42px rgba(17,37,68,.16); }
.competitor-external-pending span { color:#74e0cf; font-size:9px; font-weight:950; letter-spacing:.13em; }
.competitor-external-pending strong { display:block; margin-top:7px; font-size:16px; }
.competitor-external-pending p { margin:5px 0 0; color:#aebdd1; font-size:10px; }
.competitor-external-pending button { min-height:43px; border:1px solid rgba(255,255,255,.16); border-radius:11px; padding:0 17px; color:#fff; background:rgba(255,255,255,.09); font-size:10px; font-weight:950; cursor:pointer; }
.competitor-external-pending.is-running { background:radial-gradient(circle at 90% 10%,rgba(119,230,203,.18),transparent 30%),linear-gradient(135deg,#172741,#203456); }
.competitor-external-pending.is-completed { border-color:#72cbbb; background:linear-gradient(135deg,#123c3b,#1b5a52); }
.competitor-external-workflow-modal { width:min(820px,calc(100vw - 28px)); overflow:hidden; }
.competitor-external-workflow-modal .modal-body { display:grid; gap:15px; padding:21px 24px 25px; background:#f5f8fb; }
.competitor-external-workflow-hero { position:relative; overflow:hidden; min-height:168px; padding:27px 31px; border-radius:19px; color:#fff; background:radial-gradient(circle at 82% 18%,rgba(94,229,213,.24),transparent 32%),linear-gradient(135deg,#13243e,#1c3855); }
.competitor-external-workflow-hero span { display:inline-flex; padding:6px 9px; border:1px solid rgba(119,230,203,.34); border-radius:999px; color:#7ce8d4; font-size:9px; font-weight:950; letter-spacing:.12em; }
.competitor-external-workflow-hero strong { display:block; margin-top:14px; font-size:23px; line-height:1.3; letter-spacing:-.04em; }
.competitor-external-workflow-hero p { margin:9px 0 0; color:#b6c5d7; font-size:11px; }
.competitor-external-workflow-hero i { position:absolute; right:28px; bottom:-25px; color:rgba(255,255,255,.06); font-size:122px; font-style:normal; font-weight:950; line-height:1; }
.competitor-external-privacy { display:flex; gap:12px; align-items:center; padding:15px 17px; border:1px solid #cbe7e2; border-radius:14px; background:#effaf8; }
.competitor-external-privacy > span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#167f73; background:#d6f4ee; font-weight:950; }
.competitor-external-privacy strong { color:#1a3a42; font-size:12px; }
.competitor-external-privacy p { margin:3px 0 0; color:#668087; font-size:10px; }
.competitor-external-review-list { display:grid; gap:8px; }
.competitor-external-review-list article { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 15px; border:1px solid #dfe7ef; border-radius:13px; background:#fff; }
.competitor-external-review-list article > span { color:#3ca995; font-size:10px; font-weight:950; }
.competitor-external-review-list article strong { color:#1b2d45; font-size:12px; }
.competitor-external-review-list article p { margin:3px 0 0; color:#8795a6; font-size:9px; }
.competitor-external-review-list aside { text-align:right; }
.competitor-external-review-list aside small { display:block; color:#9aa6b5; font-size:8px; }
.competitor-external-review-list aside b { color:#185f88; font-size:14px; }
.competitor-external-method { display:flex; align-items:center; justify-content:center; gap:8px; padding-top:2px; }
.competitor-external-method article { display:flex; align-items:center; gap:8px; min-width:0; flex:1; padding:11px; border:1px solid #dde6ee; border-radius:12px; background:#fff; }
.competitor-external-method article > b { display:grid; place-items:center; flex:0 0 27px; height:27px; border-radius:8px; color:#0d887c; background:#e3f7f3; font-size:10px; }
.competitor-external-method article strong,.competitor-external-method article small { display:block; }
.competitor-external-method article strong { color:#233650; font-size:10px; }
.competitor-external-method article small { margin-top:2px; color:#94a0af; font-size:8px; }
.competitor-external-method > i { color:#9eabb9; font-size:12px; font-style:normal; }
.competitor-external-request-modal { width:min(680px,calc(100vw - 28px)); }
.competitor-external-request-modal.is-wide { width:min(940px,calc(100vw - 28px)); }
.competitor-external-request-modal.is-wide .modal-body { max-height:min(72vh,760px); overflow:auto; }
.competitor-external-request-modal .modal-body { padding:28px; text-align:center; }
.competitor-external-request-modal .modal-body > strong { display:block; margin-top:11px; color:#1c3048; font-size:18px; }
.competitor-external-request-modal .modal-body > p { max-width:480px; margin:7px auto 17px; color:#7f8d9d; font-size:11px; line-height:1.65; }
.competitor-external-prompt { box-sizing:border-box; width:100%; min-height:170px; resize:vertical; border:1px solid #d8e2eb; border-radius:14px; padding:16px; color:#40526a; background:#f7f9fb; font:10px/1.65 system-ui,sans-serif; text-align:left; }
.competitor-external-launch > strong,.competitor-external-complete > strong { display:block; margin-top:12px; color:#1d3048; font-size:18px; }
.competitor-external-launch > p,.competitor-external-complete > p { max-width:500px; margin:7px auto 17px; color:#7b8b9d; font-size:11px; line-height:1.65; }
.competitor-local-runner-note { display:flex; align-items:center; justify-content:center; gap:11px; max-width:430px; margin:0 auto; padding:14px 17px; border:1px solid #c9e6e0; border-radius:13px; background:#f0faf8; text-align:left; }
.competitor-local-runner-note > span { padding:6px 8px; border-radius:7px; color:#fff; background:#168a7c; font-size:8px; font-weight:950; letter-spacing:.1em; }
.competitor-local-runner-note strong,.competitor-local-runner-note small { display:block; }
.competitor-local-runner-note strong { color:#24424a; font-size:10px; }
.competitor-local-runner-note small { margin-top:2px; color:#789097; font-size:9px; }
.competitor-external-running { padding:2px 0 8px; text-align:left; }
.competitor-external-running-head { display:flex; align-items:center; gap:16px; padding:17px 19px; border-radius:16px; background:linear-gradient(135deg,#112b45,#153d4a); }
.competitor-external-running-head > span { display:flex; justify-content:center; gap:5px; }
.competitor-external-running-head > span i { width:8px; height:8px; border-radius:50%; background:#69dfcb; animation:competitor-runner-pulse 1.15s infinite ease-in-out; }
.competitor-external-running-head > span i:nth-child(2) { animation-delay:.16s; }
.competitor-external-running-head > span i:nth-child(3) { animation-delay:.32s; }
.competitor-external-running-head strong { color:#fff; }
.competitor-external-running-head p { color:#9eb7c8; }
.competitor-external-running strong { display:block; color:#1b2d45; font-size:18px; }
.competitor-external-running p { margin:8px 0 0; color:#718195; font-size:11px; }
.competitor-external-running small { display:block; margin-top:18px; color:#a0adba; font-size:9px; }
.competitor-external-audit { margin-top:14px; padding:17px; border:1px solid #dbe7ed; border-radius:17px; background:#f8fbfc; text-align:left; }
.competitor-external-agent { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; padding-bottom:13px; border-bottom:1px solid #e5edf1; }
.competitor-external-agent > span { grid-row:1/3; padding:6px 8px; border-radius:7px; color:#fff; background:#1b8c7e; font-size:8px; font-weight:900; }
.competitor-external-agent strong { color:#233a50; font-size:11px; }
.competitor-external-agent small { margin:2px 0 0; color:#8595a4; font-size:8px; }
.competitor-external-skill-proof { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:13px; }
.competitor-external-skill-proof article { display:grid; grid-template-columns:31px minmax(0,1fr) auto; align-items:center; gap:9px; padding:11px; border:1px solid #dce7ec; border-radius:12px; background:#fff; }
.competitor-external-skill-proof article i { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; background:#eaf1f4; color:#7690a2; font-style:normal; font-weight:950; }
.competitor-external-skill-proof article.done i { color:#108778; background:#dff8f2; }
.competitor-external-skill-proof article.unverified { border-color:#eccdd0; background:#fff6f6; }
.competitor-external-skill-proof article.unverified i,.competitor-external-skill-proof article.unverified b { color:#a8464e; background:#f8dfe1; }
.competitor-external-skill-proof article strong { color:#20394d; font-size:10px; }
.competitor-external-skill-proof article small { margin:2px 0 0; color:#8797a6; font-size:8px; line-height:1.35; }
.competitor-external-skill-proof article b { padding:4px 6px; border-radius:999px; color:#178d7f; background:#e4f7f3; font-size:7px; white-space:nowrap; }
.competitor-external-audit-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.competitor-external-audit-metrics span { padding:9px 11px; border-radius:10px; color:#7c8c9b; background:#eef4f6; font-size:8px; }
.competitor-external-audit-metrics b { display:block; margin-top:3px; color:#203a50; font-size:15px; }
.competitor-external-source-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.competitor-external-source-chips span { padding:5px 8px; border:1px solid #dbe6eb; border-radius:999px; color:#63798b; background:#fff; font-size:7px; }
.competitor-external-live-log { display:grid; max-height:235px; margin-top:13px; padding:5px 4px 0 9px; overflow:auto; }
.competitor-external-live-log article { position:relative; display:grid; grid-template-columns:65px minmax(0,1fr); gap:9px; padding:0 0 13px 14px; border-left:1px solid #d9e5ea; }
.competitor-external-live-log article::before { content:""; position:absolute; top:2px; left:-4px; width:7px; height:7px; border-radius:50%; background:#43b9a7; }
.competitor-external-live-log time { color:#92a1af; font-size:7px; }
.competitor-external-live-log strong { color:#31485b; font-size:9px; }
.competitor-external-live-log p { margin:2px 0 0; color:#8795a2; font-size:8px; line-height:1.45; }
.competitor-external-live-empty { margin-top:12px; padding:17px; border-radius:11px; color:#8a9aa7; background:#eef4f6; font-size:8px; text-align:center; }
.competitor-external-complete-summary { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:13px; text-align:left; }
.competitor-external-complete-summary .competitor-external-ready-icon { margin:0; }
.competitor-external-complete-summary small { color:#1c9182; font-size:8px; font-weight:900; letter-spacing:.08em; }
.competitor-external-complete-summary strong { display:block; margin-top:4px; color:#1d3048; font-size:14px; line-height:1.5; }
@keyframes competitor-runner-pulse { 0%,70%,100%{transform:translateY(0);opacity:.42} 35%{transform:translateY(-7px);opacity:1} }
.competitor-external-result-list { display:grid; gap:9px; margin:18px 0; text-align:left; }
.competitor-external-result-card { overflow:hidden; border:1px solid #dce6ed; border-top:4px solid #8094aa; border-radius:15px; background:#fff; }
.competitor-external-result-card.best { border-top-color:#15a88f; }
.competitor-external-result-card.good { border-top-color:#3289ce; }
.competitor-external-result-card.avoid { border-top-color:#d56d72; }
.competitor-external-result-card > header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:17px; }
.competitor-external-result-card > header span { color:#198d7f; font-size:8px; font-weight:950; letter-spacing:.08em; }
.competitor-external-result-card > header strong { display:block; margin-top:4px; color:#21354e; font-size:12px; }
.competitor-external-result-card > header p { margin:4px 0 0; color:#7b8999; font-size:9px; line-height:1.5; }
.competitor-external-result-card > header aside { text-align:right; }
.competitor-external-result-card > header aside small { display:block; color:#9aa8b5; font-size:8px; }
.competitor-external-result-card > header aside b { color:#173852; font-size:22px; }
.competitor-external-result-card > header aside em { margin-left:2px; font-size:9px; font-style:normal; }
.competitor-external-result-facts { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:9px; padding:0 17px 14px; }
.competitor-external-result-facts > div { padding:11px 12px; border-radius:10px; background:#f3f7f9; }
.competitor-external-result-facts small { color:#81919f; font-size:7px; font-weight:850; }
.competitor-external-result-facts p { margin:4px 0 0; color:#4e6274; font-size:8px; line-height:1.45; }
.competitor-external-result-facts strong { margin-top:3px; color:#1b7f73; font-size:16px; }
.competitor-external-result-card details { border-top:1px solid #e7edf1; }
.competitor-external-result-card summary { padding:12px 17px; color:#344b5f; background:#fbfcfd; font-size:9px; font-weight:900; cursor:pointer; }
.competitor-external-evidence-list { display:grid; gap:7px; padding:0 17px 15px; }
.competitor-external-evidence-list article { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.8fr); gap:12px; padding:11px; border:1px solid #e3ebef; border-radius:10px; }
.competitor-external-evidence-list span,.competitor-external-evidence-list small { display:block; color:#1b9082; font-size:7px; font-weight:850; }
.competitor-external-evidence-list strong { margin:3px 0; color:#2f4659; font-size:9px; }
.competitor-external-evidence-list a { color:#1d668f; text-decoration:none; }
.competitor-external-evidence-list p { margin:0; color:#7c8b98; font-size:8px; line-height:1.45; }
.competitor-external-result-card details > ol,.competitor-external-result-card details > ul { margin:0; padding:0 32px 14px; color:#617486; font-size:8px; line-height:1.65; }
.competitor-external-potential { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 17px 15px; }
.competitor-external-potential > div { padding:11px; border-radius:10px; background:#f3f7f9; }
.competitor-external-potential strong { color:#344b5d; font-size:8px; }
.competitor-external-potential ul { margin:6px 0 0; padding-left:15px; color:#71818f; font-size:8px; line-height:1.55; }
.competitor-external-limitations { padding:14px 16px; border:1px solid #efdcae; border-radius:13px; background:#fffaf0; text-align:left; }
.competitor-external-limitations strong { color:#7b6330; font-size:9px; }
.competitor-external-limitations ul { margin:7px 0 0; padding-left:16px; color:#8c7a54; font-size:8px; line-height:1.6; }
.competitor-external-failed { padding:15px 0; text-align:center; }
.competitor-external-failed > span,.competitor-runner-help-icon { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 13px; border-radius:16px; color:#b1585f; background:#fff0f1; font-size:22px; font-weight:950; }
.competitor-external-failed strong { display:block; color:#303f54; font-size:16px; }
.competitor-external-failed p { margin:7px auto 16px; color:#8693a2; font-size:10px; }
.competitor-external-failed button { min-height:37px; border:0; border-radius:9px; padding:0 15px; color:#fff; background:#243e5c; font-size:9px; font-weight:900; cursor:pointer; }

/* One-glance research table and one-click external research flow. */
.competitor-results-primary .competitor-data-table { overflow-x:auto; border-radius:14px; }
.competitor-results-primary .competitor-data-row { min-width:854px; }
.competitor-results-primary .competitor-data-row > div { padding:11px 10px; }
.competitor-results-primary .competitor-data-head { position:sticky; top:0; z-index:2; }
.competitor-table-flow-note { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid #dbe8eb; border-radius:999px; color:#5d7482; background:#f5faf9; font-size:9px; white-space:nowrap; }
.competitor-table-flow-note b { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#fff; background:#168b7e; font-size:8px; }
.competitor-table-flow-note i { color:#9bb0b8; font-style:normal; }
.competitor-result-fit-button { min-height:34px; padding:0 12px; color:#176f68; border-color:#bcded8; background:#f2faf8; font-size:9px; font-weight:950; }
.competitor-result-resize-help { color:#8a9aa6; font-size:8px; }
.competitor-table-external-button { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-width:102px; min-height:38px; border:1px solid #55bfae; border-radius:10px; padding:0 11px; color:#fff; background:linear-gradient(135deg,#168b7e,#15718e); font-size:10px; font-weight:950; cursor:pointer; box-shadow:0 8px 18px rgba(21,124,122,.16); transition:.18s ease; }
.competitor-table-external-button:hover { color:#fff; border-color:#44cbb5; background:linear-gradient(135deg,#107c71,#115f7c); transform:translateY(-1px); box-shadow:0 11px 24px rgba(21,124,122,.23); }
.competitor-table-external-button b { font-size:13px; }
.competitor-topic-result-card > button b { margin-left:7px; }

/* Full result reader: large type, one topic per page. */
.competitor-external-request-modal.is-result-view { width:min(1240px,calc(100vw - 28px)); height:min(92vh,920px); overflow:hidden; }
.competitor-external-request-modal.is-result-view .modal-head { flex:0 0 auto; min-height:72px; padding:0 26px; }
.competitor-external-request-modal.is-result-view .modal-head h2 { font-size:21px; }
.competitor-external-request-modal.is-result-view .modal-body { height:calc(92vh - 72px); max-height:848px; overflow:auto; padding:0; text-align:left; background:#f3f7f9; }
.competitor-external-result-view { display:grid; gap:18px; padding:24px 28px 30px; }
.competitor-external-result-hero { display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:center; gap:24px; min-height:180px; border-radius:24px; padding:28px 31px; color:#fff; background:radial-gradient(circle at 90% 0,#1a6870 0,#142d48 42%,#101e34 100%); box-shadow:0 20px 48px rgba(15,36,60,.2); }
.competitor-external-result-hero > div > span { color:#6ce0ca; font-size:11px; font-weight:950; letter-spacing:.12em; }
.competitor-external-result-hero h3 { max-width:850px; margin:11px 0 9px; color:#fff; font-size:25px; line-height:1.45; letter-spacing:-.025em; }
.competitor-external-result-hero p { margin:0; color:#aebfd1; font-size:13px; line-height:1.7; }
.competitor-external-result-hero aside { display:grid; justify-items:center; gap:4px; border:1px solid #ffffff20; border-radius:19px; padding:20px 12px; background:#ffffff0c; }
.competitor-external-result-hero aside small { color:#91a9bc; font-size:10px; }
.competitor-external-result-hero aside strong { font-size:32px; }
.competitor-external-result-hero aside span { color:#70dfca; font-size:11px; font-weight:900; }
.competitor-content-analysis { display:grid; gap:14px; border:1px solid #dbe8ee; border-radius:22px; padding:21px; background:linear-gradient(145deg,#fbfdfd,#f3f8fa); }
.competitor-content-analysis > header { display:flex; align-items:end; justify-content:space-between; gap:18px; }
.competitor-content-analysis > header span { display:block; color:#14847a; font-size:10px; font-weight:950; letter-spacing:.11em; }
.competitor-content-analysis > header strong { display:block; margin-top:5px; color:#17324a; font-size:18px; letter-spacing:-.02em; }
.competitor-content-analysis > header small { color:#6d818e; font-size:10px; font-weight:800; }
.competitor-content-analysis > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:11px; }
.competitor-content-analysis article { min-width:0; border:1px solid #dce8ed; border-radius:16px; padding:16px; background:#fff; box-shadow:0 10px 28px rgba(31,63,83,.055); }
.competitor-content-analysis article.is-unavailable { border-style:dashed; background:#f8fafb; }
.competitor-content-analysis-channel { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.competitor-content-analysis-channel span { overflow:hidden; color:#16786f; font-size:11px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.competitor-content-analysis-channel b { flex:none; border-radius:999px; padding:5px 8px; color:#14766d; background:#e7f7f3; font-size:9px; }
.competitor-content-analysis .is-unavailable .competitor-content-analysis-channel b { color:#7b6b46; background:#f4eddc; }
.competitor-content-analysis article > strong { display:block; color:#142d43; font-size:15px; line-height:1.45; }
.competitor-content-analysis article > p { margin:9px 0 0; color:#566d7d; font-size:12px; line-height:1.75; }
.competitor-content-analysis dl { display:grid; gap:8px; margin:13px 0 0; }
.competitor-content-analysis dl > div { display:grid; grid-template-columns:112px minmax(0,1fr); gap:10px; border-top:1px solid #edf2f4; padding-top:8px; }
.competitor-content-analysis dt { color:#83939e; font-size:9px; font-weight:850; }
.competitor-content-analysis dd { margin:0; color:#344f62; font-size:10px; line-height:1.55; }
.competitor-external-result-tabs { display:flex; gap:8px; overflow:auto hidden; padding:2px 1px 5px; }
.competitor-external-result-tabs button { display:flex; align-items:center; gap:9px; flex:0 0 auto; min-height:42px; border:1px solid #d7e2e8; border-radius:12px; padding:0 14px; color:#5b6d7c; background:#fff; font-size:11px; font-weight:900; cursor:pointer; }
.competitor-external-result-tabs button span { color:#8ca0ad; font-size:9px; }
.competitor-external-result-tabs button.is-active { color:#fff; border-color:#177e77; background:#177e77; box-shadow:0 8px 20px rgba(23,126,119,.18); }
.competitor-external-result-tabs button.is-active span { color:#a9ece0; }
.competitor-external-result-page { min-height:360px; }
.competitor-external-result-page .competitor-external-result-card { border:0; border-top:5px solid #8094aa; border-radius:20px; box-shadow:0 16px 42px rgba(32,57,78,.1); }
.competitor-external-result-page .competitor-external-result-card.best { border-top-color:#15a88f; }
.competitor-external-result-page .competitor-external-result-card.good { border-top-color:#3289ce; }
.competitor-external-result-page .competitor-external-result-card.avoid { border-top-color:#d56d72; }
.competitor-external-result-page .competitor-external-result-card > header { padding:25px 28px; gap:24px; }
.competitor-external-result-page .competitor-external-result-card > header span { font-size:11px; }
.competitor-external-result-page .competitor-external-result-card > header strong { margin-top:7px; font-size:21px; }
.competitor-external-result-page .competitor-external-result-card > header p { margin-top:8px; max-width:880px; font-size:14px; line-height:1.65; }
.competitor-external-result-page .competitor-external-result-card > header aside small { font-size:10px; }
.competitor-external-result-page .competitor-external-result-card > header aside b { font-size:38px; }
.competitor-external-result-page .competitor-external-result-card > header aside em { font-size:12px; }
.competitor-external-result-page .competitor-external-result-facts { grid-template-columns:minmax(0,1fr) 230px; gap:12px; padding:0 28px 22px; }
.competitor-external-result-page .competitor-external-result-facts > div { padding:16px 18px; border-radius:13px; }
.competitor-external-result-page .competitor-external-result-facts small { font-size:10px; }
.competitor-external-result-page .competitor-external-result-facts p { margin-top:7px; font-size:13px; line-height:1.6; }
.competitor-external-result-page .competitor-external-result-facts strong { font-size:24px; }
.competitor-external-result-page .competitor-external-result-card summary { padding:17px 28px; font-size:13px; }
.competitor-external-result-page .competitor-external-evidence-list { gap:10px; padding:2px 28px 22px; }
.competitor-external-result-page .competitor-external-evidence-list article { gap:20px; padding:16px 18px; border-radius:13px; }
.competitor-external-result-page .competitor-external-evidence-list span,.competitor-external-result-page .competitor-external-evidence-list small { font-size:10px; }
.competitor-external-result-page .competitor-external-evidence-list strong { margin:5px 0; font-size:13px; }
.competitor-external-result-page .competitor-external-evidence-list p { font-size:12px; line-height:1.6; }
.competitor-external-result-page .competitor-external-result-card details > ol { padding:3px 45px 21px; font-size:12px; line-height:1.8; }
.competitor-external-result-page .competitor-external-potential { gap:12px; padding:2px 28px 22px; }
.competitor-external-result-page .competitor-external-potential > div { padding:16px; }
.competitor-external-result-page .competitor-external-potential strong { font-size:12px; }
.competitor-external-result-page .competitor-external-potential ul { font-size:11px; line-height:1.7; }
.competitor-external-result-pager { display:grid; grid-template-columns:160px 1fr 160px; align-items:center; gap:16px; }
.competitor-external-result-pager button { min-height:44px; border:1px solid #cadbe2; border-radius:12px; color:#22465b; background:#fff; font-size:11px; font-weight:950; cursor:pointer; }
.competitor-external-result-pager button:last-child { color:#fff; border-color:#177e77; background:#177e77; }
.competitor-external-result-pager button:disabled { color:#a1adb5; border-color:#dfe6e9; background:#e9eef0; cursor:default; }
.competitor-external-result-pager div { justify-self:center; display:flex; align-items:baseline; gap:5px; }
.competitor-external-result-pager div strong { color:#18384d; font-size:22px; }
.competitor-external-result-pager div span { color:#8c9ba5; font-size:11px; }
.competitor-external-result-view .competitor-external-limitations { padding:18px 20px; }
.competitor-external-result-view .competitor-external-limitations strong { font-size:12px; }
.competitor-external-result-view .competitor-external-limitations ul { font-size:11px; }
.competitor-external-audit-drawer { border:1px solid #d9e4e9; border-radius:15px; background:#fff; }
.competitor-external-audit-drawer > summary { padding:16px 19px; color:#3e5667; font-size:12px; font-weight:950; cursor:pointer; }
.competitor-external-audit-drawer .competitor-external-audit { margin:0 16px 16px; }
.competitor-external-local-note { margin:0; color:#8a99a4; font-size:10px; text-align:center; }
.competitor-external-result-close { justify-self:center; min-width:150px; min-height:44px; border:1px solid #cadbe2; border-radius:12px; padding:0 22px; color:#22465b; background:#fff; font:inherit; font-size:11px; font-weight:950; cursor:pointer; }
.competitor-external-result-close:hover { border-color:#8eabb7; background:#f4f8f9; }
.competitor-external-result-actions { display:flex; align-items:center; justify-content:center; gap:10px; }
.competitor-external-result-actions > span { color:#467066; font-size:11px; font-weight:850; }
.competitor-external-deep-button { display:grid; justify-items:start; min-width:190px; min-height:52px; border:0; border-radius:14px; padding:9px 18px; color:#fff; background:linear-gradient(135deg,#128d7d,#155b7d); box-shadow:0 12px 25px rgba(18,112,113,.2); font:inherit; font-size:14px; font-weight:950; cursor:pointer; }
.competitor-external-deep-button small { color:#9ee8db; font-size:9px; font-weight:850; }
.competitor-external-deep-button:hover { transform:translateY(-1px); box-shadow:0 15px 30px rgba(18,112,113,.25); }
.competitor-writer-research-bridge { border-left:4px solid #24a28e; border-radius:4px 13px 13px 4px; padding:14px 17px; color:#365666; background:#eff8f6; font-size:12px; font-weight:800; line-height:1.65; }
.competitor-writer-report { overflow:hidden; }
.competitor-writer-report .competitor-report-section:last-child { padding-bottom:4px; }
.competitor-reference-posts > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; padding:0 28px 24px; }
.competitor-reference-posts article { min-width:0; border:1px solid #dce7ea; border-radius:15px; padding:16px 17px; background:linear-gradient(145deg,#fff,#f7fafb); }
.competitor-reference-posts article > span { display:block; color:#178477; font-size:10px; font-weight:950; }
.competitor-reference-posts article > strong { display:block; margin-top:7px; color:#19394d; font-size:13px; line-height:1.45; }
.competitor-reference-posts article a { color:inherit; text-decoration:none; }
.competitor-reference-posts article a:hover { color:#0b8778; text-decoration:underline; }
.competitor-reference-posts article p { margin:8px 0 0; color:#607482; font-size:11px; line-height:1.65; }
.competitor-external-report-stack { display:grid; gap:30px; min-height:0; }
.competitor-external-topic-report { display:grid; gap:16px; border:1px solid #cfdee5; border-radius:27px; padding:22px; background:linear-gradient(155deg,#f8fbfc 0%,#fff 28%); box-shadow:0 18px 55px rgba(28,57,77,.09); }
.competitor-external-topic-report-head { display:flex; align-items:center; gap:15px; border-bottom:1px solid #e3ebee; padding:1px 3px 17px; }
.competitor-external-topic-report-head span { flex:none; border-radius:999px; padding:7px 10px; color:#08796d; background:#ddf3ee; font-size:10px; font-weight:950; letter-spacing:.08em; }
.competitor-external-topic-report-head strong { color:#152f46; font-size:22px; line-height:1.35; letter-spacing:-.025em; }
.competitor-research-path { overflow:hidden; border:1px solid #cfe4e1; border-radius:22px; background:#f7fbfa; }
.competitor-research-path > header { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:20px 22px; background:linear-gradient(115deg,#e9f7f3,#f7fbfb); }
.competitor-research-path > header span { display:block; color:#0b8778; font-size:10px; font-weight:950; letter-spacing:.12em; }
.competitor-research-path > header strong { display:block; margin-top:5px; color:#18384b; font-size:18px; }
.competitor-research-path > header small { color:#628077; font-size:10px; font-weight:850; }
.competitor-research-path-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:#dfeae8; }
.competitor-research-path-grid > article { display:grid; grid-template-columns:34px minmax(0,1fr); align-content:start; gap:12px; min-height:136px; padding:20px; background:#fff; }
.competitor-research-path-grid > article.is-wide { grid-column:1/-1; }
.competitor-research-path-grid > article > b { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#fff; background:linear-gradient(135deg,#159584,#176b83); font-size:12px; box-shadow:0 7px 16px rgba(19,126,120,.18); }
.competitor-research-path-grid article span { color:#163a4c; font-size:13px; font-weight:950; }
.competitor-research-path-grid article p { margin:8px 0 0; color:#526b79; font-size:12px; line-height:1.7; }
.competitor-research-path-grid article ul { display:grid; gap:6px; margin:9px 0 0; padding:0; list-style:none; }
.competitor-research-path-grid article li { position:relative; padding-left:14px; color:#526b79; font-size:12px; line-height:1.55; }
.competitor-research-path-grid article li::before { position:absolute; top:.68em; left:0; width:5px; height:5px; border-radius:50%; background:#23a18e; content:""; }
.competitor-community-check-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:11px; }
.competitor-community-check-list > div { border:1px solid #dde8eb; border-radius:13px; padding:13px 14px; background:#f8fafb; }
.competitor-community-check-list > div.is-verified { border-color:#a9dcd2; background:#f0faf7; }
.competitor-community-check-list strong { color:#1b4254; font-size:12px; }
.competitor-community-check-list p { margin:5px 0 0 !important; color:#496472 !important; font-size:11px !important; }
.competitor-community-check-list small { display:block; margin-top:5px; color:#7b8d96; font-size:10px; line-height:1.55; }
.competitor-report-section { border-top:1px solid #e5ecef; }
.competitor-report-section > header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 28px 12px; }
.competitor-report-section > header span { color:#138175; font-size:10px; font-weight:950; letter-spacing:.08em; }
.competitor-report-section > header strong { color:#19394e; font-size:14px; }
.competitor-report-angles ol { display:grid; gap:8px; margin:0; padding:0 28px 22px; counter-reset:angle; list-style:none; }
.competitor-report-angles li { position:relative; border:1px solid #dae6ea; border-radius:12px; padding:13px 15px 13px 45px; color:#385466; background:#f8fafb; font-size:12px; line-height:1.6; counter-increment:angle; }
.competitor-report-angles li::before { position:absolute; top:12px; left:13px; display:grid; place-items:center; width:23px; height:23px; border-radius:8px; color:#0f8175; background:#dff3ef; font-size:9px; font-weight:950; content:counter(angle); }
.competitor-topic-deep-action,.competitor-topic-deep-complete { display:flex; justify-content:flex-end; border-top:1px solid #e1eaed; padding-top:16px; }
.competitor-topic-deep-complete { color:#317166; font-size:11px; font-weight:900; }
.competitor-external-execution-record { overflow:hidden; border:1px solid #d4e2e7; border-radius:20px; background:#fff; }
.competitor-external-execution-record > header { padding:19px 21px 4px; }
.competitor-external-execution-record > header span { display:block; color:#148378; font-size:10px; font-weight:950; letter-spacing:.1em; }
.competitor-external-execution-record > header strong { display:block; margin-top:5px; color:#17384d; font-size:16px; }
.competitor-external-execution-record .competitor-external-audit { margin:13px 18px 18px; }

/* Always-visible elementary test guide. */
.competitor-test-guide { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(0,1.5fr); gap:22px; border:1px solid #d5e5e7; border-radius:20px; padding:23px 25px; background:linear-gradient(135deg,#f8fbfc,#eef7f6); }
.competitor-test-guide-head span { color:#17877b; font-size:9px; font-weight:950; letter-spacing:.12em; }
.competitor-test-guide-head strong { display:block; margin-top:7px; color:#1e3348; font-size:16px; }
.competitor-test-guide-head p { margin:6px 0 0; color:#7d8e9c; font-size:10px; line-height:1.6; }
.competitor-test-guide ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0; padding:0; list-style:none; }
.competitor-test-guide li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:9px; padding:13px; border:1px solid #dce7ea; border-radius:13px; background:#fff; }
.competitor-test-guide li > b { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:#fff; background:#17877b; font-size:10px; }
.competitor-test-guide li strong { color:#2a4053; font-size:10px; line-height:1.45; }
.competitor-test-guide li p { margin:4px 0 0; color:#82919d; font-size:8px; line-height:1.5; }
@media (max-width:720px) {
  .competitor-external-result-actions { align-items:stretch; flex-direction:column; }
  .competitor-external-result-actions > button { width:100%; }
  .competitor-external-skill-proof,.competitor-external-potential { grid-template-columns:1fr; }
  .competitor-external-result-facts { grid-template-columns:1fr; }
  .competitor-external-evidence-list article { grid-template-columns:1fr; }
  .competitor-external-request-modal.is-result-view { width:calc(100vw - 12px); height:96vh; }
  .competitor-external-request-modal.is-result-view .modal-body { height:calc(96vh - 66px); }
  .competitor-external-result-view { padding:14px; }
  .competitor-external-result-hero { grid-template-columns:1fr; padding:22px; }
  .competitor-external-result-hero h3 { font-size:20px; }
  .competitor-external-result-hero aside { grid-template-columns:1fr auto auto; justify-items:start; }
  .competitor-external-result-page .competitor-external-result-card > header { grid-template-columns:1fr; padding:20px; }
  .competitor-external-result-page .competitor-external-result-card > header aside { text-align:left; }
  .competitor-external-result-page .competitor-external-result-facts { grid-template-columns:1fr; padding:0 20px 18px; }
  .competitor-external-result-page .competitor-external-evidence-list,.competitor-external-result-page .competitor-external-potential { padding-left:20px; padding-right:20px; }
  .competitor-external-result-pager { grid-template-columns:1fr auto 1fr; }
  .competitor-external-result-pager button { min-width:0; }
  .competitor-external-topic-report { padding:14px; border-radius:20px; }
  .competitor-external-topic-report-head { align-items:flex-start; flex-direction:column; }
  .competitor-external-topic-report-head strong { font-size:18px; }
  .competitor-content-analysis > div,.competitor-research-path-grid,.competitor-community-check-list { grid-template-columns:1fr; }
  .competitor-research-path-grid > article.is-wide { grid-column:auto; }
  .competitor-content-analysis > header,.competitor-research-path > header { align-items:flex-start; flex-direction:column; }
  .competitor-content-analysis dl > div { grid-template-columns:1fr; }
  .competitor-report-section > header { align-items:flex-start; flex-direction:column; padding-left:20px; padding-right:20px; }
  .competitor-report-angles ol { padding-left:20px; padding-right:20px; }
  .competitor-reference-posts > div { grid-template-columns:1fr; padding-left:20px; padding-right:20px; }
  .competitor-topic-deep-action .competitor-external-deep-button { width:100%; }
  .competitor-test-guide { grid-template-columns:1fr; }
  .competitor-test-guide ol { grid-template-columns:1fr; }
}
.competitor-runner-help-modal { width:min(620px,calc(100vw - 28px)); }
.competitor-runner-help-modal .modal-body { padding:28px; text-align:center; }
.competitor-runner-help-modal .modal-body > strong { display:block; color:#263951; font-size:15px; }
.competitor-runner-help-modal code { display:block; margin:14px 0; padding:13px; border:1px solid #d7e3ea; border-radius:11px; color:#126e68; background:#f4f8fa; font:600 11px ui-monospace,monospace; }
.competitor-runner-help-modal ol { display:grid; gap:7px; max-width:420px; margin:0 auto; padding:0; list-style:none; text-align:left; }
.competitor-runner-help-modal li { display:flex; align-items:center; gap:9px; color:#5f7084; font-size:10px; }
.competitor-runner-help-modal li b { display:grid; place-items:center; width:23px; height:23px; border-radius:7px; color:#127c72; background:#e3f5f1; font-size:9px; }
.competitor-runner-help-modal .modal-body > p { margin:16px 0 0; color:#93a0ad; font-size:9px; }
.competitor-runner-auto-modal { overflow:hidden; border:1px solid #b9d8d4; box-shadow:0 28px 80px rgba(12,49,62,.24); }
.competitor-runner-auto-modal .modal-head { justify-content:center; text-align:center; background:linear-gradient(110deg,#f2fbf9 0%,#f7faff 100%); }
.competitor-runner-auto-modal .modal-body { padding:38px 34px 42px; }
.competitor-runner-auto-modal .modal-body > strong { margin-top:18px; font-size:17px; }
.competitor-runner-auto-modal .modal-body > p { max-width:440px; margin:9px auto 0; color:#66788a; font-size:11px; line-height:1.65; }
.competitor-runner-auto-spinner { position:relative; display:block; width:58px; height:58px; margin:0 auto; border:5px solid #dcefeb; border-top-color:#159786; border-radius:50%; animation:competitor-runner-spin .9s linear infinite; }
.competitor-runner-auto-spinner::after { position:absolute; inset:12px; border-radius:50%; background:#dff5f0; content:""; }
.competitor-runner-auto-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-width:440px; margin:24px auto 0; }
.competitor-runner-auto-steps span { min-height:38px; display:grid; place-items:center; border:1px solid #dce5ea; border-radius:10px; color:#8896a1; background:#f7f9fa; font-size:9px; font-weight:900; }
.competitor-runner-auto-steps span.is-active { border-color:#8fd4ca; color:#08796c; background:#e8f8f4; box-shadow:0 7px 18px rgba(16,126,113,.1); }
@keyframes competitor-runner-spin { to { transform:rotate(360deg); } }

/* Results page: state lives in the action buttons, and the table fills its card. */
.competitor-result-hero-clean { grid-template-columns:minmax(0,1fr) 238px; }
.competitor-result-hero-action { display:grid; align-content:center; gap:9px; min-height:176px; border:1px solid rgba(255,255,255,.12); border-radius:21px; padding:24px; background:rgba(10,28,48,.22); }
.competitor-result-hero-action > span { color:#6fdac9; font-size:9px; font-weight:950; letter-spacing:.15em; }
.competitor-result-hero-action > strong { color:#fff; font-size:23px; letter-spacing:-.03em; }
.competitor-result-hero-action > button { min-height:42px; margin-top:6px; border:1px solid rgba(255,255,255,.12); border-radius:11px; color:#fff; background:rgba(255,255,255,.08); font:inherit; font-size:10px; font-weight:900; cursor:pointer; }
.competitor-result-hero-action > button:hover { border-color:rgba(112,224,204,.5); background:rgba(112,224,204,.12); }
.competitor-result-server-button { min-height:34px; border-color:#d6dee8; color:#52657a; background:#f8fafc; font-size:9px; font-weight:900; }
.competitor-result-server-button.is-saved { border-color:#a9d8d0; color:#10796d; background:#edf9f6; }
.competitor-results-primary .competitor-data-table { width:100%; overflow-x:hidden; }
.competitor-results-primary .competitor-data-row { width:100%; min-width:100%; box-sizing:border-box; }
.competitor-results-primary .competitor-data-row > div { padding:10px 8px; }
.competitor-table-external-actions { display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.competitor-table-external-actions button { min-width:0; min-height:34px; border:1px solid #c6d6df; border-radius:9px; padding:0 4px; color:#405b72; background:#f7fafc; font:inherit; font-size:9px; font-weight:950; line-height:1; cursor:pointer; white-space:nowrap; }
.competitor-table-external-actions button.is-result { border-color:#4fbfad; color:#fff; background:linear-gradient(135deg,#158b7e,#176e89); box-shadow:0 6px 14px rgba(21,124,122,.14); }
.competitor-table-external-actions button:hover { border-color:#74cdbf; color:#0c766a; background:#edf9f6; }
.competitor-table-external-actions button.is-result:hover { color:#fff; background:linear-gradient(135deg,#107d72,#125d79); }
.competitor-table-external-button { width:100%; min-width:0; min-height:34px; padding:0 7px; font-size:10px; font-weight:950; }
.competitor-table-external-button.is-running { border-color:#9ebecb; color:#315f74; background:#edf4f7; box-shadow:none; }
.competitor-topic-external-actions { display:grid; grid-template-columns:1.35fr 1fr; gap:7px; margin-top:auto; }
.competitor-topic-result-card .competitor-topic-external-actions button { min-height:37px; border:1px solid #d3dfe6; border-radius:10px; color:#607386; background:#f7fafb; font:inherit; font-size:9px; font-weight:950; cursor:pointer; }
.competitor-topic-result-card .competitor-topic-external-actions button.is-result { border-color:#3eae9d; color:#fff; background:#16877a; }
.competitor-topic-external-running { min-height:38px; border:1px solid #a7cbd2 !important; color:#315f73 !important; background:#edf5f7 !important; }
.competitor-domestic-coverage { display:grid; grid-template-columns:170px 170px minmax(0,1fr); align-items:center; gap:10px; border:1px solid #cfe2de; border-radius:16px; padding:14px 17px; background:#f7fbfa; }
.competitor-domestic-coverage > div { display:grid; gap:3px; }
.competitor-domestic-coverage span { color:#71878a; font-size:9px; font-weight:850; }
.competitor-domestic-coverage strong { color:#116f66; font-size:15px; }
.competitor-domestic-coverage p { margin:0; color:#607679; font-size:10px; text-align:right; }
.competitor-external-result-card > header aside mark { display:block; margin-top:8px; padding:5px 8px; border-radius:8px; color:#8a4c16; background:#fff0d8; font-size:9px; font-weight:900; white-space:nowrap; }
@media (max-width:900px) {
  .competitor-results-primary .competitor-data-table { overflow-x:auto; }
  .competitor-results-primary .competitor-data-row { min-width:848px; }
  .competitor-result-hero-clean { grid-template-columns:1fr; }
  .competitor-result-hero-action { min-height:auto; }
  .competitor-domestic-coverage { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .competitor-domestic-coverage p { grid-column:1/-1; text-align:left; }
}
.competitor-results-panel > .competitor-result-section-head { margin-bottom: 19px; }
.competitor-results-primary { border-color: #cddde9; box-shadow: 0 20px 48px rgba(24,59,91,.09); }
.competitor-table-external-button { min-height:34px; border:1px solid #b8d2dd; border-radius:9px; color:#234f66; background:#f2f8fa; cursor:pointer; transition:.18s ease; }
.competitor-table-external-button:hover { border-color:#75cfc0; color:#127c70; background:#edf9f7; transform:translateY(-1px); }
.competitor-table-external-button.is-selected { border-color:#5ac4b2; color:#0d786c; background:#dcf6f1; box-shadow:0 6px 16px rgba(42,162,143,.13); }
.competitor-insight-empty { display: grid; justify-items: center; gap: 7px; border: 1px dashed #d8e2e9; border-radius: 18px; padding: 25px; color: #8090a2; background: #f9fbfc; text-align: center; }
.competitor-insight-empty span { color: #568177; font-size: 8px; font-weight: 950; letter-spacing: .16em; }
.competitor-insight-empty strong { color: #43566d; font-size: 13px; }
.competitor-insight-empty p { margin: 0; font-size: 10px; }
.competitor-insight-launcher { background:linear-gradient(145deg,#fff,#f8fbfc); }
.competitor-insight-launcher-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.competitor-insight-launcher-grid > button { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 15px; min-height:112px; border:1px solid #d9e5e9; border-radius:16px; padding:20px; color:#18334b; background:#fff; text-align:left; cursor:pointer; transition:.18s ease; }
.competitor-insight-launcher-grid > button:hover { border-color:#80c9bd; transform:translateY(-2px); box-shadow:0 13px 28px rgba(26,94,91,.09); }
.competitor-insight-launcher-grid span { color:#557183; font-size:11px; font-weight:900; }
.competitor-insight-launcher-grid strong { grid-row:2; color:#122a42; font-size:27px; letter-spacing:-.04em; }
.competitor-insight-launcher-grid small { align-self:end; color:#8a99a5; font-size:9px; }
.competitor-insight-launcher-grid b { grid-column:2; grid-row:1/4; align-self:center; display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#128277; background:#e7f7f4; font-size:14px; }
.competitor-insight-modal { width:min(980px,calc(100vw - 34px)); max-height:min(88vh,900px); }
.competitor-insight-modal .modal-head { align-items:flex-start; }
.competitor-insight-modal .modal-head small { color:#16847b; font-size:9px; font-weight:950; letter-spacing:.14em; }
.competitor-insight-modal .modal-head h2 { margin-top:6px; font-size:24px; letter-spacing:-.035em; }
.competitor-insight-modal .modal-head p { margin:7px 0 0; color:#8492a0; font-size:11px; }
.competitor-insight-filter { display:flex; gap:7px; border-bottom:1px solid #e3e9ee; padding:13px 24px; background:#f8fafb; }
.competitor-insight-filter button { min-height:36px; border:1px solid #d7e1e6; border-radius:10px; padding:0 13px; color:#607284; background:#fff; font:inherit; font-size:10px; font-weight:900; cursor:pointer; }
.competitor-insight-filter button strong { margin-left:5px; color:#8a98a4; }
.competitor-insight-filter button.active { border-color:#54b7a8; color:#fff; background:#16877a; box-shadow:0 7px 17px rgba(22,135,122,.15); }
.competitor-insight-filter button.active strong { color:#d9f5ef; }
.competitor-insight-modal-body { overflow-y:auto; padding:22px 24px 28px; }
.competitor-insight-topic-list { display:grid; gap:14px; }
.competitor-insight-topic-card { border:1px solid #dfe7ec; border-radius:17px; padding:18px; background:#fff; box-shadow:0 8px 22px rgba(30,62,85,.045); }
.competitor-insight-topic-card > header { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px; align-items:center; }
.competitor-insight-topic-card > header > span { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#118277; background:#e8f7f4; font-size:10px; font-weight:950; }
.competitor-insight-topic-card > header small { color:#16847b; font-size:8px; font-weight:950; }
.competitor-insight-topic-card > header h3 { margin:3px 0 0; color:#172b43; font-size:17px; }
.competitor-insight-topic-card > header > strong { color:#176b79; font-size:20px; }
.competitor-insight-topic-videos { display:grid; gap:6px; margin-top:14px; }
.competitor-insight-topic-videos button { display:grid; grid-template-columns:150px minmax(0,1fr) 180px; gap:12px; align-items:center; width:100%; border:1px solid #e6ebef; border-radius:11px; padding:11px 12px; color:inherit; background:#fafcfd; text-align:left; cursor:pointer; }
.competitor-insight-topic-videos button:hover { border-color:#acd7d0; background:#f3faf8; }
.competitor-insight-topic-videos span { overflow:hidden; color:#547080; font-size:9px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.competitor-insight-topic-videos strong { overflow:hidden; color:#20344b; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.competitor-insight-topic-videos em { justify-self:end; color:#718496; font-size:9px; font-style:normal; white-space:nowrap; }
.competitor-insight-topic-card > .competitor-topic-external-actions { max-width:230px; margin:14px 0 0 auto; }
.competitor-result-insufficient { background: #fbfcfd; }
.competitor-insufficient-list { display: grid; gap: 7px; }
.competitor-insufficient-list button { display: grid; grid-template-columns: 145px minmax(0,1fr) 100px; gap: 15px; align-items: center; border: 1px solid #e5e9ed; border-radius: 11px; padding: 11px 13px; color: inherit; background: #fff; text-align: left; cursor: pointer; }
.competitor-insufficient-list span { color: #728196; font-size: 9px; }
.competitor-insufficient-list strong { overflow: hidden; color: #43536a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.competitor-insufficient-list em { justify-self: end; color: #a0713d; font-size: 9px; font-style: normal; }
.competitor-insufficient-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.45fr); gap: 16px; }
.competitor-insufficient-summary > div { border: 1px solid #eadfce; border-radius: 14px; padding: 17px; background: #fffaf3; }
.competitor-insufficient-summary > div strong { color: #72512e; font-size: 11px; }
.competitor-insufficient-summary > div p { margin: 7px 0 0; color: #967b5e; font-size: 10px; line-height: 1.6; }
.competitor-insufficient-summary ul { display: grid; align-content: start; gap: 6px; margin: 0; padding: 0; list-style: none; }
.competitor-insufficient-summary li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e5e9ed; border-radius: 11px; padding: 11px 13px; background: #fff; }
.competitor-insufficient-summary li span { overflow: hidden; color: #52647a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.competitor-insufficient-summary li strong { color: #a0713d; font-size: 10px; }
.competitor-external-ready-modal .modal-head small { color: #17857b; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.competitor-external-ready-modal .modal-body { display: grid; justify-items: center; gap: 10px; padding: 34px; text-align: center; }
.competitor-external-ready-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; color: #fff; background: linear-gradient(135deg,#41b9aa,#257f78); font-size: 24px; box-shadow: 0 12px 28px rgba(39,143,130,.2); }
.competitor-external-ready-modal .modal-body > strong { color: #1a2a41; font-size: 17px; }
.competitor-external-ready-modal .modal-body > p { max-width: 460px; margin: 0; color: #76869a; font-size: 11px; line-height: 1.7; }
@media (max-width: 980px) {
  .competitor-result-hero { grid-template-columns: 1fr; }
  .competitor-result-hero aside ol { grid-template-columns: repeat(3,1fr); }
  .competitor-topic-result-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .competitor-content-analysis > div { grid-template-columns:1fr; }
  .competitor-content-analysis > header { align-items:start; flex-direction:column; }
  .competitor-external-audit-metrics { grid-template-columns:repeat(2,1fr); }
  .competitor-result-hero { gap: 25px; min-height: 0; border-radius: 20px; padding: 27px 21px; }
  .competitor-result-hero h1 { font-size: 30px; }
  .competitor-result-hero h1 br { display: none; }
  .competitor-result-hero aside ol { grid-template-columns: 1fr; }
  .competitor-result-section { border-radius: 18px; padding: 22px 17px; }
  .competitor-result-section-head { align-items: flex-start; flex-direction: column; }
  .competitor-result-video-card > button { grid-template-columns: 28px 92px minmax(0,1fr); gap: 9px; padding: 10px; }
  .competitor-result-video-thumb { width: 92px; }
  .competitor-result-video-score { display: none; }
  .competitor-result-video-copy strong { white-space: normal; }
  .competitor-topic-result-grid { grid-template-columns: 1fr; }
  .competitor-insight-launcher-grid { grid-template-columns:1fr; }
  .competitor-insight-filter { overflow-x:auto; padding:11px 16px; }
  .competitor-insight-filter button { flex:0 0 auto; }
  .competitor-insight-modal-body { padding:16px; }
  .competitor-insight-topic-videos button { grid-template-columns:1fr; gap:4px; }
  .competitor-insight-topic-videos em { justify-self:start; }
  .competitor-external-selection { align-items: stretch; flex-direction: column; }
  .competitor-external-pending { align-items:stretch; flex-direction:column; }
  .competitor-external-method { align-items:stretch; flex-direction:column; }
  .competitor-external-method > i { display:none; }
  .competitor-insufficient-list button { grid-template-columns: 1fr; gap: 5px; }
  .competitor-insufficient-list em { justify-self: start; }
  .competitor-insufficient-summary { grid-template-columns: 1fr; }
}

/* Keep the reference-image four-card rhythm after legacy responsive rules. */
.cast-planning-week > div { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1180px) {
  .cast-planning-week > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cast-planning-week > div { grid-template-columns: 1fr; }
}

/* Date-first monthly planning board. */
.cast-planning-week > .cast-planning-date-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid #e3ebe7;
  padding: 0;
  background: #fff;
}
.cast-planning-date {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px;
  min-height: 62px;
  border-right: 1px solid #edf1ef;
  padding: 9px 10px;
  color: #557069;
}
.cast-planning-date:last-child { border-right: 0; }
.cast-planning-date > span { color: #8a9994; font-size: 9px; font-weight: 800; }
.cast-planning-date > strong { color: #315b53; font-size: 14px; }
.cast-planning-date.is-sunday > span,
.cast-planning-date.is-sunday > strong { color: #b45c59; }
.cast-planning-date.is-saturday > span,
.cast-planning-date.is-saturday > strong { color: #5579a5; }
.cast-planning-date.is-outside { background: #f8faf9; opacity: .42; }
.cast-planning-date.is-outside.has-schedule {
  background: #f7fbfa;
  opacity: 1;
}
.cast-planning-date.is-outside.has-schedule > span,
.cast-planning-date.is-outside.has-schedule > strong { color: #476d64; }
.cast-planning-date > div {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  min-height: 12px;
  gap: 3px;
}
.cast-planning-date > div i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2b8977;
}
.cast-planning-date > div i.is-role-deep { background: #4d78a8; }
.cast-planning-date > div i.is-role-market-live { background: #7962a2; }
.cast-planning-date > div i.is-role-close-live { background: #c67b39; }
.cast-planning-date > div i.is-role-urgent { background: #c85d51; }
.cast-planning-date > div b { margin-left: 2px; color: #778a83; font-size: 8px; }
.cast-planning-week > .cast-planning-card-lane {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 13px;
}

@media (max-width: 1180px) {
  .cast-planning-week > .cast-planning-card-lane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cast-planning-week > .cast-planning-date-strip { grid-template-columns: repeat(7, minmax(42px, 1fr)); overflow-x: auto; }
  .cast-planning-week > .cast-planning-card-lane { grid-template-columns: 1fr; }
  .cast-planning-date { min-height: 54px; padding: 7px; }
}

/* One creation point: the board. Monthly status sits above it at full width. */
.cast-month-plan-dashboard {
  display: grid;
  gap: 13px;
  border: 1px solid #dce7e2;
  border-radius: 14px;
  padding: 15px 17px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(28, 72, 64, .04);
}
.cast-month-plan-dashboard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cast-month-plan-dashboard > header h3,
.cast-month-plan-dashboard > header p { margin: 0; }
.cast-month-plan-dashboard > header h3 { color: #234f48; font-size: 13px; }
.cast-month-plan-dashboard > header p { margin-top: 3px; color: #7c8e87; font-size: 9px; }
.cast-month-plan-dashboard > header button { min-height: 32px; font-size: 9px; }
.cast-month-plan-dashboard .cast-role-goals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  border: 0;
  padding: 0;
}
.cast-month-plan-dashboard .cast-role-goals > div {
  border: 1px solid #e1e9e5;
  border-radius: 9px;
  padding: 9px 10px;
  background: #fafcfb;
}
.cast-planning-placeholder { cursor: default; }
.cast-planning-placeholder > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: min(180px, calc(100% - 24px));
  margin-top: 5px;
}
.cast-planning-placeholder > div button {
  min-height: 30px;
  border: 1px solid #cbdad4;
  border-radius: 6px;
  padding: 0 6px;
  background: #fff;
  color: #42675e;
  font: inherit;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}
.cast-planning-placeholder > div button:last-child {
  border-color: #bfcfdd;
  color: #486c8e;
}
.cast-planning-placeholder > div button:hover { border-color: #4c8b7b; background: #f0f8f5; }

@media (max-width: 900px) {
  .cast-month-plan-dashboard .cast-role-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cast-month-plan-dashboard > header { align-items: flex-start; flex-direction: column; }
  .cast-month-plan-dashboard .cast-role-goals { grid-template-columns: 1fr; }
}

/* Editorial refinement: restrained geometry, clearer hierarchy, no template-like glow. */
.cast-management-shell { color: #233b36; }
.cast-management-head {
  border-color: #d8e1dd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(25, 56, 49, .035);
}
.cast-management-head h2 { color: #153d37; font-size: 20px; letter-spacing: -.035em; }
.cast-management-eyebrow { color: #647b74; letter-spacing: .08em; }
.cast-management-view-tabs,
.cast-schedule-view-tabs {
  border-radius: 7px;
  background: #eef2f0;
}
.cast-management-view-tabs button,
.cast-schedule-view-tabs button { border-radius: 5px; box-shadow: none; }
.cast-management-view-tabs button.active,
.cast-schedule-view-tabs button.active {
  background: #173f39;
  box-shadow: none;
}
.cast-plan-toolbar .cast-content-filters {
  gap: 2px;
  border-bottom: 1px solid #d8e0dc;
  padding: 0;
}
.cast-plan-toolbar .cast-content-filters button {
  min-height: 33px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0 12px;
  background: transparent;
  color: #718079;
}
.cast-plan-toolbar .cast-content-filters button.active {
  border-bottom-color: #173f39;
  background: transparent;
  color: #173f39;
  box-shadow: none;
}
.cast-schedule-view-guide {
  margin-block: 8px 13px;
  border: 0;
  border-left: 3px solid #315e55;
  border-radius: 0;
  padding: 6px 0 6px 12px;
  background: transparent;
}
.cast-schedule-view-guide strong { color: #244b44; }
.cast-month-plan-dashboard {
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: none;
}
.cast-month-plan-dashboard .cast-role-goals { gap: 0; }
.cast-month-plan-dashboard .cast-role-goals > div {
  border: 0;
  border-right: 1px solid #e0e7e3;
  border-radius: 0;
  padding: 6px 14px;
  background: transparent;
}
.cast-month-plan-dashboard .cast-role-goals > div:first-child { padding-left: 0; }
.cast-month-plan-dashboard .cast-role-goals > div:last-child { border-right: 0; padding-right: 0; }
.cast-role-badge {
  min-height: 21px;
  border-radius: 4px;
  padding-inline: 7px;
  letter-spacing: -.01em;
}
.cast-calendar-panel {
  border-color: #d9e2de;
  border-radius: 9px;
  box-shadow: none;
}
.cast-calendar-panel > header {
  padding: 18px 20px;
  background: #fff;
}
.cast-calendar-month {
  border-radius: 4px;
  background: #eef3f0;
  color: #365e56;
}
.cast-planning-week-list { gap: 12px; padding: 14px; }
.cast-planning-week {
  border-color: #dce4e0;
  border-radius: 8px;
  background: #fff;
}
.cast-planning-week > header {
  padding: 11px 13px;
  background: #f6f8f7;
}
.cast-planning-week > header strong { color: #244c45; font-size: 13px; }
.cast-planning-date { min-height: 58px; }
.cast-planning-week > .cast-planning-card-lane { gap: 9px; padding: 11px; background: #fbfcfb; }
.cast-planning-card,
.cast-planning-live-card {
  border-radius: 7px;
  box-shadow: none;
}
.cast-planning-card:hover { box-shadow: 0 4px 12px rgba(25, 61, 53, .06); }
.cast-planning-placeholder {
  min-height: 218px;
  border: 1px solid #dce4e0;
  border-radius: 7px;
  padding: 18px;
  background: #f7f9f8;
  transition: border-color .14s ease, background .14s ease;
}
.cast-planning-placeholder:hover {
  border-color: #b8c7c1;
  background: #f5f7f6;
  color: #5f716b;
}
.cast-planning-placeholder .cast-empty-slot-label {
  color: #8b9893;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}
.cast-planning-placeholder > strong { color: #405b54; font-size: 13px; }
.cast-planning-placeholder > span:not(.cast-empty-slot-label) { color: #83908b; font-size: 9px; }
.cast-planning-placeholder > div {
  width: min(190px, 100%);
  gap: 6px;
  margin-top: 9px;
}
.cast-planning-placeholder > div button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: -.01em;
}
.cast-planning-placeholder > div button span { font-size: 6px; }
.cast-planning-placeholder > div button.is-shoot {
  border-color: #173f39;
  background: #173f39;
  color: #fff;
}
.cast-planning-placeholder > div button.is-live {
  border-color: #53677d;
  background: #fff;
  color: #344a60;
}
.cast-planning-placeholder > div button.is-shoot:hover { border-color: #24564d; background: #24564d; }
.cast-planning-placeholder > div button.is-live:hover { border-color: #344a60; background: #eef2f5; }

@media (max-width: 900px) {
  .cast-month-plan-dashboard .cast-role-goals { gap: 8px; }
  .cast-month-plan-dashboard .cast-role-goals > div { border: 1px solid #e0e7e3; border-radius: 6px; padding: 8px; }
}

/* Readability pass: stronger hierarchy, visible live identity, and direct visual choices. */
.cast-management-shell {
  color: #172b36;
  font-size: 14px;
}
.cast-management-head { border-color: #cbd6dc; }
.cast-management-head h2 { color: #102f3d; font-size: 25px; line-height: 1.2; }
.cast-management-eyebrow { color: #3e5965; font-size: 11px; font-weight: 900; }
.cast-management-view-tabs,
.cast-schedule-view-tabs {
  gap: 4px;
  border: 1px solid #ccd6dc;
  border-radius: 9px;
  padding: 4px;
  background: #eef2f4;
}
.cast-management-view-tabs button,
.cast-schedule-view-tabs button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding-inline: 19px;
  color: #415763;
  font-size: 14px;
  font-weight: 850;
}
.cast-management-view-tabs button.active,
.cast-schedule-view-tabs button.active {
  border-color: #0b3548;
  background: #0b3548;
  color: #fff;
  box-shadow: 0 2px 5px rgba(11, 53, 72, .22);
}
.cast-plan-toolbar .cast-content-filters {
  gap: 7px;
  border: 0;
}
.cast-plan-toolbar .cast-content-filters button {
  min-height: 38px;
  border: 1px solid #cfd9df;
  border-radius: 6px;
  padding: 0 14px;
  background: #fff;
  color: #465b67;
  font-size: 12px;
  font-weight: 850;
}
.cast-plan-toolbar .cast-content-filters button.active {
  border-color: #1c5c80;
  background: #1c5c80;
  color: #fff;
  box-shadow: none;
}
.cast-plan-toolbar .cast-content-filters button[data-cast-content-filter="live"]::before,
.cast-plan-toolbar .cast-content-filters button[data-cast-content-filter="derived"]::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #e04455;
  box-shadow: 0 0 0 3px rgba(224, 68, 85, .12);
  content: "";
}
.cast-plan-toolbar .cast-content-filters button.active::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.cast-schedule-view-guide { border-left-width: 4px; padding-left: 14px; }
.cast-schedule-view-guide strong { font-size: 13px; }
.cast-schedule-view-guide span { color: #596d77; font-size: 12px; }

.cast-month-plan-dashboard {
  gap: 18px;
  border: 1px solid #cad6dc;
  border-radius: 10px;
  padding: 20px;
  background: #f7f9fa;
}
.cast-month-plan-dashboard > header h3 { color: #102f3d; font-size: 19px; line-height: 1.25; }
.cast-month-plan-dashboard > header p { margin-top: 5px; color: #60737d; font-size: 12px; }
.cast-dashboard-kicker { display: block; margin-bottom: 4px; color: #55707d; font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.cast-month-plan-dashboard > header button {
  min-height: 38px;
  border-color: #9fb0ba;
  background: #fff;
  color: #263f4d;
  font-size: 11px;
  font-weight: 850;
}
.cast-month-plan-dashboard > header button span { color: #df3e51; font-size: 9px; }
.cast-month-plan-dashboard .cast-role-goals {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.cast-month-plan-dashboard .cast-role-goals > .cast-goal-card {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  border: 1px solid #ccd8dd;
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}
.cast-goal-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: #2d7667; content: ""; }
.cast-goal-card.is-role-deep::before { background: #356da5; }
.cast-goal-card.is-role-market-live::before { background: #6749a2; }
.cast-goal-card.is-role-close-live::before { background: #a35479; }
.cast-goal-card.is-role-urgent::before { background: #c84c4c; }
.cast-goal-card > header { display: grid; gap: 8px; }
.cast-goal-card > header span { width: max-content; color: #47606c; font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.cast-goal-card.is-live > header span { color: #8a2d56; }
.cast-goal-card.is-live > header span i,
.cast-live-signal i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #e33f53;
  box-shadow: 0 0 0 3px rgba(227,63,83,.12);
}
.cast-goal-card > header b { color: #1d3541; font-size: 13px; }
.cast-goal-card > div { display: flex; align-items: flex-end; gap: 9px; margin-top: 12px; }
.cast-goal-card > div > strong { color: #102f3d; font-size: 32px; line-height: .95; letter-spacing: -.04em; }
.cast-goal-card > div > span { display: flex; gap: 4px; color: #526872; font-size: 12px; font-weight: 800; }
.cast-goal-card > div small { color: #82919a; font-size: 10px; font-weight: 700; }
.cast-goal-card > footer { margin-top: 12px; border-top: 1px solid #e2e8eb; padding-top: 9px; color: #60747e; font-size: 10px; font-weight: 800; }
.cast-goal-card.is-filled > footer { color: #16705c; }

.cast-calendar-panel > header h3 { color: #153440; font-size: 18px; }
.cast-calendar-panel > header p { color: #61747d; font-size: 12px; }
.cast-calendar-month { padding: 7px 10px; color: #254d5d; font-size: 11px; font-weight: 900; }
.cast-planning-week > header { min-height: 48px; }
.cast-planning-week > header strong { color: #183e4b; font-size: 15px; }
.cast-planning-week > header span,
.cast-planning-week > header p { color: #61747d; font-size: 11px; }
.cast-planning-date { min-height: 67px; padding: 9px 11px; }
.cast-planning-date > span { font-size: 10px; }
.cast-planning-date > strong { font-size: 16px; }
.cast-planning-date > div b { font-size: 9px; }
.cast-planning-card,
.cast-planning-live-card,
.cast-planning-placeholder { min-height: 238px; }
.cast-planning-card > header { padding: 11px 12px 0; }
.cast-planning-card > button { padding: 10px 12px; }
.cast-planning-card > button > strong { font-size: 15px; }
.cast-planning-card > button > span { font-size: 12px; line-height: 1.45; }
.cast-planning-card > button dt,
.cast-planning-card > button dd { font-size: 10px; }
.cast-planning-card > button small { font-size: 10px; line-height: 1.4; }
.cast-planning-card > footer { padding: 9px 11px; font-size: 10px; }
.cast-planning-card > footer button { min-height: 29px; font-size: 10px; }
.cast-role-badge { min-height: 24px; padding-inline: 8px; font-size: 10px; }
.cast-planning-placeholder .cast-empty-slot-label { font-size: 9px; }
.cast-planning-placeholder > strong { font-size: 15px; }
.cast-planning-placeholder > span:not(.cast-empty-slot-label) { font-size: 11px; }
.cast-planning-placeholder > div button { min-height: 40px; font-size: 11px; }

.cast-planning-live-card {
  border: 1px solid #b7a8d4;
  border-left: 5px solid #6a4aa2;
  background: linear-gradient(150deg, #f5f1fb 0%, #fff 72%);
}
.cast-planning-live-card.is-role-close-live { border-color: #d7abc0; border-left-color: #a34571; background: linear-gradient(150deg, #fbf0f5 0%, #fff 72%); }
.cast-planning-live-card > button { gap: 7px; padding: 13px; }
.cast-planning-live-card header { margin-bottom: 2px; }
.cast-planning-live-card .cast-live-signal { color: #8b214d; font-size: 11px; font-weight: 950; letter-spacing: .09em; }
.cast-planning-live-card .cast-live-role { color: #66547f; font-size: 10px; font-weight: 850; }
.cast-planning-live-card > button > strong { color: #2b2140; font-size: 15px; line-height: 1.35; white-space: normal; }
.cast-planning-live-card > button > small { color: #5c526c; font-size: 11px; }
.cast-planning-live-card > button > p { color: #40374e; font-size: 11px; }
.cast-planning-live-card > button > b { color: #6d607e; font-size: 10px; white-space: normal; }

.modal.cast-slot-modal { width: min(940px, calc(100vw - 32px)); border-color: #9eafb8; border-radius: 12px; }
.cast-slot-clean-head { padding: 25px 30px 22px; background: linear-gradient(105deg, #f5f8fa 0%, #fff 62%); }
.cast-slot-clean-head h2 { color: #102f3d; font-size: 27px; }
.cast-slot-clean-head .muted { max-width: 720px; color: #5a6f79; font-size: 13px; }
.cast-slot-modal-eyebrow { color: #315868; font-size: 10px; }
.cast-editorial-section-title { grid-template-columns: 36px minmax(0,1fr); gap: 11px; padding-top: 22px; }
.cast-editorial-section-title > span { color: #4d6571; font-size: 11px; }
.cast-editorial-section-title strong { color: #153845; font-size: 17px; }
.cast-editorial-section-title small { color: #637680; font-size: 12px; }
.cast-visual-form-flow { display: grid; gap: 22px; margin-top: 18px; }
.cast-choice-section { min-width: 0; margin: 0; border: 0; padding: 0; }
.cast-choice-section > legend { display: flex; align-items: baseline; gap: 9px; width: 100%; margin-bottom: 9px; padding: 0; }
.cast-choice-section > legend b { color: #213e4b; font-size: 13px; }
.cast-choice-section > legend small { color: #6e7f88; font-size: 11px; }
.cast-choice-section > div { display: grid; gap: 8px; }
.cast-choice-section input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cast-choice-section label { position: relative; min-width: 0; cursor: pointer; }
.cast-period-choice > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cast-period-choice label > span {
  display: flex;
  min-height: 45px;
  align-items: center;
  gap: 9px;
  border: 1px solid #cbd6dc;
  border-radius: 7px;
  padding: 8px 11px;
  background: #fff;
}
.cast-period-choice label i { color: #7b8d96; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 9px; font-style: normal; }
.cast-period-choice label strong { color: #344e59; font-size: 12px; }
.cast-period-choice label.selected > span { border-color: #14506b; background: #eaf2f6; box-shadow: inset 0 0 0 1px #14506b; }
.cast-period-choice label.selected i,
.cast-period-choice label.selected strong { color: #0d4058; }
.cast-role-choice > div,
.cast-importance-choice > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cast-role-choice label > span,
.cast-importance-choice label > span {
  display: grid;
  min-height: 92px;
  grid-template-columns: 26px minmax(0,1fr);
  align-content: center;
  column-gap: 9px;
  border: 1px solid #c9d4da;
  border-radius: 8px;
  padding: 13px;
  background: #fff;
}
.cast-role-choice label i,
.cast-importance-choice label i { display: grid; width: 25px; height: 25px; grid-row: 1 / span 2; place-items: center; border-radius: 5px; background: #e8eef1; color: #355565; font-size: 11px; font-style: normal; font-weight: 900; }
.cast-role-choice label strong,
.cast-importance-choice label strong { color: #233e4a; font-size: 13px; }
.cast-role-choice label small,
.cast-importance-choice label small { margin-top: 3px; color: #6c7d86; font-size: 10px; line-height: 1.35; }
.cast-role-choice label.selected > span,
.cast-importance-choice label.selected > span { border-color: #15556f; background: #eef5f7; box-shadow: inset 0 0 0 1px #15556f; }
.cast-role-choice label.selected i,
.cast-importance-choice label.selected i { background: #15556f; color: #fff; }
.cast-role-choice label.is-role-deep.selected > span { border-color: #3e68a0; background: #f0f4fa; box-shadow: inset 0 0 0 1px #3e68a0; }
.cast-role-choice label.is-role-deep.selected i { background: #3e68a0; }
.cast-role-choice label.is-role-urgent.selected > span { border-color: #b64b4b; background: #fcf1f1; box-shadow: inset 0 0 0 1px #b64b4b; }
.cast-role-choice label.is-role-urgent.selected i { background: #b64b4b; }
.cast-category-choice > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cast-category-choice label > span { display: grid; min-height: 48px; place-items: center; border: 1px solid #cbd6dc; border-radius: 7px; padding: 8px 10px; background: #fff; color: #3f5661; font-size: 12px; font-weight: 850; text-align: center; }
.cast-category-choice label.selected > span { border-color: #1a5974; background: #1a5974; color: #fff; box-shadow: 0 2px 5px rgba(26,89,116,.18); }
.cast-choice-section label:hover > span { border-color: #71909f; }
.cast-choice-section input:focus-visible + span { outline: 3px solid rgba(28,92,128,.2); outline-offset: 2px; }
.cast-editorial-copy-grid { margin-top: 16px; }
.cast-slot-primary-grid label > span { color: #314f5c; font-size: 12px; font-weight: 850; }
.cast-slot-clean-body input,
.cast-slot-clean-body textarea { min-height: 48px; border-color: #b8c7ce; border-radius: 7px; padding: 11px 13px; color: #172f3a; font-size: 14px; }
.cast-slot-clean-body .cast-planning-intent textarea { min-height: 92px; border-radius: 7px; font-size: 14px !important; }
.cast-slot-modal .modal-foot { min-height: 70px; background: #f3f6f7; }
.cast-slot-modal .modal-foot button { min-height: 43px; border-radius: 6px; padding-inline: 18px; font-size: 12px; font-weight: 850; }

@media (max-width: 960px) {
  .cast-month-plan-dashboard .cast-role-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cast-management-head h2 { font-size: 21px; }
  .cast-management-view-tabs button, .cast-schedule-view-tabs button { min-height: 39px; padding-inline: 13px; font-size: 12px; }
  .cast-period-choice > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cast-role-choice > div, .cast-importance-choice > div, .cast-category-choice > div { grid-template-columns: 1fr; }
  .cast-role-choice label > span, .cast-importance-choice label > span { min-height: 78px; }
}

/* Pictogram system and unified creation experience. */
.cast-interface-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.cast-create-modal {
  border: 1px solid #9eafb8;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(11, 38, 52, .22);
}
.cast-create-modal .cast-create-modal-head {
  min-height: 0;
  padding: 25px 30px 22px;
  border-bottom: 1px solid #cbd6dc;
  background: linear-gradient(105deg, #f3f7f9 0%, #fff 66%);
}
.cast-create-modal .cast-create-modal-head::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #174f68;
  content: "";
}
.cast-create-modal .cast-create-modal-head.is-live::before { background: #744a9b; }
.cast-create-modal .cast-create-modal-head h2 { margin: 0; color: #102f3d; font-size: 27px; letter-spacing: -.03em; }
.cast-create-modal .cast-create-modal-head .muted { margin-top: 5px; color: #5b707a; font-size: 13px; line-height: 1.55; }
.cast-create-modal .cast-slot-modal-eyebrow,
.cast-create-modal .cast-live-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  margin-bottom: 4px;
  color: #315868;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .09em;
}
.cast-create-modal .cast-create-modal-head.is-live .cast-live-eyebrow { color: #69468c; }
.cast-create-modal .cast-slot-modal-eyebrow .cast-interface-icon,
.cast-create-modal .cast-live-eyebrow .cast-interface-icon { width: 17px; height: 17px; }
.cast-create-modal > .modal-foot {
  min-height: 70px;
  border-top: 1px solid #cbd6dc;
  padding: 12px 28px;
  background: #f3f6f7;
}
.cast-create-modal > .modal-foot button { min-height: 43px; border-radius: 6px; padding-inline: 19px; font-size: 12px; font-weight: 850; }
.cast-create-modal > .modal-foot .primary-button { border-color: #0f4258; background: #0f4258; color: #fff; box-shadow: none; }
.cast-create-modal > .modal-foot .primary-button:hover { border-color: #0a3346; background: #0a3346; }

.cast-role-choice label i .cast-interface-icon { width: 17px; height: 17px; stroke-width: 1.9; }
.cast-role-choice label.selected i .cast-interface-icon { stroke-width: 2; }
.cast-live-create-modal { width: min(940px, calc(100vw - 32px)); border-radius: 12px; }
.cast-live-create-body { gap: 24px; padding: 26px 30px 30px; background: #fff; }
.cast-live-create-body > section + section { margin-top: 0; border-top: 1px solid #dbe3e7; padding-top: 24px; }
.cast-live-section-heading { align-items: center; }
.cast-live-section-heading > div { gap: 11px; }
.cast-live-section-heading > div > span {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #e7eef2;
  color: #284e60;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}
.cast-live-section-heading h3 { color: #153845; font-size: 17px; }
.cast-live-section-heading p { color: #637680; font-size: 12px; }
.cast-live-preset-grid { gap: 10px; }
.cast-live-preset-card {
  min-height: 174px;
  gap: 6px;
  border: 1px solid #c9d4da;
  border-radius: 9px;
  padding: 17px;
  background: #fff;
  box-shadow: none;
}
.cast-live-preset-card:hover { transform: none; border-color: #718e9c; box-shadow: 0 4px 12px rgba(25, 62, 79, .07); }
.cast-live-preset-card.selected {
  border-color: #185672;
  background: #eef5f7;
  box-shadow: inset 0 0 0 1px #185672;
}
.cast-live-preset-card > .cast-preset-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin-bottom: 5px;
  border-radius: 7px;
  background: #e8eef1;
  color: #315566;
}
.cast-live-preset-card.selected > .cast-preset-icon { background: #185672; color: #fff; }
.cast-live-preset-card > .cast-preset-icon .cast-interface-icon { width: 20px; height: 20px; }
.cast-live-preset-card > span:not(.cast-preset-icon) { color: #69468c; font-size: 11px; font-weight: 950; letter-spacing: .04em; }
.cast-live-preset-card > strong { color: #1a3541; font-size: 15px; }
.cast-live-preset-card > p { color: #637680; font-size: 12px; }
.cast-live-preset-card > i { right: 14px; bottom: 13px; border-radius: 4px; padding: 5px 8px; background: #edf1f3; color: #627680; font-size: 10px; }
.cast-live-preset-card.selected > i { background: #185672; color: #fff; }
.cast-live-create-schedule {
  gap: 12px;
  border: 1px solid #cbd6dc;
  border-radius: 9px;
  padding: 17px;
  background: #f6f8f9;
}
.cast-live-create-schedule label { color: #314f5c; font-size: 12px; }
.cast-live-create-schedule input { min-height: 48px; border-color: #b8c7ce; border-radius: 7px; color: #172f3a; font-size: 14px; }

.cast-month-plan-dashboard > header button .cast-interface-icon { width: 16px; height: 16px; margin-right: 5px; color: #744a9b; }

/* Cast planning: editable per-episode LIVE type and collapsible monthly status */
.cast-live-type-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.cast-live-type-edit-button {
  display: inline-flex; min-height: 40px; align-items: center; gap: 7px; border: 1px solid #e24b5d; border-radius: 10px; padding: 0 14px;
  background: #fff; color: #bb263a; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 12px rgba(185,38,57,.08);
}
.cast-live-type-edit-button:hover, .cast-live-type-edit-button.active { background: #fff1f3; border-color: #c62f43; }
.cast-live-type-edit-button .cast-interface-icon { width: 16px; height: 16px; }
.cast-live-type-editor { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(190px, .7fr); align-items: end; gap: 8px 14px; margin-top: 14px; border: 1px solid #efb3bb; border-left: 4px solid #d83d52; border-radius: 14px; padding: 17px 18px; background: #fff7f8; }
.cast-live-type-editor[hidden] { display: none; }
.cast-live-type-editor label { display: grid; gap: 7px; color: #512a32; font-size: 13px; font-weight: 900; }
.cast-live-type-editor input, .cast-live-type-editor select { min-height: 48px; border: 1px solid #dca5ad; border-radius: 10px; padding: 0 14px; background: #fff; color: #302226; font: inherit; font-size: 15px; font-weight: 800; }
.cast-live-type-editor p { grid-column: 1 / -1; margin: 2px 0 0; color: #865c64; font-size: 12px; }
.cast-live-create-schedule { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cast-month-plan-dashboard.is-collapsed { gap: 0; padding: 16px 20px; background: #fff; }
.cast-month-plan-dashboard > header { align-items: center; }
.cast-dashboard-actions { display: flex; align-items: center; gap: 10px; }
.cast-month-plan-dashboard > header .cast-dashboard-toggle {
  display: inline-flex; min-height: 44px; align-items: center; gap: 9px; border: 1px solid #173f4c; border-radius: 11px; padding: 0 13px;
  background: #173f4c; color: #fff; font: inherit; cursor: pointer; box-shadow: 0 7px 18px rgba(23,63,76,.18);
}
.cast-dashboard-toggle:hover { background: #0f303b; }
.cast-dashboard-toggle strong { color: inherit; font-size: 12px; font-weight: 900; }
.cast-dashboard-toggle > b { color: #b9d9d3; font-size: 15px; }
.cast-dashboard-switch { position: relative; width: 34px; height: 20px; border-radius: 99px; background: #80969d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.cast-dashboard-switch i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .18s ease; }
.cast-month-plan-dashboard.is-open .cast-dashboard-switch { background: #30a58e; }
.cast-month-plan-dashboard.is-open .cast-dashboard-switch i { transform: translateX(14px); }
@media (max-width: 760px) {
  .cast-live-type-heading-actions, .cast-dashboard-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .cast-live-type-editor { grid-template-columns: 1fr; }
  .cast-month-plan-dashboard > header .cast-dashboard-toggle { justify-content: center; }
}
.cast-goal-card > header span { display: inline-flex; align-items: center; gap: 5px; }
.cast-goal-card > header span .cast-interface-icon { width: 15px; height: 15px; }
.cast-goal-card.is-live > header span .cast-interface-icon { color: #9a315d; }
.cast-planning-placeholder {
  align-content: center;
  border-color: #cfd9de;
  background: linear-gradient(180deg, #fbfcfd 0%, #f5f8f9 100%);
}
.cast-planning-placeholder:hover { border-color: #9fb1ba; background: #f5f8fa; }
.cast-planning-placeholder .cast-empty-slot-label { color: #768a94; letter-spacing: .16em; }
.cast-planning-placeholder > strong { color: #203e4b; font-size: 16px; }
.cast-planning-placeholder > span:not(.cast-empty-slot-label) { color: #687b85; }
.cast-planning-placeholder > div {
  width: min(230px, 100%);
  gap: 7px;
  margin-top: 11px;
}
.cast-planning-placeholder > div button {
  display: grid;
  min-height: 58px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: 7px;
  padding: 8px 9px;
  text-align: left;
}
.cast-planning-placeholder > div button .cast-slot-action-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 6px;
}
.cast-planning-placeholder > div button .cast-slot-action-icon .cast-interface-icon { width: 17px; height: 17px; }
.cast-planning-placeholder > div button .cast-slot-action-copy { display: grid; gap: 1px; font-size: inherit; }
.cast-planning-placeholder > div button .cast-slot-action-copy b { font-size: 11px; line-height: 1.2; }
.cast-planning-placeholder > div button .cast-slot-action-copy small { font-size: 8px; font-weight: 700; line-height: 1.2; opacity: .72; }
.cast-planning-placeholder > div button.is-shoot { border-color: #143f52; background: #143f52; color: #fff; }
.cast-planning-placeholder > div button.is-shoot .cast-slot-action-icon { background: rgba(255,255,255,.13); }
.cast-planning-placeholder > div button.is-live { border-color: #74508f; background: #fff; color: #5c3d75; }
.cast-planning-placeholder > div button.is-live .cast-slot-action-icon { background: #f0eaf5; color: #754999; }
.cast-planning-placeholder > div button.is-live:hover { border-color: #62407d; background: #f7f2fa; }

@media (max-width: 720px) {
  .cast-create-modal .cast-create-modal-head { padding: 21px 20px 18px; }
  .cast-create-modal .cast-create-modal-head h2 { font-size: 23px; }
  .cast-live-create-body { padding: 20px; }
}

/* High-contrast creation actions and role-scoped category management. */
.cast-planning-placeholder > div button.is-shoot {
  border-color: #4f9b91;
  background: #dff2ef;
  color: #104e49;
}
.cast-planning-placeholder > div button.is-shoot .cast-slot-action-icon {
  background: #b8ded8;
  color: #0b5e57;
}
.cast-planning-placeholder > div button.is-shoot:hover {
  border-color: #2c7c72;
  background: #cce9e4;
  color: #0a4641;
}
.cast-planning-placeholder > div button.is-live {
  border-color: #d4545f;
  background: #fff4f4;
  color: #9d2431;
}
.cast-planning-placeholder > div button.is-live .cast-slot-action-icon {
  background: #f9dadd;
  color: #b32232;
}
.cast-planning-placeholder > div button.is-live:hover {
  border-color: #b72d3b;
  background: #fde6e8;
  color: #851b27;
}
.cast-planning-placeholder > div button .cast-slot-action-copy b { color: inherit; font-weight: 950; }
.cast-planning-placeholder > div button .cast-slot-action-copy small { color: inherit; opacity: .82; }
.cast-planning-live-card {
  border-color: #e2a2a9;
  border-left-color: #c73746;
  background: linear-gradient(150deg, #fff1f2 0%, #fff 72%);
}
.cast-planning-live-card.is-role-close-live {
  border-color: #e5a1a7;
  border-left-color: #a92735;
  background: linear-gradient(150deg, #fff0f1 0%, #fff 72%);
}
.cast-planning-live-card .cast-live-signal,
.cast-planning-live-card .cast-live-role { color: #a52331; }
.cast-planning-live-card > button > strong { color: #461d23; }
.cast-planning-live-card > button > small,
.cast-planning-live-card > button > p,
.cast-planning-live-card > button > b { color: #70434a; }
.cast-goal-card.is-live::before { background: #c73746; }
.cast-goal-card.is-live > header span,
.cast-goal-card.is-live > header span .cast-interface-icon { color: #a52331; }

.cast-category-choice > legend {
  align-items: center;
  justify-content: space-between;
}
.cast-category-choice > legend > span { display: grid; gap: 3px; }
.cast-category-choice > legend > button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  border: 1px solid #aebfc7;
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
  color: #315461;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.cast-category-choice > legend > button:hover { border-color: #1b6176; background: #eef5f7; }
.cast-category-choice > legend > button .cast-interface-icon { width: 15px; height: 15px; }
.cast-role-category-manager {
  display: grid;
  grid-column: 1 / -1;
  gap: 13px;
  margin-top: 11px;
  border: 1px solid #9fb4bd;
  border-radius: 8px;
  padding: 15px;
  background: #f3f7f8;
}
.cast-role-category-manager[hidden] { display: none; }
.cast-role-category-manager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cast-role-category-manager-head > div { display: grid; gap: 3px; }
.cast-role-category-manager-head strong { color: #173d4b; font-size: 13px; }
.cast-role-category-manager-head small { color: #637983; font-size: 10px; }
.cast-role-category-manager-head > button {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: #e3eaed;
  color: #49616c;
  font: inherit;
  cursor: pointer;
}
.cast-role-category-custom-list { display: flex; flex-wrap: wrap; gap: 7px; }
.cast-role-category-custom-list > span {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: 6px;
  border: 1px solid #c3d0d6;
  border-radius: 6px;
  padding: 0 5px 0 9px;
  background: #fff;
  color: #334f5b;
  font-size: 10px;
  font-weight: 850;
}
.cast-role-category-custom-list > span > i { width: 7px; height: 7px; border-radius: 50%; background: var(--role-category-color, #3e7d8e); }
.cast-role-category-custom-list > span > button { width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent; color: #819098; font: inherit; cursor: pointer; }
.cast-role-category-custom-list > span > button:hover { background: #f9e7e8; color: #a62633; }
.cast-role-category-custom-list > p { margin: 0; color: #74868f; font-size: 10px; }
.cast-role-category-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cast-role-category-add input { min-height: 40px; border: 1px solid #b6c5cc; border-radius: 6px; padding: 0 11px; background: #fff; color: #1e3c48; font: inherit; font-size: 12px; }
.cast-role-category-add button { min-width: 66px; border: 1px solid #15556f; border-radius: 6px; background: #15556f; color: #fff; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }

@media (max-width: 560px) {
  .cast-category-choice > legend { align-items: flex-start; flex-direction: column; }
  .cast-role-category-add { grid-template-columns: 1fr; }
  .cast-role-category-add button { min-height: 40px; }
}

/* Expected upload schedule: make the automatic production order visible before date entry. */
.modal.cast-upload-schedule-modal {
  width: min(760px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid #a8bbb5;
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(20, 48, 40, .24);
}
.cast-upload-schedule-modal .cast-create-modal-head {
  padding: 25px 30px 21px;
  background: linear-gradient(100deg, #f5faf8 0%, #fff 68%);
}
.cast-upload-schedule-modal .cast-slot-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #236b5c;
  font-size: 11px;
}
.cast-upload-schedule-modal .cast-slot-modal-eyebrow .cast-interface-icon { width: 17px; height: 17px; }
.cast-upload-schedule-modal .cast-create-modal-head h2 { margin-top: 5px; font-size: 27px; }
.cast-upload-schedule-modal .cast-create-modal-head .muted { font-size: 13px; line-height: 1.55; }
.cast-upload-schedule-body {
  gap: 20px;
  padding: 24px 30px 30px;
  background: #fbfcfc;
}
.cast-upload-card-summary {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
}
.cast-upload-card-summary > span {
  grid-row: 1 / 3;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 74px;
  border-radius: 7px;
  padding: 6px 10px;
  background: #e7f2ef;
  color: #1c6758;
  font-size: 11px;
}
.cast-upload-card-summary > strong { font-size: 16px; }
.cast-upload-card-summary > p { grid-column: 2 / 3; font-size: 12px; }
.cast-upload-card-summary > small { grid-column: 3; grid-row: 1 / 3; color: #657a73; font-size: 10px; font-weight: 750; }
.cast-upload-workflow {
  overflow: hidden;
  border: 1px solid #b8cbc4;
  border-radius: 12px;
  background: #fff;
}
.cast-upload-workflow > header {
  display: grid;
  gap: 3px;
  padding: 17px 19px 14px;
  border-bottom: 1px solid #dbe5e1;
  background: linear-gradient(110deg, #eaf5f1 0%, #f8fbfa 72%);
}
.cast-upload-workflow > header > span {
  color: #28705f;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
}
.cast-upload-workflow > header > strong { color: #173f36; font-size: 17px; letter-spacing: -.015em; }
.cast-upload-workflow > header > small { color: #657b74; font-size: 11px; line-height: 1.5; }
.cast-upload-workflow ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.cast-upload-workflow li {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 15px;
  border-right: 1px solid #e1e9e6;
}
.cast-upload-workflow li:last-child { border-right: 0; }
.cast-upload-workflow li:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  right: -10px;
  top: 39px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid #d6e1dd;
  border-radius: 50%;
  background: #fff;
  color: #739087;
  content: "›";
  font-size: 16px;
  font-weight: 900;
}
.cast-upload-workflow li > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 9px;
  background: #e8f3f0;
  color: #2d7565;
}
.cast-upload-workflow li.is-shoot > i { background: #e6eef3; color: #315f73; }
.cast-upload-workflow li.is-upload > i { background: #f3eee6; color: #866136; }
.cast-upload-workflow li > i .cast-interface-icon { width: 20px; height: 20px; }
.cast-upload-workflow li > span { display: grid; min-width: 0; gap: 2px; }
.cast-upload-workflow li small { color: #82928d; font-size: 9px; font-weight: 800; }
.cast-upload-workflow li b { color: #536c64; font-size: 10px; }
.cast-upload-workflow li strong { overflow: hidden; color: #163f35; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; }
.cast-upload-date-section {
  gap: 14px;
  border: 1px solid #c5d2ce;
  border-radius: 12px;
  padding: 19px;
  background: #fff;
}
.cast-upload-date-section > header { gap: 3px; }
.cast-upload-date-section > header > span { color: #347364; font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.cast-upload-date-section > header strong { color: #183f36; font-size: 18px; }
.cast-upload-date-section > header small { color: #667b74; font-size: 11px; line-height: 1.5; }
.cast-upload-window-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  border: 0;
  padding: 0;
}
.cast-upload-window-choice > label { cursor: pointer; }
.cast-upload-window-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cast-upload-window-choice label > span {
  display: grid;
  min-height: 68px;
  grid-template-columns: 35px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 2px 10px;
  border: 1px solid #c7d3cf;
  border-radius: 9px;
  padding: 10px 13px;
  background: #fafcfb;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cast-upload-window-choice label > span > i {
  grid-row: 1 / 3;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 8px;
  background: #e8eeec;
  color: #536e66;
}
.cast-upload-window-choice label > span .cast-interface-icon { width: 18px; height: 18px; }
.cast-upload-window-choice b { color: #2d4941; font-size: 13px; }
.cast-upload-window-choice small { color: #75867f; font-size: 10px; }
.cast-upload-window-choice label.selected > span {
  border-color: #347b6b;
  background: #edf7f4;
  box-shadow: inset 0 0 0 1px #347b6b;
}
.cast-upload-window-choice label.selected > span > i { background: #d1e9e3; color: #176353; }
.cast-upload-window-choice label.selected b { color: #155748; }
.cast-upload-date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cast-upload-date-fields > label {
  display: grid;
  gap: 5px;
  border-radius: 9px;
  padding: 13px;
  background: #f5f8f7;
}
.cast-upload-date-fields > label[hidden] { display: none; }
.cast-upload-date-fields > label > span { color: #274c42; font-size: 12px; font-weight: 900; }
.cast-upload-date-fields > label > small { min-height: 16px; color: #71847d; font-size: 10px; line-height: 1.4; }
.cast-upload-date-fields input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid #aebfba;
  border-radius: 7px;
  padding: 0 12px;
  background: #fff;
  color: #173e34;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}
.cast-upload-date-fields input:focus { border-color: #287261; outline: 3px solid rgba(40, 114, 97, .13); }
.cast-upload-schedule-modal .modal-foot {
  min-height: 70px;
  padding: 12px 30px;
  border-top-color: #cddad6;
  background: #f4f7f6;
}
.cast-upload-schedule-modal .modal-foot button { min-height: 42px; border-radius: 7px; font-size: 12px; }
.cast-upload-schedule-modal .cast-upload-help { color: #61776f; font-size: 10px; }
.cast-upload-foot-start { display: flex; align-items: center; gap: 10px; }
.cast-upload-foot-start > small { max-width: 155px; color: #71837d; font-size: 9px; line-height: 1.35; }
.cast-upload-schedule-modal .cast-upload-delete-button {
  min-height: 40px;
  border-color: #e4b8b8;
  background: #fff;
  color: #a13636;
  font-weight: 900;
}
.cast-upload-schedule-modal .cast-upload-delete-button:hover { border-color: #c96e6e; background: #fff3f3; color: #852424; }

@media (max-width: 680px) {
  .cast-upload-schedule-modal .cast-create-modal-head { padding: 21px 20px 18px; }
  .cast-upload-schedule-body { padding: 19px 18px 22px; }
  .cast-upload-card-summary { grid-template-columns: auto minmax(0, 1fr); }
  .cast-upload-card-summary > small { grid-column: 2; grid-row: auto; }
  .cast-upload-workflow ol, .cast-upload-window-choice, .cast-upload-date-fields { grid-template-columns: 1fr; }
  .cast-upload-workflow li { min-height: 78px; border-right: 0; border-bottom: 1px solid #e1e9e6; }
  .cast-upload-workflow li:last-child { border-bottom: 0; }
  .cast-upload-workflow li:not(:last-child)::after { right: auto; top: auto; left: 50%; bottom: -10px; transform: rotate(90deg); }
  .cast-upload-schedule-modal .modal-foot { align-items: stretch; flex-direction: column; padding-inline: 18px; }
  .cast-upload-foot-start { justify-content: space-between; }
}

/* Editorial brief: one clear editing surface, with the automatic schedule tucked away. */
.modal.cast-program-info-modal {
  display: grid;
  width: min(900px, calc(100vw - 32px));
  max-height: min(920px, calc(100vh - 28px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-color: #9eaaa7;
  border-radius: 18px;
  box-shadow: 0 32px 90px rgba(16, 35, 31, .28);
}
.cast-program-info-modal .cast-create-modal-head {
  padding: 29px 34px 25px;
  border-bottom: 1px solid #d9dfdd;
  background: #fff;
}
.cast-program-info-modal .cast-create-modal-head::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #146c5a;
  content: "";
}
.cast-program-info-modal .cast-slot-modal-eyebrow {
  color: #176555;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}
.cast-program-info-modal .cast-create-modal-head h2 {
  margin-top: 7px;
  color: #172522;
  font-size: 31px;
  line-height: 1.18;
  letter-spacing: -.04em;
}
.cast-program-info-modal .cast-create-modal-head .muted {
  margin-top: 7px;
  color: #5e6e69;
  font-size: 14px;
  line-height: 1.6;
}
.cast-program-info-modal .cast-create-modal-head .icon-button {
  width: 40px;
  height: 40px;
  border-color: #d6ddda;
  color: #394b46;
  font-size: 22px;
}
.cast-program-info-body {
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 34px 30px;
  background: #f4f6f5;
}
.cast-program-info-modal .cast-upload-card-summary {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 13px;
  border: 0;
  border-left: 3px solid #1b725f;
  border-radius: 8px;
  padding: 13px 16px;
  box-shadow: 0 1px 0 rgba(28, 48, 43, .05);
}
.cast-program-info-modal .cast-upload-card-summary > span {
  grid-row: 1 / 3;
  min-width: 82px;
  border-radius: 6px;
  font-size: 12px;
}
.cast-program-info-modal .cast-upload-card-summary > strong {
  color: #1d302b;
  font-size: 17px;
  letter-spacing: -.02em;
}
.cast-program-info-modal .cast-upload-card-summary > p {
  grid-column: 2;
  color: #65736f;
  font-size: 12px;
  font-weight: 700;
}
.cast-program-info-modal .cast-upload-card-summary > small {
  grid-column: 3;
  grid-row: 1 / 3;
  padding: 7px 10px;
  border: 1px solid #d8dfdd;
  border-radius: 999px;
  color: #425a53;
  font-size: 11px;
  font-weight: 850;
}
.cast-program-info-section {
  display: grid;
  gap: 17px;
  border: 1px solid #d6ddda;
  border-radius: 11px;
  padding: 22px 23px 23px;
  background: #fff;
}
.cast-program-matching-section.is-primary { border-color: #adc9c1; box-shadow: 0 8px 24px rgba(31, 82, 69, .07); }
.cast-program-criteria-toggle { overflow: hidden; border: 1px solid #cbd6d2; border-radius: 10px; background: #fff; }
.cast-program-criteria-summary { position: relative; z-index: 1; display: grid; width: 100%; min-height: 70px; box-sizing: border-box; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 0; padding: 0 18px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cast-program-criteria-summary:hover { background: #f8faf9; }
.cast-program-criteria-summary > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 8px; background: #edf2f0; color: #426158; }
.cast-program-criteria-summary .cast-interface-icon { width: 20px; height: 20px; }
.cast-program-criteria-summary > div { display: grid; gap: 2px; }
.cast-program-criteria-summary strong { color: #283b36; font-size: 15px; }
.cast-program-criteria-summary small { color: #74827e; font-size: 11px; line-height: 1.45; }
.cast-program-criteria-summary > b { min-width: 54px; border: 1px solid #bfcac6; border-radius: 7px; padding: 8px 10px; color: #2d554b; font-size: 11px; text-align: center; }
.cast-program-criteria-toggle.is-open .cast-program-criteria-summary { border-bottom: 1px solid #d9e0de; }
.cast-program-criteria-toggle.is-open .cast-program-criteria-summary > b { border-color: #176b59; background: #176b59; color: #fff; }
.cast-program-criteria-panel { padding: 16px; background: #f7f9f8; }
.cast-program-criteria-panel[hidden] { display: none; }
.cast-program-criteria-panel .cast-program-info-section { border-color: #d5dfdc; box-shadow: none; }
.cast-program-info-section > header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cast-program-info-section > header > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: #e5efec;
  color: #176353;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
}
.cast-program-info-section > header > div { display: grid; gap: 2px; }
.cast-program-info-section > header strong {
  color: #1a2d28;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.cast-program-info-section > header small {
  color: #687873;
  font-size: 12px;
  line-height: 1.5;
}
.cast-program-info-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.cast-program-info-fields > label {
  display: grid;
  align-content: start;
  gap: 6px;
}
.cast-program-info-fields > label:first-child { grid-column: 1 / -1; }
.cast-program-info-fields > label:last-child { grid-column: 1 / -1; }
.cast-program-info-fields label > span,
.cast-program-info-modal .cast-upload-date-fields label > span {
  color: #243b35;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.cast-program-info-fields label > small,
.cast-program-info-modal .cast-upload-date-fields label > small {
  min-height: 0;
  color: #74817d;
  font-size: 11px;
  line-height: 1.5;
}
.cast-program-info-fields input,
.cast-program-info-fields textarea,
.cast-program-info-modal .cast-upload-date-fields input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #b9c5c1;
  border-radius: 8px;
  background: #fbfcfc;
  color: #172c27;
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cast-program-info-fields input {
  min-height: 50px;
  padding: 0 14px;
}
.cast-program-info-fields textarea {
  min-height: 112px;
  resize: vertical;
  padding: 12px 14px;
}
.cast-program-criteria-section { gap: 19px; }
.cast-program-criteria-section fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 0;
  padding: 0;
}
.cast-program-criteria-section legend {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: 9px;
  padding: 0;
  color: #263d37;
  font-size: 14px;
  font-weight: 900;
}
.cast-program-criteria-section legend small {
  color: #74827e;
  font-size: 11px;
  font-weight: 650;
}
.cast-program-role-choice > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.cast-program-role-choice label { cursor: pointer; }
.cast-program-role-choice input,
.cast-program-category-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cast-program-role-choice label > span {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  border: 1px solid #c4cfcb;
  border-radius: 8px;
  padding: 9px 12px;
  background: #fafbfb;
  color: #41564f;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cast-program-role-choice label > span > i {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: #e8eeec;
  color: #536a63;
}
.cast-program-role-choice label > span .cast-interface-icon { width: 18px; height: 18px; }
.cast-program-role-choice label > span strong { font-size: 13px; }
.cast-program-role-choice label.selected > span {
  border-color: #19705d;
  background: #edf6f3;
  color: #155849;
  box-shadow: inset 0 0 0 1px #19705d;
}
.cast-program-role-choice label.selected > span > i { background: #d5ebe5; color: #116451; }
.cast-program-role-choice label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.cast-program-category-choice > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cast-program-category-choice label { cursor: pointer; }
.cast-program-category-choice label > span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #c7d1ce;
  border-radius: 999px;
  padding: 0 14px;
  background: #fff;
  color: #4a5f59;
  font-size: 12px;
  font-weight: 800;
}
.cast-program-category-choice label.selected > span {
  border-color: #173f36;
  background: #173f36;
  color: #fff;
  box-shadow: 0 5px 12px rgba(23, 63, 54, .14);
}
.cast-program-info-fields input::placeholder,
.cast-program-info-fields textarea::placeholder { color: #9aa6a2; }
.cast-program-info-fields input:focus,
.cast-program-info-fields textarea:focus,
.cast-program-info-modal .cast-upload-date-fields input:focus {
  border-color: #176b59;
  outline: 3px solid rgba(23, 107, 89, .13);
  background: #fff;
}
.cast-program-info-modal .cast-upload-date-section { gap: 17px; }
.cast-program-info-modal .cast-upload-date-fields {
  display: block;
  max-width: 430px;
}
.cast-program-info-modal .cast-upload-date-fields > label {
  display: grid;
  gap: 6px;
  padding: 0;
  background: transparent;
}
.cast-program-info-modal .cast-upload-date-fields input {
  min-height: 54px;
  padding: 0 14px;
  font-size: 17px;
  font-weight: 850;
}
.cast-schedule-guide-toggle {
  overflow: hidden;
  min-height: 68px;
  border: 1px solid #c5cfcc;
  border-radius: 10px;
  background: #fff;
}
.cast-schedule-guide-summary {
  display: grid;
  width: 100%;
  min-height: 68px;
  box-sizing: border-box;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 0 18px;
  background: #fff;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  user-select: none;
}
.cast-schedule-guide-summary > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: #edf2f0;
  color: #426158;
}
.cast-schedule-guide-summary .cast-interface-icon { width: 20px; height: 20px; }
.cast-schedule-guide-summary > div { display: grid; gap: 2px; }
.cast-schedule-guide-summary strong { color: #283b36; font-size: 15px; }
.cast-schedule-guide-summary small { color: #74827e; font-size: 11px; line-height: 1.45; }
.cast-schedule-guide-summary > b {
  min-width: 54px;
  border: 1px solid #bfcac6;
  border-radius: 7px;
  padding: 8px 10px;
  color: #2d554b;
  font-size: 11px;
  text-align: center;
}
.cast-schedule-guide-summary:hover { background: #f8faf9; }
.cast-schedule-guide-toggle.is-open .cast-schedule-guide-summary { border-bottom: 1px solid #d9e0de; }
.cast-schedule-guide-toggle.is-open .cast-schedule-guide-summary > b { border-color: #176b59; background: #176b59; color: #fff; }
.cast-schedule-guide-toggle.is-open { min-height: 290px; }
.cast-schedule-guide-panel[hidden] { display: none; }
.cast-schedule-guide-toggle .cast-upload-workflow {
  margin: 16px;
  border-color: #cbd6d2;
  border-radius: 9px;
}
.cast-schedule-guide-toggle .cast-emergency-note { margin: 16px; }
.cast-program-info-modal .modal-foot {
  min-height: 78px;
  padding: 14px 34px;
  border-top-color: #cbd4d1;
  background: #fff;
}
.cast-program-info-modal .modal-foot button {
  min-height: 46px;
  border-radius: 8px;
  padding-inline: 18px;
  font-size: 13px;
}
.cast-program-info-modal .modal-foot .primary-button {
  min-width: 130px;
  background: #126b59;
  box-shadow: 0 7px 18px rgba(18, 107, 89, .18);
}
.cast-program-info-modal .cast-upload-help { color: #667772; font-size: 11px; }
.cast-program-info-modal .cast-upload-foot-start > small { max-width: 180px; font-size: 10px; }
.cast-program-info-modal .cast-upload-foot-start { flex-wrap: wrap; }
.cast-program-info-modal .cast-program-delete-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: #d99c9c;
  background: #fff7f7;
  color: #9f2929;
  font-weight: 900;
}
.cast-program-info-modal .cast-program-delete-button .cast-interface-icon { width: 16px; height: 16px; }
.cast-program-info-modal .cast-upload-delete-button { border-color: #c7d1ce; color: #52675f; font-weight: 800; }
.cast-pre-registration-match-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 15px;
  border: 1px solid #cdd9d5;
  border-radius: 9px;
  padding: 13px 15px;
  background: #f3f8f6;
  color: #315f53;
}
.cast-pre-registration-match-note > .cast-interface-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.cast-pre-registration-match-note > span { display: grid; gap: 2px; }
.cast-pre-registration-match-note strong { color: #21483e; font-size: 13px; }
.cast-pre-registration-match-note small { color: #667b74; font-size: 11px; line-height: 1.45; }
.cast-slot-role-grid[data-cast-role-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cast-slot-role-grid[data-cast-role-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cast-slot-role-grid[data-cast-role-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cast-slot-role-grid[data-cast-role-count="4"] .cast-slot-selected-person small,
.cast-slot-role-grid[data-cast-role-count="5"] .cast-slot-selected-person small { font-size: 9px; }
.cast-slot-add-candidate-card {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  border: 1px dashed #80a99e;
  border-radius: 9px;
  padding: 0 14px;
  background: #f5faf8;
  color: #286b5b;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.cast-slot-add-candidate-card:hover { border-style: solid; background: #eaf5f1; color: #195545; }
.cast-slot-add-candidate-card[hidden] { display: none; }
.cast-slot-extra-input > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cast-slot-extra-input > div > small { color: #7c8d87; font-size: 9px; line-height: 1.4; }
.cast-slot-extra-input > div > button {
  flex: 0 0 auto;
  min-height: 31px;
  border: 1px solid #4f8f7f;
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
  color: #236655;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.cast-slot-extra-input > div > button:hover { background: #e8f4f0; }

@media (max-width: 680px) {
  .modal.cast-program-info-modal { width: min(100vw - 16px, 900px); max-height: calc(100vh - 16px); border-radius: 13px; }
  .cast-program-info-modal .cast-create-modal-head { padding: 23px 21px 20px; }
  .cast-program-info-modal .cast-create-modal-head h2 { font-size: 27px; }
  .cast-program-info-body { padding: 17px 15px 22px; }
  .cast-program-info-section { padding: 18px 16px 19px; }
  .cast-program-info-fields { grid-template-columns: 1fr; }
  .cast-program-info-fields > label:first-child { grid-column: auto; }
  .cast-program-info-fields > label:last-child { grid-column: auto; }
  .cast-program-role-choice > div { grid-template-columns: 1fr; }
  .cast-program-criteria-section legend { align-items: flex-start; flex-direction: column; gap: 3px; }
  .cast-program-criteria-summary { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 0 13px; }
  .cast-program-criteria-summary small { display: none; }
  .cast-program-info-modal .cast-upload-card-summary { grid-template-columns: auto minmax(0, 1fr); }
  .cast-program-info-modal .cast-upload-card-summary > small { grid-column: 2; grid-row: auto; justify-self: start; }
  .cast-schedule-guide-summary { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 0 13px; }
  .cast-schedule-guide-summary small { display: none; }
  .cast-schedule-guide-toggle.is-open { min-height: 470px; }
  .cast-program-info-modal .modal-foot { padding: 13px 15px; }
  .cast-slot-role-grid[data-cast-role-count] { grid-template-columns: 1fr; }
  .cast-slot-extra-input > div { align-items: stretch; flex-direction: column; }
}

/* Detail actions stay discoverable, while scheduled cards align with their nearest day. */
.cast-slot-head-actions { display: flex; align-items: center; gap: 8px; }
.cast-slot-actions-menu { position: relative; }
.cast-slot-actions-menu > summary {
  display: grid;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  place-items: center;
  border: 1px solid #c6d2ce;
  border-radius: 7px;
  background: #fff;
  color: #395a52;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 1px;
  cursor: pointer;
  list-style: none;
}
.cast-slot-actions-menu > summary::-webkit-details-marker { display: none; }
.cast-slot-actions-menu > summary:hover,
.cast-slot-actions-menu[open] > summary { border-color: #718f86; background: #f3f7f5; color: #173f35; }
.cast-slot-actions-menu > div {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 7px);
  width: 244px;
  border: 1px solid #d8c2c2;
  border-radius: 9px;
  padding: 6px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(42, 35, 35, .18);
}
.cast-slot-actions-menu > div > button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  color: #a23434;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cast-slot-actions-menu > div > button:hover { background: #fff1f1; }
.cast-slot-actions-menu > div > button .cast-interface-icon { width: 20px; height: 20px; }
.cast-slot-actions-menu > div > button span { display: grid; gap: 2px; }
.cast-slot-actions-menu > div > button strong { font-size: 12px; }
.cast-slot-actions-menu > div > button small { color: #7e6e6e; font-size: 9px; line-height: 1.4; }

.cast-planning-week > .cast-planning-card-lane.is-date-ordered {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: stretch;
}
.cast-planning-week > [hidden],
.cast-planning-week-actions > button[hidden] { display: none !important; }
.cast-planning-week.is-past { border-color: #d8dddc; background: #f5f6f6; }
.cast-planning-week.is-past > header { background: #eef1f0; border-bottom-color: #dce1df; }
.cast-planning-week.is-past.is-collapsed > header { border-bottom: 0; }
.cast-planning-week.is-past > .cast-planning-card-lane,
.cast-planning-week.is-past > .cast-planning-date-strip { background: #f4f5f5; }
.cast-planning-week.is-past .cast-planning-ordered-item > article { filter: saturate(.45); }
.cast-planning-week.is-past .cast-planning-date-strip { filter: saturate(.45); }
.cast-planning-week.is-past .cast-planning-ordered-item > article:hover { filter: saturate(.75); }
.cast-planning-week.is-current-week { border-color: #46877a; box-shadow: 0 0 0 1px #46877a; }
.cast-planning-week.is-current-week > header { background: #edf7f3; }
.cast-planning-week > header .cast-week-time-badge { display: inline-flex; flex-shrink: 0; align-items: center; border-radius: 5px; padding: 5px 8px; background: #dfe5e2; color: #4e615a; font-size: 12px; font-weight: 800; }
.cast-planning-week.is-current-week > header .cast-week-time-badge { background: #216957; color: #fff; }
.cast-planning-week > header .cast-past-week-toggle { display: flex; flex: 1; min-width: 0; min-height: 40px; align-items: center; gap: 12px; border: 0; border-radius: 6px; padding: 4px 6px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.cast-planning-week > header .cast-past-week-toggle:hover { background: #e3e9e6; }
.cast-planning-week > header .cast-past-week-toggle:focus-visible { outline: 2px solid #377564; outline-offset: 2px; }
.cast-planning-week > header .cast-past-week-toggle > strong { color: #42584e; font-size: 15px; }
.cast-planning-week > header .cast-past-week-toggle .cast-week-counts { color: #5c6e66; font-size: 12px; }
.cast-past-week-toggle > b { margin-left: auto; white-space: nowrap; color: #435f51; font-size: 12px; }
.cast-past-weeks-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cast-past-weeks-toolbar > button { min-height: 36px; border: 1px solid #bbc9c2; border-radius: 7px; padding: 7px 12px; background: #fff; color: #345747; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.cast-past-weeks-toolbar > button:hover { background: #edf3ef; border-color: #668a76; }
@media (max-width: 680px) {
  .cast-planning-week > header .cast-past-week-toggle { flex-wrap: wrap; gap: 8px; }
  .cast-planning-week > header .cast-past-week-toggle > strong { font-size: 13px; }
  .cast-planning-week > header .cast-past-week-toggle .cast-week-counts { flex-basis: 65%; }
}
.cast-planning-ordered-item { position: relative; min-width: 0; cursor: grab; transition: opacity .16s ease, transform .16s ease; }
.cast-planning-ordered-item > .cast-planning-card,
.cast-planning-ordered-item > .cast-planning-live-card { height: 100%; box-sizing: border-box; }
.cast-planning-ordered-item.dragging { opacity: .36; transform: scale(.985); }
.cast-planning-drag-handle {
  position: absolute;
  z-index: 7;
  top: 8px;
  right: 8px;
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4dfdc;
  border-radius: 7px;
  background: rgba(255,255,255,.94);
  color: #738680;
  font-size: 16px;
  line-height: 1;
  cursor: grab;
  box-shadow: 0 2px 7px rgba(29, 55, 50, .08);
  user-select: none;
}
.cast-planning-ordered-item:hover .cast-planning-drag-handle { border-color: #799c93; color: #245d53; background: #fff; }
.cast-planning-ordered-item:active,
.cast-planning-ordered-item:active .cast-planning-drag-handle { cursor: grabbing; }
.cast-planning-ordered-item > .cast-planning-card > header,
.cast-planning-ordered-item > .cast-planning-live-card > button > header { padding-right: 34px; }
.cast-planning-card-lane.is-date-ordered.drag-over {
  outline: 2px solid #5d988a;
  outline-offset: -3px;
  background: #f1f8f5;
}
.cast-planning-ordered-item.drop-before::before,
.cast-planning-ordered-item.drop-after::before {
  position: absolute;
  z-index: 9;
  top: 7px;
  bottom: 7px;
  left: -6px;
  width: 4px;
  border-radius: 999px;
  background: #16806d;
  box-shadow: 0 0 0 3px rgba(22, 128, 109, .13);
  content: "";
}
.cast-planning-ordered-item.drop-after::before { right: -6px; left: auto; }
.cast-planning-card-lane.is-date-ordered.drag-over .cast-planning-week-empty {
  border-color: #5d988a;
  background: #edf7f3;
  color: #285f55;
}
body.is-dragging-cast-planning-card .cast-planning-card-lane.is-date-ordered { min-height: 94px; }
.cast-planning-week-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.cast-planning-week-actions > p {
  margin: 0;
  color: #61747d;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.cast-planning-week-actions > button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid #164e50;
  border-radius: 8px;
  padding: 0 14px;
  background: #164e50;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(22, 78, 80, .14);
}
.cast-planning-week-actions > button:hover { border-color: #0d3d3f; background: #0d3d3f; transform: translateY(-1px); }
.cast-planning-week-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 62px;
  grid-template-columns: 28px max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px dashed #cbd8d4;
  border-radius: 10px;
  padding: 10px 14px;
  background: #f8fbfa;
  color: #5f746e;
}
.cast-planning-week-empty > span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #e8f1ee;
  color: #35675e;
}
.cast-planning-week-empty .cast-interface-icon { width: 16px; height: 16px; }
.cast-planning-week-empty > strong { color: #334e49; font-size: 12px; }
.cast-planning-week-empty > small { color: #7a8d87; font-size: 10px; }

.modal.cast-week-create-modal {
  width: min(720px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid #d8e1de;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 72px rgba(24, 44, 42, .24);
}
.cast-week-create-head {
  align-items: flex-start;
  padding: 24px 26px 20px;
  border-bottom: 1px solid #e5ebe9;
  background: #fbfcfc;
}
.cast-week-create-head > div { display: grid; gap: 5px; }
.cast-week-create-head > div > span { color: #327166; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.cast-week-create-head h2 { margin: 0; color: #172f31; font-size: 24px; letter-spacing: -.035em; }
.cast-week-create-head p { margin: 0; color: #71817d; font-size: 12px; line-height: 1.55; }
.cast-week-create-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 26px 22px;
}
.cast-week-create-option {
  display: grid;
  min-height: 154px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 20px 18px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cast-week-create-option:hover { transform: translateY(-2px); }
.cast-week-create-option > .cast-week-create-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.cast-week-create-option .cast-interface-icon { width: 22px; height: 22px; }
.cast-week-create-option > span:nth-child(2) { display: grid; gap: 5px; min-width: 0; }
.cast-week-create-option small { font-size: 9px; font-style: normal; font-weight: 950; letter-spacing: .12em; }
.cast-week-create-option strong { font-size: 18px; line-height: 1.25; letter-spacing: -.025em; }
.cast-week-create-option em { font-size: 11px; font-style: normal; line-height: 1.5; }
.cast-week-create-option > b { padding-top: 25px; font-size: 18px; }
.cast-week-create-option.is-shoot { border-color: #24565a; background: #173f43; color: #fff; box-shadow: 0 9px 22px rgba(23, 63, 67, .16); }
.cast-week-create-option.is-shoot .cast-week-create-icon { background: rgba(255,255,255,.11); color: #a9e0d5; }
.cast-week-create-option.is-shoot small { color: #99cfc4; }
.cast-week-create-option.is-shoot em { color: #c7d9d5; }
.cast-week-create-option.is-shoot:hover { border-color: #0e3539; background: #0e3539; box-shadow: 0 12px 26px rgba(23, 63, 67, .22); }
.cast-week-create-option.is-live { border-color: #d2a2a7; background: #fff7f7; color: #8f2932; box-shadow: 0 9px 22px rgba(159, 46, 56, .08); }
.cast-week-create-option.is-live .cast-week-create-icon { background: #f8dfe1; color: #bd303c; }
.cast-week-create-option.is-live small { color: #bd303c; }
.cast-week-create-option.is-live em { color: #836368; }
.cast-week-create-option.is-live:hover { border-color: #bc3a45; background: #fff1f2; box-shadow: 0 12px 26px rgba(159, 46, 56, .14); }
.cast-week-create-emergency {
  grid-column: 1 / -1;
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 12px;
  border: 1px solid #e5c6c8;
  border-radius: 10px;
  padding: 0 15px;
  background: #fff;
  color: #91323a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cast-week-create-emergency > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cast-week-create-emergency .cast-interface-icon { width: 17px; height: 17px; color: #c33c46; }
.cast-week-create-emergency strong { font-size: 12px; }
.cast-week-create-emergency em { flex: 1; color: #887175; font-size: 10px; font-style: normal; }
.cast-week-create-emergency > b { font-size: 10px; }
.cast-week-create-emergency:hover { border-color: #c84a54; background: #fff6f6; }
.cast-week-create-foot { min-height: 64px; border-top: 1px solid #e5ebe9; background: #fbfcfc; }
.cast-week-create-foot > span { color: #7a8985; font-size: 10px; }
.cast-live-footer-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dca8a8;
  border-radius: 7px;
  padding: 0 11px;
  background: #fff7f7;
  color: #a12f2f;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.cast-live-footer-delete:hover { border-color: #bd5b5b; background: #ffeded; color: #842323; }
.cast-live-footer-delete .cast-interface-icon { width: 16px; height: 16px; }

@media (max-width: 1180px) {
  .cast-planning-week > .cast-planning-card-lane.is-date-ordered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cast-planning-week > .cast-planning-card-lane.is-date-ordered { grid-template-columns: 1fr; }
  .cast-planning-week > header { align-items: flex-start; }
  .cast-planning-week-actions { align-items: flex-end !important; flex-direction: column-reverse; gap: 6px !important; }
  .cast-planning-week-actions > button { min-height: 34px; padding: 0 11px; }
  .cast-planning-week-empty { grid-template-columns: 28px minmax(0, 1fr); }
  .cast-planning-week-empty > small { grid-column: 2; }
  .cast-planning-ordered-item.drop-before::before,
  .cast-planning-ordered-item.drop-after::before { right: 8px; left: 8px; width: auto; height: 4px; }
  .cast-planning-ordered-item.drop-before::before { top: -6px; bottom: auto; }
  .cast-planning-ordered-item.drop-after::before { top: auto; bottom: -6px; }
  .cast-week-create-body { grid-template-columns: 1fr; padding: 16px; }
  .cast-week-create-option { min-height: 126px; }
  .cast-week-create-emergency { grid-column: auto; flex-wrap: wrap; padding: 12px; }
  .cast-week-create-emergency em { flex-basis: calc(100% - 70px); margin-left: 25px; }
  .cast-week-create-head { padding: 20px 18px 17px; }
  .cast-week-create-foot > span { display: none; }
  .cast-live-detail-head .cast-live-status-pill { display: none; }
}

/* Competitor video detail · readable editorial workspace */
.modal.competitor-video-detail-modal {
  display: flex;
  width: min(1480px, calc(100vw - 32px));
  height: min(940px, calc(100vh - 28px));
  max-height: calc(100vh - 28px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(34, 52, 82, .11);
  border-radius: 24px;
  background: #f5f7fb;
  box-shadow: 0 32px 90px rgba(19, 31, 54, .25);
}
.modal.competitor-video-detail-modal .competitor-video-detail-modal-head {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  min-height: 76px;
  padding: 18px 26px;
  border-bottom: 1px solid #e3e8f0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
}
.modal.competitor-video-detail-modal .competitor-video-detail-modal-head h2 {
  color: #152238;
  font-size: 22px;
  letter-spacing: -.025em;
}
.modal.competitor-video-detail-modal .competitor-video-detail-modal-head p {
  max-width: min(1000px, 72vw);
  margin-top: 5px;
  color: #6b7890;
  font-size: 13px;
  font-weight: 650;
}
.modal.competitor-video-detail-modal .competitor-video-detail-modal-head .icon-button {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #44536b;
  background: #f1f4f8;
  font-size: 23px;
}
.modal.competitor-video-detail-modal .competitor-video-detail-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px 28px 34px;
  overflow: auto;
  background: linear-gradient(180deg,#f7f9fc 0,#f3f6fa 100%);
}
.modal.competitor-video-detail-modal .competitor-detail-v2 {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .34fr);
  gap: 22px;
}
.modal.competitor-video-detail-modal .competitor-detail-hero-card,
.modal.competitor-video-detail-modal .competitor-transcript-card,
.modal.competitor-video-detail-modal .competitor-opening-report,
.modal.competitor-video-detail-modal .competitor-opening-analysis,
.modal.competitor-video-detail-modal .competitor-video-memo-card,
.modal.competitor-video-detail-modal .competitor-detail-recent-card {
  border-color: #dfe5ee;
  box-shadow: 0 10px 30px rgba(28, 43, 70, .055);
}
.modal.competitor-video-detail-modal .competitor-detail-hero-copy h2 { font-size: clamp(22px, 1.7vw, 27px); }
.modal.competitor-video-detail-modal .competitor-detail-channel-line,
.modal.competitor-video-detail-modal .competitor-detail-hero-copy > p { font-size: 12px; }
.modal.competitor-video-detail-modal .competitor-detail-hero-metrics small { font-size: 10px; }
.modal.competitor-video-detail-modal .competitor-detail-hero-metrics strong { font-size: 18px; }
.modal.competitor-video-detail-modal .competitor-transcript-card { padding: 26px; }
.modal.competitor-video-detail-modal .competitor-transcript-head h2 { color: #17243a; font-size: 22px; letter-spacing: -.02em; }
.modal.competitor-video-detail-modal .competitor-transcript-head p { color: #66758c; font-size: 13px; }
.modal.competitor-video-detail-modal .competitor-transcript-facts span { padding: 7px 11px; font-size: 11px; }
.competitor-transcript-workspace { display: grid; gap: 14px; }
.competitor-question-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e0e6ef;
  border-radius: 17px;
  background: #f8fafc;
}
.competitor-question-panel .competitor-transcript-section-head { margin-bottom: 14px; }
.competitor-question-panel .competitor-transcript-section-head > span { color: #168d81; font-size: 9px; }
.competitor-question-panel .competitor-transcript-section-head h3 { margin-top: 5px; color: #17243a; font-size: 18px; letter-spacing: -.015em; }
.competitor-question-panel .competitor-transcript-section-head p { margin: 5px 0 0; color: #7a879a; font-size: 12px; }
.competitor-question-panel .competitor-question-list {
  max-height: min(620px, 61vh);
  padding-right: 7px;
  overflow-y: auto;
  scrollbar-color: #bac7d7 transparent;
  scrollbar-width: thin;
}
.competitor-transcript-card .competitor-question-item {
  grid-template-columns: 60px minmax(0,1fr) auto;
  gap: 15px;
  padding: 17px 18px;
  border-color: #e0e6ef;
  border-radius: 14px;
  background: #fff;
}
.competitor-transcript-card .competitor-question-item:hover {
  border-color: #71bcb2;
  background: #fbfffe;
  box-shadow: 0 7px 18px rgba(28, 115, 103, .07);
}
.competitor-transcript-card .competitor-question-item time { padding-top: 2px; color: #087f73; font-size: 14px; }
.competitor-transcript-card .competitor-question-item small { color: #718097; font-size: 11px; }
.competitor-transcript-card .competitor-question-item strong { color: #17243a; font-size: 15px; line-height: 1.55; }
.competitor-question-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 9px;
}
.competitor-transcript-card .competitor-question-item .competitor-question-flow p {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  color: #4f5f75;
  background: #f4f8f8;
  font-size: 12px;
  line-height: 1.6;
}
.competitor-transcript-card .competitor-question-item .competitor-question-flow p:last-child { background: #f5f7fc; }
.competitor-transcript-card .competitor-question-item .competitor-question-flow p b { color: #087f73; font-size: 11px; }
.competitor-transcript-card .competitor-question-item .competitor-question-flow p:last-child b { color: #375fc3; }
.competitor-transcript-card .competitor-question-item .competitor-question-flow p span { display: block; color: inherit; }
.competitor-transcript-card .competitor-question-item em { align-self: center; color: #087f73; font-size: 11px; }
.competitor-transcript-drawer {
  overflow: hidden;
  border: 1px solid #dde4ee;
  border-radius: 15px;
  background: #fff;
}
.competitor-transcript-drawer > summary {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  color: #233149;
  background: #fff;
  cursor: pointer;
  list-style: none;
}
.competitor-transcript-drawer > summary::-webkit-details-marker { display: none; }
.competitor-transcript-drawer > summary span { display: grid; gap: 4px; }
.competitor-transcript-drawer > summary b { font-size: 15px; }
.competitor-transcript-drawer > summary small { color: #7a8799; font-size: 11px; font-weight: 600; }
.competitor-transcript-drawer > summary em {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 9px;
  color: #365b93;
  background: #edf3fb;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}
.competitor-transcript-drawer[open] > summary { border-bottom: 1px solid #e5eaf1; }
.competitor-transcript-drawer[open] > summary em { font-size: 0; }
.competitor-transcript-drawer[open] > summary em::after { content: "접기"; font-size: 11px; }
.competitor-transcript-drawer .competitor-transcript-full-text {
  max-height: min(440px, 48vh);
  margin: 14px;
  padding: 20px 22px;
  border: 0;
  background: #f8fafc;
  color: #35445a;
  font-size: 14px;
  line-height: 1.9;
}
.modal.competitor-video-detail-modal .competitor-opening-analysis { min-height: 138px; padding: 24px 26px; }
.modal.competitor-video-detail-modal .competitor-opening-empty-copy h2 { font-size: 21px; }
.modal.competitor-video-detail-modal .competitor-opening-empty-copy p { max-width: 760px; font-size: 13px; line-height: 1.65; }
.modal.competitor-video-detail-modal .competitor-opening-analysis .primary-button { min-width: 132px; min-height: 48px; font-size: 14px; }

@media (max-width: 1120px) {
  .modal.competitor-video-detail-modal .competitor-detail-v2 { grid-template-columns: 1fr; }
  .modal.competitor-video-detail-modal .competitor-video-detail-right { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modal.competitor-video-detail-modal .competitor-detail-recent-card { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .modal.competitor-video-detail-modal { width: calc(100vw - 12px); height: calc(100vh - 12px); max-height: calc(100vh - 12px); border-radius: 17px; }
  .modal.competitor-video-detail-modal .competitor-video-detail-modal-head { min-height: 66px; padding: 14px 16px; }
  .modal.competitor-video-detail-modal .competitor-video-detail-modal-head h2 { font-size: 19px; }
  .modal.competitor-video-detail-modal .competitor-video-detail-modal-head p { max-width: 76vw; font-size: 11px; }
  .modal.competitor-video-detail-modal .competitor-video-detail-modal-body { padding: 13px; }
  .modal.competitor-video-detail-modal .competitor-transcript-card { padding: 17px; }
  .modal.competitor-video-detail-modal .competitor-video-detail-right { grid-template-columns: 1fr; }
  .competitor-transcript-card .competitor-question-item { grid-template-columns: 50px minmax(0,1fr); padding: 14px; }
  .competitor-transcript-card .competitor-question-item em { display: none; }
  .competitor-question-flow { grid-template-columns: 1fr; }
  .competitor-question-panel .competitor-question-list { max-height: 62vh; }
}

/* Detail typography pass: readable without breaking the card grid. */
.modal.competitor-video-detail-modal .competitor-detail-hero-label { padding: 17px 21px; }
.modal.competitor-video-detail-modal .competitor-detail-hero-label > span { font-size: 11px; }
.modal.competitor-video-detail-modal .competitor-detail-hero-label b { padding: 5px 8px; font-size: 10px; }
.modal.competitor-video-detail-modal .competitor-video-detail-media > span,
.modal.competitor-video-detail-modal .competitor-video-detail-media.is-playing > button { font-size: 11px; }
.modal.competitor-video-detail-modal .competitor-detail-channel-line { font-size: 13px; line-height: 1.5; }
.modal.competitor-video-detail-modal .competitor-detail-hero-copy > p { font-size: 13px; line-height: 1.55; }
.modal.competitor-video-detail-modal .competitor-detail-hero-metrics > div { min-width: 0; min-height: 76px; align-content: center; padding: 11px 10px; }
.modal.competitor-video-detail-modal .competitor-detail-hero-metrics small { font-size: 11px; line-height: 1.35; }
.modal.competitor-video-detail-modal .competitor-detail-hero-metrics strong { min-width: 0; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.2; letter-spacing: -.025em; white-space: nowrap; }
.modal.competitor-video-detail-modal .competitor-detail-hero-metrics strong em { display: block; margin: 3px 0 0; font-size: 10px; letter-spacing: 0; }

.modal.competitor-video-detail-modal .competitor-detail-summary-card { grid-template-columns: minmax(205px,.72fr) minmax(0,1.6fr); gap: 22px; padding: 23px; }
.modal.competitor-video-detail-modal .competitor-detail-summary-card > div:first-child > span,
.modal.competitor-video-detail-modal .competitor-detail-trust-card > span,
.modal.competitor-video-detail-modal .competitor-detail-video-analysis-placeholder span { font-size: 10px; }
.modal.competitor-video-detail-modal .competitor-detail-summary-card h2,
.modal.competitor-video-detail-modal .competitor-detail-trust-card h2,
.modal.competitor-video-detail-modal .competitor-detail-video-analysis-placeholder h2 { margin-top: 7px; font-size: 19px; line-height: 1.35; }
.modal.competitor-video-detail-modal .competitor-detail-summary-card p,
.modal.competitor-video-detail-modal .competitor-detail-video-analysis-placeholder p { font-size: 13px; line-height: 1.65; }
.modal.competitor-video-detail-modal .competitor-detail-status-grid { gap: 9px; }
.modal.competitor-video-detail-modal .competitor-detail-status-grid > div { min-width: 0; min-height: 108px; gap: 8px; padding: 12px 9px; }
.modal.competitor-video-detail-modal .competitor-detail-status-grid > div > b { width: 31px; height: 31px; font-size: 12px; }
.modal.competitor-video-detail-modal .competitor-detail-status-grid span { min-width: 0; gap: 4px; }
.modal.competitor-video-detail-modal .competitor-detail-status-grid strong { font-size: 13px; line-height: 1.4; }
.modal.competitor-video-detail-modal .competitor-detail-status-grid small { font-size: 11px; line-height: 1.45; }

.modal.competitor-video-detail-modal .competitor-detail-trust-card { padding: 23px; }
.modal.competitor-video-detail-modal .competitor-detail-trust-card > div { grid-template-columns: 46px minmax(0,1fr); gap: 11px; padding: 14px 0; }
.modal.competitor-video-detail-modal .competitor-detail-trust-card > div > b { width: 42px; height: 29px; font-size: 10px; }
.modal.competitor-video-detail-modal .competitor-detail-trust-card p { min-width: 0; gap: 4px; }
.modal.competitor-video-detail-modal .competitor-detail-trust-card strong { font-size: 13px; line-height: 1.4; }
.modal.competitor-video-detail-modal .competitor-detail-trust-card small { font-size: 11px; line-height: 1.45; }

.modal.competitor-video-detail-modal .competitor-video-memo-card,
.modal.competitor-video-detail-modal .competitor-detail-recent-card { padding: 23px; }
.modal.competitor-video-detail-modal .competitor-video-memo-card h2,
.modal.competitor-video-detail-modal .competitor-detail-card-head h2 { font-size: 20px; }
.modal.competitor-video-detail-modal .competitor-detail-card-head button,
.modal.competitor-video-detail-modal .competitor-video-memo-head button { font-size: 13px; }
.modal.competitor-video-detail-modal .competitor-video-memo-card textarea { font-size: 15px; line-height: 1.7; }
.modal.competitor-video-detail-modal .competitor-video-memo-count { font-size: 12px; }
.modal.competitor-video-detail-modal .competitor-detail-recent-item { grid-template-columns: 78px minmax(0,1fr) 58px; gap: 11px; padding: 14px 0; }
.modal.competitor-video-detail-modal .competitor-detail-recent-item img,
.modal.competitor-video-detail-modal .competitor-detail-recent-thumb { width: 78px; }
.modal.competitor-video-detail-modal .competitor-detail-recent-copy strong { font-size: 13px; line-height: 1.45; }
.modal.competitor-video-detail-modal .competitor-detail-recent-copy em { font-size: 11px; }
.modal.competitor-video-detail-modal .competitor-detail-recent-ratio { font-size: 17px; }

.modal.competitor-video-detail-modal .competitor-transcript-head span { font-size: 11px; }
.modal.competitor-video-detail-modal .competitor-transcript-actions .secondary-button { min-height: 43px; font-size: 13px; }
.modal.competitor-video-detail-modal .competitor-opening-empty-copy span,
.modal.competitor-video-detail-modal .competitor-opening-report header span { font-size: 11px; }
.modal.competitor-video-detail-modal .competitor-opening-empty-copy h2,
.modal.competitor-video-detail-modal .competitor-opening-report h2 { font-size: 24px; }
.modal.competitor-video-detail-modal .competitor-opening-empty-copy p { font-size: 14px; }
.modal.competitor-video-detail-modal .competitor-opening-lead small,
.modal.competitor-video-detail-modal .competitor-opening-key-grid small,
.modal.competitor-video-detail-modal .competitor-opening-bottom-grid small,
.modal.competitor-video-detail-modal .competitor-opening-section-title small { font-size: 11px; }
.modal.competitor-video-detail-modal .competitor-opening-lead strong { font-size: 19px; }
.modal.competitor-video-detail-modal .competitor-opening-key-grid p { font-size: 14px; }
.modal.competitor-video-detail-modal .competitor-opening-section-title h3 { font-size: 19px; }
.modal.competitor-video-detail-modal .competitor-opening-timeline time { font-size: 13px; }
.modal.competitor-video-detail-modal .competitor-opening-timeline strong { font-size: 15px; }
.modal.competitor-video-detail-modal .competitor-opening-timeline p { font-size: 14px; }
.modal.competitor-video-detail-modal .competitor-opening-timeline article small,
.modal.competitor-video-detail-modal .competitor-opening-timeline em { font-size: 12px; }
.modal.competitor-video-detail-modal .competitor-opening-bottom-grid ul { font-size: 13px; }
.modal.competitor-video-detail-modal .competitor-opening-bottom-grid strong { font-size: 15px; }
.modal.competitor-video-detail-modal .competitor-opening-note { font-size: 12px; }

@media (max-width: 900px) {
  .modal.competitor-video-detail-modal .competitor-detail-summary-card { grid-template-columns: 1fr; }
  .modal.competitor-video-detail-modal .competitor-detail-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .modal.competitor-video-detail-modal .competitor-detail-hero-metrics,
  .modal.competitor-video-detail-modal .competitor-detail-hero-metrics.competitor-detail-hero-metrics-five { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modal.competitor-video-detail-modal .competitor-detail-hero-metrics > div:last-child { grid-column: 1 / -1; }
  .modal.competitor-video-detail-modal .competitor-detail-status-grid { grid-template-columns: 1fr 1fr; }
  .modal.competitor-video-detail-modal .competitor-opening-key-grid,
  .modal.competitor-video-detail-modal .competitor-opening-bottom-grid { grid-template-columns: 1fr; }
}

/* YouTube research period summary: one-page writer brief. */
.competitor-period-summary {
  overflow: hidden;
  border: 1px solid #dbe5eb;
  border-radius: 24px;
  padding: 30px;
  background: linear-gradient(145deg,#f7fbfa 0%,#fff 48%,#f7f9fd 100%);
  box-shadow: 0 18px 46px rgba(30,59,82,.07);
}
.competitor-period-summary-kicker { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.competitor-period-summary-kicker span { color: #11877b; font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.competitor-period-summary-kicker em { border: 1px solid #d7e5e5; border-radius: 999px; padding: 7px 11px; color: #577079; background: rgba(255,255,255,.8); font-size: 11px; font-style: normal; font-weight: 800; }
.competitor-period-summary > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #e0e8ec; }
.competitor-period-summary > header small { color: #778696; font-size: 12px; font-weight: 800; }
.competitor-period-summary > header h2 { margin: 5px 0 0; color: #14263c; font-size: 28px; line-height: 1.25; letter-spacing: -.035em; }
.competitor-period-summary > header > span { color: #51657a; font-size: 13px; font-weight: 850; }
.competitor-period-summary-overview { max-width: 980px; margin: 22px 0 26px; color: #344b60; font-size: 17px; line-height: 1.8; letter-spacing: -.01em; }
.competitor-period-summary-rule { display: grid; gap: 4px; margin: -8px 0 20px; padding: 14px 16px; border: 1px solid #d6e8e5; border-radius: 13px; background: #edf8f6; }
.competitor-period-summary-rule b { color: #176e67; font-size: 14px; line-height: 1.5; }
.competitor-period-summary-rule span { color: #667d81; font-size: 12px; line-height: 1.55; }
.competitor-period-summary-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(380px,.9fr); gap: 16px; }
.competitor-period-summary-body > section { min-width: 0; padding: 22px; border: 1px solid #dfe7ec; border-radius: 18px; background: rgba(255,255,255,.86); }
.competitor-period-summary-section-head { display: grid; gap: 4px; margin-bottom: 15px; }
.competitor-period-summary-section-head span { color: #14887d; font-size: 11px; font-weight: 900; }
.competitor-period-summary-section-head strong { color: #1e3147; font-size: 18px; letter-spacing: -.02em; }
.competitor-period-summary-section-head small { color: #7b8a99; font-size: 11px; line-height: 1.5; }
.competitor-period-topic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 10px; }
.competitor-period-topic-card { overflow: hidden; min-width: 0; border: 1px solid #e0e8ec; border-radius: 14px; background: #fff; }
.competitor-period-topic-card > summary { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: start; gap: 12px; min-height: 136px; padding: 15px; list-style: none; cursor: pointer; }
.competitor-period-topic-card > summary::-webkit-details-marker { display: none; }
.competitor-period-topic-card > summary > b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #0f7f75; background: #e2f5f1; font-size: 11px; }
.competitor-period-topic-card > summary > div { min-width: 0; }
.competitor-period-topic-card > summary > em { display: flex; grid-column: 2; align-items: center; justify-content: space-between; margin-top: 4px; color: #137d73; font-size: 11px; font-style: normal; font-weight: 900; }
.competitor-period-topic-card > summary > em i { font-size: 14px; font-style: normal; transition: transform .16s ease; }
.competitor-period-topic-card[open] > summary { min-height: 0; border-bottom: 1px solid #e7edef; background: #f8fcfb; }
.competitor-period-topic-card[open] > summary > em i { transform: rotate(180deg); }
.competitor-period-topic-summary h3 { margin: 0 0 5px; color: #1c3046; font-size: 15px; }
.competitor-period-topic-summary p { display: -webkit-box; margin: 0; overflow: hidden; color: #617287; font-size: 12px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.competitor-period-topic-videos { display: grid; gap: 7px; margin: 0; padding: 10px; }
.competitor-period-topic-videos button { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 7px; border: 1px solid #e0e8ec; border-radius: 11px; color: inherit; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.competitor-period-topic-videos button:hover { border-color: #79bdb5; box-shadow: 0 7px 18px rgba(26,111,101,.08); transform: translateY(-1px); }
.competitor-period-topic-videos img,.competitor-period-topic-videos button > i { width: 74px; height: 48px; border-radius: 8px; object-fit: cover; }
.competitor-period-topic-videos button > i { display: grid; place-items: center; color: #167b72; background: #e4f4f1; font-style: normal; font-weight: 900; }
.competitor-period-topic-videos button > span { display: grid; min-width: 0; gap: 3px; }
.competitor-period-topic-videos button small { overflow: hidden; color: #188078; font-size: 9px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.competitor-period-topic-videos button strong { overflow: hidden; color: #273b50; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.competitor-period-topic-videos button em { padding-right: 5px; color: #177c73; font-size: 10px; font-style: normal; font-weight: 900; white-space: nowrap; }
.competitor-period-recommendations > div:last-child { display: grid; gap: 11px; }
.competitor-period-recommendations article { display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 14px; overflow: hidden; padding: 12px; border: 1px solid #e0e7ed; border-radius: 14px; background: #fff; }
.competitor-period-recommendations article > img,.competitor-period-recommendations article > i { width: 116px; height: 88px; border-radius: 10px; object-fit: cover; }
.competitor-period-recommendations article > i { display: grid; place-items: center; color: #177f74; background: #e5f4f1; font-size: 22px; font-style: normal; font-weight: 900; }
.competitor-period-recommendations article > div { min-width: 0; }
.competitor-period-recommendations small { color: #19877c; font-size: 10px; font-weight: 900; }
.competitor-period-recommendations h3 { display: -webkit-box; margin: 4px 0; overflow: hidden; color: #1d3045; font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.competitor-period-recommendations p { margin: 0 0 9px; color: #68798c; font-size: 12px; line-height: 1.55; }
.competitor-period-recommendations button { min-height: 36px; border: 0; border-radius: 9px; padding: 0 12px; color: #fff; background: #147f75; font-size: 12px; font-weight: 900; cursor: pointer; }
.competitor-period-recommendations button b { margin-left: 4px; }
.competitor-period-summary-empty { margin: 0; padding: 24px; border-radius: 12px; color: #7a8997; background: #f4f7f8; font-size: 13px; line-height: 1.6; text-align: center; }
.competitor-period-summary > footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.competitor-period-summary > footer span { border-radius: 999px; padding: 7px 10px; color: #647788; background: #edf3f4; font-size: 10px; font-weight: 800; }
.competitor-period-summary-loading { display: flex; align-items: center; gap: 18px; min-height: 120px; padding: 22px; border-radius: 17px; background: rgba(255,255,255,.78); }
.competitor-period-summary-loading i { width: 42px; height: 42px; flex: 0 0 42px; border: 4px solid #d8ece8; border-top-color: #16897d; border-radius: 50%; animation: competitor-period-spin .9s linear infinite; }
.competitor-period-summary-loading > b { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; color: #517079; background: #e8f1f1; font-size: 17px; }
.competitor-period-summary-loading h2 { margin: 0 0 7px; color: #1d3045; font-size: 20px; }
.competitor-period-summary-loading p { margin: 0; color: #6b7c8e; font-size: 13px; }
@keyframes competitor-period-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .competitor-period-summary-body { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .competitor-period-summary { padding: 20px; border-radius: 19px; }
  .competitor-period-summary-kicker,.competitor-period-summary > header { align-items: flex-start; flex-direction: column; }
  .competitor-period-summary > header h2 { font-size: 23px; }
  .competitor-period-summary-overview { font-size: 15px; }
  .competitor-period-summary-body > section { padding: 17px; }
  .competitor-period-recommendations article { grid-template-columns: 92px minmax(0,1fr); }
  .competitor-period-recommendations article > img,.competitor-period-recommendations article > i { width: 92px; height: 76px; }
  .competitor-period-topic-videos button { grid-template-columns: 68px minmax(0,1fr); }
  .competitor-period-topic-videos img,.competitor-period-topic-videos button > i { width: 68px; }
  .competitor-period-topic-videos button em { display: none; }
  .competitor-period-topic-grid { grid-template-columns: 1fr; }
  .competitor-period-topic-card > summary { min-height: 0; }
}

.competitor-topic-pulse { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.86fr); gap: 20px 28px; margin: 22px 0; padding: 28px; border: 1px solid #cfe3df; border-radius: 24px; background: linear-gradient(135deg,#f5fbfa 0%,#edf6f7 58%,#f7f9fc 100%); box-shadow: 0 18px 48px rgba(32,68,84,.09); }
.competitor-topic-pulse-copy > span { color: #168477; font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.competitor-topic-pulse-copy h2 { margin: 8px 0 8px; color: #17344a; font-size: 25px; letter-spacing: -.03em; }
.competitor-topic-pulse-copy p { max-width: 680px; margin: 0; color: #607588; font-size: 13px; line-height: 1.7; }
.competitor-topic-pulse-form { display: grid; grid-template-columns: minmax(0,1fr) 138px; gap: 8px; align-content: start; }
.competitor-topic-pulse-form label { display: grid; gap: 6px; }
.competitor-topic-pulse-form label > span { color: #526a7e; font-size: 10px; font-weight: 850; }
.competitor-topic-pulse-form input,.competitor-topic-pulse-form select { width: 100%; height: 47px; border: 1px solid #c9dbde; border-radius: 12px; padding: 0 14px; color: #203a4d; background: rgba(255,255,255,.94); font: inherit; font-size: 12px; outline: 0; }
.competitor-topic-pulse-form input:focus,.competitor-topic-pulse-form select:focus { border-color: #159084; box-shadow: 0 0 0 3px rgba(21,144,132,.12); }
.competitor-topic-pulse-custom-period { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.competitor-topic-pulse-custom-period[hidden] { display: none; }
.competitor-topic-pulse-form > button { grid-column: 1/-1; height: 47px; border: 0; border-radius: 12px; padding: 0 17px; color: #fff; background: #147f75; font-size: 12px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.competitor-topic-pulse-form > small { grid-column: 1/-1; color: #7b8d9b; font-size: 10px; }
.competitor-topic-pulse-sources { grid-column: 1/-1; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-top: 4px; }
.competitor-topic-pulse-sources span { border: 1px solid #c6dfda; border-radius: 999px; padding: 6px 9px; color: #167d73; background: #fff; font-size: 9px; font-weight: 900; }
.competitor-topic-pulse-sources i { margin-left: auto; color: #78909c; font-size: 10px; font-style: normal; }
.competitor-topic-pulse-history { grid-column: 1/-1; padding-top: 14px; border-top: 1px solid #d9e7e5; }
.competitor-topic-pulse-history > strong { display: block; margin-bottom: 8px; color: #466275; font-size: 11px; }
.competitor-topic-pulse-history > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.competitor-topic-pulse-history article { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; overflow: hidden; min-width: 0; border: 1px solid #d8e5e6; border-radius: 11px; background: rgba(255,255,255,.85); }
.competitor-topic-pulse-history-open { display: grid; gap: 4px; min-width: 0; border: 0; padding: 10px 12px; text-align: left; background: transparent; cursor: pointer; }
.competitor-topic-pulse-history-open:hover { background: #f2f9f8; }
.competitor-topic-pulse-history-open span { overflow: hidden; color: #29455a; font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.competitor-topic-pulse-history-open small { color: #7d909e; font-size: 9px; }
.competitor-topic-pulse-history-delete { align-self: stretch; border: 0; border-left: 1px solid #e3eaec; padding: 0 11px; color: #a1585b; background: #fffafa; font-size: 9px; font-weight: 850; cursor: pointer; }
.competitor-topic-pulse-history-delete:hover { color: #8e3237; background: #fff0f0; }
.competitor-topic-pulse-history-delete:disabled { color: #aab4ba; background: #f6f8f9; cursor: not-allowed; }
.competitor-server-report-card.is-topic-pulse { border-color: #c9e2dc; background: linear-gradient(150deg,#fff,#f1faf8); }
.competitor-topic-pulse-shared-summary { margin: 16px 0; border-radius: 12px; padding: 14px 16px; color: #385469; background: #eef7f6; font-size: 13px; line-height: 1.65; }
.competitor-topic-research-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 13px 0; }
.competitor-topic-research-steps article { display: flex; align-items: center; gap: 7px; min-width: 0; border: 1px solid #dce5e8; border-radius: 10px; padding: 8px; color: #7b8b99; background: #f7f9fa; font-size: 10px; font-weight: 800; }
.competitor-topic-research-steps article i { display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%; color: #7f909d; background: #e7edef; font-size: 9px; font-style: normal; }
.competitor-topic-research-steps article.active { border-color: #72bdb3; color: #176f68; background: #eef9f7; }
.competitor-topic-research-steps article.active i { color: #fff; background: #16877c; }
.competitor-topic-research-steps article.done { color: #38736d; background: #f2f9f8; }
.competitor-topic-research-steps article.done i { color: #fff; background: #4fa99d; }
.competitor-topic-live-counts { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 13px; }
.competitor-topic-live-counts span { padding: 9px; border-radius: 9px; color: #738594; background: #f3f6f7; font-size: 9px; }
.competitor-topic-live-counts b { display: block; margin-top: 3px; color: #27465a; font-size: 15px; }
.competitor-topic-report-view { display: grid; gap: 18px; color: #263f53; }
.competitor-topic-report-hero { overflow: hidden; border-radius: 22px; padding: 28px; color: #f7fbff; background: linear-gradient(135deg,#143547,#16776f); box-shadow: 0 20px 44px rgba(20,53,71,.18); }
.competitor-topic-report-hero > span { color: #83e6d8; font-size: 9px; font-weight: 950; letter-spacing: .15em; }
.competitor-topic-report-hero h2 { margin: 9px 0 5px; font-size: 26px; letter-spacing: -.04em; }
.competitor-topic-report-hero > strong { display: block; color: #d7fff8; font-size: 14px; }
.competitor-topic-report-hero > div { display: grid; gap: 6px; margin-top: 17px; }
.competitor-topic-report-hero p { margin: 0; color: #d8e6ec; font-size: 13px; line-height: 1.7; }
.competitor-topic-report-hero footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #ffffff24; color: #bcd1da; font-size: 10px; }
.competitor-topic-coverage-strip { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; }
.competitor-topic-coverage-strip article { padding: 13px; border: 1px solid #dfe7eb; border-radius: 12px; background: #fff; }
.competitor-topic-coverage-strip span { display: block; color: #7a8a97; font-size: 9px; }
.competitor-topic-coverage-strip strong { display: block; margin-top: 4px; color: #1f4559; font-size: 19px; }
.competitor-topic-report-section { border: 1px solid #dfe7eb; border-radius: 18px; padding: 21px; background: #fff; }
.competitor-topic-report-section > header { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 15px; }
.competitor-topic-report-section > header span { color: #198479; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.competitor-topic-report-section > header h3 { margin: 4px 0 0; color: #203e52; font-size: 19px; }
.competitor-topic-report-section > header > strong { color: #198479; font-size: 12px; }
.competitor-topic-reaction-grid { display: grid; gap: 10px; }
.competitor-topic-reaction-grid > article { border: 1px solid #dfe8eb; border-radius: 14px; padding: 16px; background: #fbfcfd; }
.competitor-topic-reaction-grid article > header { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.competitor-topic-reaction-grid header > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #177f75; background: #e4f4f1; font-size: 10px; }
.competitor-topic-reaction-grid header div strong,.competitor-topic-reaction-grid header div span { display: block; }
.competitor-topic-reaction-grid header div strong { color: #263f53; font-size: 14px; }
.competitor-topic-reaction-grid header div span { margin-top: 3px; color: #7b8d9b; font-size: 9px; }
.competitor-topic-reaction-grid header em { color: #168278; font-size: 20px; font-style: normal; font-weight: 950; }
.competitor-topic-reaction-grid dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 14px 0 0; }
.competitor-topic-reaction-grid dl div { padding: 11px; border-radius: 10px; background: #f1f5f6; }
.competitor-topic-reaction-grid dt { color: #647989; font-size: 9px; font-weight: 900; }
.competitor-topic-reaction-grid dd { margin: 5px 0 0; color: #435a6c; font-size: 11px; line-height: 1.6; }
.competitor-topic-post-list { display: grid; gap: 13px; }
.competitor-topic-post-list > article { border: 1px solid #dce5e9; border-radius: 15px; padding: 17px; }
.competitor-topic-post-list > article > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.competitor-topic-post-list > article > header span { color: #177f75; font-size: 10px; font-weight: 900; }
.competitor-topic-post-list > article > header small { margin-left: 8px; color: #82909b; font-size: 9px; }
.competitor-topic-post-list > article > header > b { border-radius: 999px; padding: 5px 8px; color: #5d7280; background: #edf2f4; font-size: 8px; }
.competitor-topic-post-list > article > header > b.is-content_verified,.competitor-topic-post-list > article > header > b.is-comments_verified { color: #11776d; background: #def3ef; }
.competitor-topic-post-list h4 { margin: 10px 0; font-size: 15px; }
.competitor-topic-post-list h4 a { color: #213f54; text-decoration: none; }
.competitor-topic-post-metrics { display: flex; gap: 7px; margin-bottom: 12px; }
.competitor-topic-post-metrics span { border-radius: 7px; padding: 5px 8px; color: #73838f; background: #f0f4f5; font-size: 9px; }
.competitor-topic-post-list section { margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf1f3; }
.competitor-topic-post-list section > strong,.competitor-topic-post-list footer > strong { color: #294a5d; font-size: 11px; }
.competitor-topic-post-list section > p,.competitor-topic-post-list footer p { margin: 6px 0 0; color: #586d7d; font-size: 11px; line-height: 1.7; }
.competitor-topic-post-list section dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 10px 0 0; }
.competitor-topic-post-list section dl div { padding: 9px; border-radius: 8px; background: #f5f7f8; }
.competitor-topic-post-list dt { color: #7a8c98; font-size: 8px; }
.competitor-topic-post-list dd { margin: 4px 0 0; color: #496071; font-size: 10px; line-height: 1.55; }
.competitor-topic-comment-reactions > div { display: grid; gap: 6px; margin-top: 8px; }
.competitor-topic-comment-reactions span { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; color: #526879; background: #f4f7f8; font-size: 10px; }
.competitor-topic-comment-reactions span b { color: #187c73; }
.competitor-topic-comment-reactions span em { color: #7b8b97; font-size: 8px; font-style: normal; }
.competitor-topic-post-list footer { margin-top: 12px; border-radius: 9px; padding: 11px; background: #eef7f5; }
.competitor-topic-community-table { overflow: auto; border: 1px solid #e0e7ea; border-radius: 12px; }
.competitor-topic-community-table > div { display: grid; grid-template-columns: 120px minmax(220px,1fr) 100px minmax(180px,.8fr); }
.competitor-topic-community-table > div > * { padding: 10px; border-bottom: 1px solid #e8edef; color: #536979; font-size: 10px; line-height: 1.5; }
.competitor-topic-community-table > div:first-child { background: #f1f5f6; }
.competitor-topic-community-table > div:first-child b { color: #496174; font-size: 9px; }
.competitor-topic-expression-grid,.competitor-topic-insights > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.competitor-topic-expression-grid article,.competitor-topic-insights article { border-radius: 12px; padding: 13px; background: #f4f7f8; }
.competitor-topic-expression-grid strong,.competitor-topic-insights article strong { color: #285064; font-size: 10px; }
.competitor-topic-expression-grid ul,.competitor-topic-insights ul,.competitor-topic-debate ul,.competitor-topic-confidence ul { margin: 8px 0 0; padding-left: 17px; }
.competitor-topic-expression-grid li,.competitor-topic-insights li,.competitor-topic-debate li,.competitor-topic-confidence li { margin: 4px 0; color: #586f7f; font-size: 10px; line-height: 1.55; }
.competitor-topic-expression-grid li small { margin-left: 5px; color: #83929d; }
.competitor-topic-debate-summary { color: #5d7281; font-size: 11px; line-height: 1.65; }
.competitor-topic-debate { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.competitor-topic-debate article { min-height: 160px; border-radius: 13px; padding: 15px; background: #f2f7f7; }
.competitor-topic-debate article > span { color: #168278; font-size: 9px; font-weight: 900; }
.competitor-topic-debate article > strong { display: block; margin-top: 5px; color: #294a5e; font-size: 13px; }
.competitor-topic-debate article > p { color: #5b7080; font-size: 10px; line-height: 1.6; }
.competitor-topic-debate > i { color: #8ba09f; font-style: normal; }
.competitor-topic-score-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.competitor-topic-score-grid article { padding: 12px; border-radius: 11px; background: #f4f7f8; }
.competitor-topic-score-grid span { display: block; color: #657986; font-size: 9px; }
.competitor-topic-score-grid strong { display: block; margin: 6px 0; color: #e0a31b; letter-spacing: .08em; }
.competitor-topic-score-grid p,.competitor-topic-confidence p { margin: 0; color: #607382; font-size: 9px; line-height: 1.55; }
.competitor-topic-confidence { background: #f7fafb; }
.competitor-topic-confidence p + p { margin-top: 7px; }
.competitor-topic-research-details { border: 1px solid #dde5e8; border-radius: 13px; background: #f8fafb; }
.competitor-topic-research-details summary { padding: 13px 15px; color: #315266; font-size: 11px; font-weight: 900; cursor: pointer; }
.competitor-topic-research-details > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0 15px 15px; }
.competitor-topic-research-details section { border-radius: 10px; padding: 12px; background: #fff; }
.competitor-topic-research-details section > strong { color: #24485b; font-size: 10px; }
.competitor-topic-research-details ul { margin: 8px 0 0; padding: 0; list-style: none; }
.competitor-topic-research-details li { display: grid; gap: 2px; padding: 7px 0; border-bottom: 1px solid #edf1f3; font-size: 9px; }
.competitor-topic-research-details li span { color: #71828f; }
.competitor-topic-research-details li a { width: fit-content; margin-top: 3px; color: #157c72; font-weight: 850; text-decoration: none; }
.competitor-topic-empty { margin: 0; border-radius: 10px; padding: 20px; color: #7b8d99; background: #f4f7f8; font-size: 11px; text-align: center; }
.competitor-topic-result-page { display: grid; gap: 22px; width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: 28px 0 56px; }
.competitor-topic-result-page > header { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(180px,300px); gap: 18px; align-items: center; border: 1px solid #d9e6e7; border-radius: 20px; padding: 21px 24px; background: linear-gradient(145deg,#f8fcfc,#edf8f5); box-shadow: 0 16px 36px rgba(37,74,86,.09); }
.competitor-topic-result-page > header > button,.competitor-topic-result-page-empty button { border: 1px solid #cddcdf; border-radius: 10px; padding: 10px 12px; color: #35576a; background: #fff; font-size: 10px; font-weight: 900; cursor: pointer; }
.competitor-topic-result-page > header span { color: #168177; font-size: 9px; font-weight: 950; letter-spacing: .13em; }
.competitor-topic-result-page > header h1 { margin: 5px 0 3px; color: #1d4053; font-size: 24px; letter-spacing: -.04em; }
.competitor-topic-result-page > header p { margin: 0; color: #70838f; font-size: 11px; }
.competitor-topic-result-page > header aside { border-left: 1px solid #d8e5e5; padding-left: 18px; }
.competitor-topic-result-page > header aside small,.competitor-topic-result-page > header aside strong { display: block; }
.competitor-topic-result-page > header aside small { color: #82929b; font-size: 9px; }
.competitor-topic-result-page > header aside strong { margin-top: 5px; color: #21495b; font-size: 13px; line-height: 1.45; }
.competitor-topic-result-page-empty { display: grid; place-items: center; gap: 14px; min-height: 420px; color: #516a79; }
.competitor-topic-source-index > p { margin: -4px 0 14px; color: #6a7e8c; font-size: 10px; }
.competitor-topic-source-index > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.competitor-topic-source-index > div > a { display: grid; gap: 4px; border: 1px solid #dce8e8; border-radius: 11px; padding: 12px; color: inherit; background: #f7fbfa; text-decoration: none; }
.competitor-topic-source-index > div > a:hover { border-color: #6db7ad; box-shadow: 0 8px 20px rgba(35,105,98,.11); }
.competitor-topic-source-index a span { color: #198177; font-size: 9px; font-weight: 900; }
.competitor-topic-source-index a strong { color: #29495b; font-size: 11px; line-height: 1.45; }
.competitor-topic-source-index a small { color: #7a8b96; font-size: 8px; }
.competitor-topic-evidence-popover { position: relative; display: inline-flex; margin: 8px 0 0; z-index: 4; }
.competitor-topic-evidence-popover > button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #bcded9; border-radius: 999px; padding: 6px 9px; color: #126f67; background: #effaf8; font-size: 9px; font-weight: 900; cursor: pointer; }
.competitor-topic-evidence-popover > button i { font-style: normal; }
.competitor-topic-evidence-panel { position: absolute; left: 0; top: calc(100% + 7px); display: none; width: min(380px,75vw); max-height: 330px; overflow: auto; border: 1px solid #cfe0e1; border-radius: 13px; padding: 10px; color: #2e4d5e; background: #fff; box-shadow: 0 20px 48px rgba(23,55,69,.24); z-index: 100; }
.competitor-topic-evidence-popover:hover .competitor-topic-evidence-panel,.competitor-topic-evidence-popover:focus-within .competitor-topic-evidence-panel { display: grid; gap: 7px; }
.competitor-topic-evidence-panel > strong { padding: 2px 3px 5px; color: #244b5d; font-size: 10px; }
.competitor-topic-evidence-panel a { display: grid; gap: 3px; border-radius: 9px; padding: 9px; color: inherit; background: #f2f7f7; text-decoration: none; }
.competitor-topic-evidence-panel a:hover { background: #e7f5f2; }
.competitor-topic-evidence-panel a small { color: #168077; font-size: 8px; }
.competitor-topic-evidence-panel a b { color: #29495b; font-size: 10px; line-height: 1.45; }
.competitor-topic-evidence-panel a em { color: #778a96; font-size: 8px; font-style: normal; }
.competitor-topic-report-hero .competitor-topic-evidence-popover { margin: 0; }
.competitor-topic-report-hero .competitor-topic-evidence-popover > button { border-color: #ffffff38; color: #d9fffa; background: #ffffff12; }
.competitor-topic-reaction-grid > article > footer { margin-top: 2px; }
.competitor-topic-post-open { display: inline-flex; margin: -2px 0 10px; border-radius: 8px; padding: 7px 9px; color: #14776f; background: #edf8f6; font-size: 9px; font-weight: 900; text-decoration: none; }
.competitor-topic-comment-reactions.is-verified { border-radius: 9px; padding: 11px; background: #f1faf8; }
.competitor-topic-comment-reactions.is-unverified { border-radius: 9px; padding: 11px; color: #8a6e4c; background: #fff8ee; }
.competitor-topic-expression-grid li,.competitor-topic-insights li { position: relative; }
.competitor-topic-expression-grid li > span:first-child,.competitor-topic-insights li > span:first-child { display: inline; }

@media (max-width: 900px) {
  .competitor-topic-pulse { grid-template-columns: 1fr; }
  .competitor-topic-pulse-history > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .competitor-topic-coverage-strip { grid-template-columns: repeat(3,1fr); }
  .competitor-topic-score-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
  .competitor-topic-pulse { padding: 20px; border-radius: 18px; }
  .competitor-topic-pulse-form { grid-template-columns: 1fr; }
  .competitor-topic-pulse-form > button { width: 100%; }
  .competitor-topic-pulse-form > small { grid-column: auto; }
  .competitor-topic-pulse-sources i { width: 100%; margin-left: 0; }
  .competitor-topic-pulse-history > div { grid-template-columns: 1fr; }
  .competitor-topic-pulse-custom-period,.competitor-topic-research-steps,.competitor-topic-live-counts,.competitor-topic-reaction-grid dl,.competitor-topic-post-list section dl,.competitor-topic-expression-grid,.competitor-topic-insights > div,.competitor-topic-research-details > div { grid-template-columns: 1fr; }
  .competitor-topic-coverage-strip { grid-template-columns: repeat(2,1fr); }
  .competitor-topic-debate { grid-template-columns: 1fr; }
  .competitor-topic-debate > i { transform: rotate(90deg); text-align: center; }
  .competitor-topic-score-grid { grid-template-columns: 1fr; }
  .competitor-topic-report-hero,.competitor-topic-report-section { padding: 18px; }
  .competitor-topic-report-hero h2 { font-size: 22px; }
  .competitor-topic-result-page { width: min(100% - 20px,1180px); padding-top: 12px; }
  .competitor-topic-result-page > header { grid-template-columns: 1fr; padding: 17px; }
  .competitor-topic-result-page > header > button { width: fit-content; }
  .competitor-topic-result-page > header aside { border-left: 0; border-top: 1px solid #d8e5e5; padding: 12px 0 0; }
  .competitor-topic-source-index > div { grid-template-columns: 1fr; }
  .competitor-topic-report-hero footer { flex-wrap: wrap; }
  .competitor-topic-evidence-panel { position: fixed; left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; max-height: 55vh; }
}

/* Competitor intelligence console — readable research-first visual system. */
#competitorAnalysisPage {
  --research-ink: #172735;
  --research-copy: #3f5565;
  --research-muted: #6f818d;
  --research-line: #cfd9de;
  --research-soft-line: #e2e8eb;
  --research-paper: #fbfcfc;
  --research-panel: #ffffff;
  --research-navy: #0b1b29;
  --research-teal: #087d73;
  color: var(--research-ink);
  background-color: #eef2f3;
  background-image: linear-gradient(rgba(71,93,107,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(71,93,107,.035) 1px,transparent 1px);
  background-size: 24px 24px;
  font-size: 15px;
  font-weight: 400;
}
#competitorAnalysisPage .competitor-page-inner { max-width: 1500px; gap: 18px; padding: 28px 34px 52px; }
#competitorAnalysisPage strong,
#competitorAnalysisPage b { font-weight: 650; }
#competitorAnalysisPage p,
#competitorAnalysisPage small,
#competitorAnalysisPage span,
#competitorAnalysisPage em,
#competitorAnalysisPage li,
#competitorAnalysisPage dd,
#competitorAnalysisPage dt { font-weight: 400; }
#competitorAnalysisPage button,
#competitorAnalysisPage input,
#competitorAnalysisPage select,
#competitorAnalysisPage textarea { font-family: inherit; }

/* Compact command header instead of a marketing-style SaaS hero. */
#competitorAnalysisPage .competitor-main-landing { gap: 16px; }
#competitorAnalysisPage .competitor-main-hero,
#competitorAnalysisPage .competitor-result-hero { min-height: 274px; border: 1px solid #314757; border-radius: 8px; padding: 34px 38px; background-color: var(--research-navy); background-image: linear-gradient(rgba(125,170,181,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(125,170,181,.055) 1px,transparent 1px),linear-gradient(135deg,#0a1926,#122b3a 72%,#123d42); background-size: 22px 22px,22px 22px,auto; box-shadow: 0 14px 34px rgba(8,25,37,.16); }
#competitorAnalysisPage .competitor-main-hero::before,
#competitorAnalysisPage .competitor-main-hero::after,
#competitorAnalysisPage .competitor-result-hero::after { display: none; }
#competitorAnalysisPage .competitor-main-copy h1,
#competitorAnalysisPage .competitor-result-hero h1 { font-size: clamp(32px,3.5vw,44px); font-weight: 650; line-height: 1.18; letter-spacing: -.035em; }
#competitorAnalysisPage .competitor-main-copy p,
#competitorAnalysisPage .competitor-result-hero p { margin-top: 15px; color: #b8c7d0; font-size: 16px; font-weight: 400; line-height: 1.7; }
#competitorAnalysisPage .competitor-main-kicker,
#competitorAnalysisPage .competitor-result-hero div > span { margin-bottom: 12px; color: #70d9cb; font-size: 11px; font-weight: 600; letter-spacing: .13em; }
#competitorAnalysisPage .competitor-main-actions { margin-top: 24px; }
#competitorAnalysisPage .competitor-main-actions button,
#competitorAnalysisPage .competitor-result-hero button { min-height: 46px; border-radius: 5px; padding-inline: 18px; font-size: 14px; font-weight: 600; box-shadow: none; }
#competitorAnalysisPage .competitor-main-primary { color: #072927; background: #70ddd0; }
#competitorAnalysisPage .competitor-main-signal,
#competitorAnalysisPage .competitor-result-hero aside,
#competitorAnalysisPage .competitor-result-hero-action { border-color: #39505e; border-radius: 6px; background: rgba(4,17,27,.74); box-shadow: none; backdrop-filter: none; }
#competitorAnalysisPage .competitor-main-signal { padding: 20px; }
#competitorAnalysisPage .competitor-signal-orbit span,
#competitorAnalysisPage .competitor-main-signal li small,
#competitorAnalysisPage .competitor-result-hero aside li small { font-size: 12px; font-weight: 400; }
#competitorAnalysisPage .competitor-signal-orbit strong { font-size: 36px; font-weight: 650; }
#competitorAnalysisPage .competitor-main-signal li { border-radius: 4px; padding: 10px; }
#competitorAnalysisPage .competitor-main-signal li strong { font-size: 14px; font-weight: 550; }
#competitorAnalysisPage .competitor-main-signal li > b { border-radius: 4px; font-size: 11px; font-weight: 600; }

/* Research query console. */
#competitorAnalysisPage .competitor-topic-pulse { gap: 22px 34px; margin: 0; border: 1px solid var(--research-line); border-left: 4px solid var(--research-teal); border-radius: 7px; padding: 28px 30px; background: var(--research-panel); box-shadow: none; }
#competitorAnalysisPage .competitor-topic-pulse-copy > span,
#competitorAnalysisPage .competitor-main-section-head span,
#competitorAnalysisPage .competitor-result-section-head span,
#competitorAnalysisPage .competitor-topic-report-section > header span { color: var(--research-teal); font-size: 11px; font-weight: 600; letter-spacing: .11em; }
#competitorAnalysisPage .competitor-topic-pulse-copy h2 { margin: 8px 0; font-size: 26px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-pulse-copy p { color: var(--research-copy); font-size: 15px; line-height: 1.72; }
#competitorAnalysisPage .competitor-topic-pulse-form { grid-template-columns: minmax(0,1fr) 155px; gap: 10px; }
#competitorAnalysisPage .competitor-topic-pulse-form label > span { color: #405867; font-size: 12px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-pulse-form input,
#competitorAnalysisPage .competitor-topic-pulse-form select { height: 50px; border-color: #bfcdd2; border-radius: 5px; padding-inline: 14px; font-size: 15px; font-weight: 400; }
#competitorAnalysisPage .competitor-topic-pulse-form > button { height: 48px; border-radius: 5px; font-size: 14px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-pulse-form > small,
#competitorAnalysisPage .competitor-topic-pulse-sources i { color: var(--research-muted); font-size: 12px; line-height: 1.55; }
#competitorAnalysisPage .competitor-topic-pulse-sources span { border-radius: 4px; padding: 6px 9px; font-size: 11px; font-weight: 550; }
#competitorAnalysisPage .competitor-topic-pulse-history { padding-top: 17px; }
#competitorAnalysisPage .competitor-topic-pulse-history > strong { margin-bottom: 10px; font-size: 14px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-pulse-history article { border-radius: 5px; background: #fcfdfd; }
#competitorAnalysisPage .competitor-topic-pulse-history-open { gap: 6px; padding: 13px 14px; }
#competitorAnalysisPage .competitor-topic-pulse-history-open span { font-size: 14px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-pulse-history-open small { font-size: 12px; line-height: 1.45; }
#competitorAnalysisPage .competitor-topic-pulse-history-delete { padding-inline: 13px; font-size: 12px; font-weight: 550; }

/* Flat, information-dense panels. */
#competitorAnalysisPage .competitor-main-start,
#competitorAnalysisPage .competitor-main-overview,
#competitorAnalysisPage .competitor-main-results,
#competitorAnalysisPage .competitor-main-data-state,
#competitorAnalysisPage .competitor-result-section,
#competitorAnalysisPage .competitor-results-panel,
#competitorAnalysisPage .competitor-channel-panel,
#competitorAnalysisPage .competitor-new-form,
#competitorAnalysisPage .competitor-preview-panel { border: 1px solid var(--research-line); border-radius: 7px; background: var(--research-panel); box-shadow: none; }
#competitorAnalysisPage .competitor-research-studio .competitor-preview-panel { border-color: #314757; background: linear-gradient(180deg,#14233b 0%,#172b45 100%); }
#competitorAnalysisPage .competitor-main-start,
#competitorAnalysisPage .competitor-main-results,
#competitorAnalysisPage .competitor-result-section { padding: 26px 28px; }
#competitorAnalysisPage .competitor-main-section-head h2,
#competitorAnalysisPage .competitor-result-section-head h2,
#competitorAnalysisPage .monitoring-section-head h2 { font-size: 23px; font-weight: 650; letter-spacing: -.02em; }
#competitorAnalysisPage .competitor-main-section-head p,
#competitorAnalysisPage .competitor-result-section-head p,
#competitorAnalysisPage .monitoring-section-head p { color: var(--research-muted); font-size: 14px; font-weight: 400; line-height: 1.55; }
#competitorAnalysisPage .competitor-main-section-head > small,
#competitorAnalysisPage .competitor-result-section-head > strong { border-radius: 4px; font-size: 12px; font-weight: 500; }
#competitorAnalysisPage .competitor-main-section-head > button { border-radius: 4px; font-size: 13px; font-weight: 600; }
#competitorAnalysisPage .competitor-main-periods { gap: 10px; margin-top: 20px; }
#competitorAnalysisPage .competitor-main-periods button { min-height: 150px; border-color: var(--research-line); border-radius: 6px; padding: 18px; box-shadow: none; }
#competitorAnalysisPage .competitor-main-periods button:hover { transform: none; box-shadow: inset 3px 0 var(--research-teal); }
#competitorAnalysisPage .competitor-main-periods button > span,
#competitorAnalysisPage .competitor-main-periods button > span b { font-size: 12px; font-weight: 550; }
#competitorAnalysisPage .competitor-main-periods button > strong { font-size: 21px; font-weight: 650; }
#competitorAnalysisPage .competitor-main-periods button > small { font-size: 13px; font-weight: 500; }
#competitorAnalysisPage .competitor-main-periods button > em { padding-right: 26px; color: var(--research-muted); font-size: 12px; line-height: 1.5; }
#competitorAnalysisPage .competitor-benchmark-periods { grid-template-columns: repeat(4,minmax(0,1fr)); }
#competitorAnalysisPage .competitor-benchmark-periods button { min-height: 86px; align-content: center; }
#competitorAnalysisPage .competitor-benchmark-periods button > strong { align-self: auto; margin-top: 0; }
#competitorAnalysisPage .competitor-benchmark-card .competitor-report-top > span:first-child { overflow: hidden; }
#competitorAnalysisPage .competitor-benchmark-card .competitor-report-top > span:first-child img { width: 100%; height: 100%; object-fit: cover; }
#competitorAnalysisPage .competitor-benchmark-card .competitor-report-stats { grid-template-columns: repeat(5,minmax(0,1fr)); }
#competitorAnalysisPage .competitor-curated-entry { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #17384a; border-radius: 9px; padding: 10px 15px; color: #fff; background: linear-gradient(135deg,#17384a,#146d72); box-shadow: 0 8px 20px rgba(15,60,70,.16); font-size: 13px; font-weight: 700; cursor: pointer; }
#competitorAnalysisPage .competitor-curated-entry:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgba(15,60,70,.22); }
#competitorAnalysisPage .competitor-result-section-head .competitor-curated-entry > span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; color: #fff; background: rgba(255,255,255,.14); font-size: 14px; letter-spacing: 0; }
#competitorAnalysisPage .competitor-growth-curve { margin: 15px 0 2px; border: 1px solid #dce7e7; border-radius: 9px; padding: 13px 14px 10px; background: linear-gradient(180deg,#fbfefe,#f3f9f8); }
#competitorAnalysisPage .competitor-growth-curve > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#competitorAnalysisPage .competitor-growth-curve > header span { color: #617981; font-size: 11px; font-weight: 650; }
#competitorAnalysisPage .competitor-growth-curve > header strong { color: #126d69; font-size: 11px; font-weight: 750; }
#competitorAnalysisPage .competitor-growth-curve svg { display: block; width: 100%; height: 112px; margin-top: 5px; overflow: visible; }
#competitorAnalysisPage .competitor-growth-curve svg polyline { fill: none; stroke: #148c83; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#competitorAnalysisPage .competitor-growth-curve svg circle { fill: #fff; stroke: #148c83; stroke-width: 2; }
#competitorAnalysisPage .competitor-growth-curve svg circle.is-peak { fill: #f6c85f; stroke: #936517; stroke-width: 2.5; }
#competitorAnalysisPage .competitor-growth-curve .competitor-growth-grid { fill: none; stroke: #dbe8e6; stroke-width: 1; stroke-dasharray: 4 5; }
#competitorAnalysisPage .competitor-growth-curve > footer { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; color: #7a8e94; font-size: 10px; }
#competitorAnalysisPage .competitor-growth-curve > footer b { color: #365f63; text-align: center; font-weight: 650; }
#competitorAnalysisPage .competitor-growth-curve.is-waiting { min-height: 92px; display: grid; place-content: center; text-align: center; }
#competitorAnalysisPage .competitor-growth-curve.is-waiting span { color: #48646d; font-size: 11px; font-weight: 700; }
#competitorAnalysisPage .competitor-growth-curve.is-waiting p { margin: 5px 0 0; color: #839399; font-size: 11px; }
@media (max-width: 900px) {
  #competitorAnalysisPage .competitor-benchmark-card .competitor-report-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
#competitorAnalysisPage .competitor-main-numbers { padding: 24px 26px; }
#competitorAnalysisPage .competitor-main-numbers span { font-size: 12px; font-weight: 500; }
#competitorAnalysisPage .competitor-main-numbers strong { font-size: 31px; font-weight: 700; }
#competitorAnalysisPage .competitor-main-numbers strong em,
#competitorAnalysisPage .competitor-main-numbers small { font-size: 12px; font-weight: 400; }
#competitorAnalysisPage .competitor-main-rule { padding: 26px 28px; background: #152a38; }
#competitorAnalysisPage .competitor-main-rule > span { font-size: 11px; font-weight: 600; }
#competitorAnalysisPage .competitor-main-rule strong { font-size: 16px; font-weight: 600; }
#competitorAnalysisPage .competitor-main-rule p { font-size: 13px; font-weight: 400; line-height: 1.65; }

/* Setup, progress, channels and video result tables. */
#competitorAnalysisPage .competitor-new-layout { gap: 20px; }
#competitorAnalysisPage .competitor-new-form,
#competitorAnalysisPage .competitor-preview-panel { padding: 26px; }
#competitorAnalysisPage .competitor-form-block h2 { font-size: 20px; font-weight: 650; }
#competitorAnalysisPage .competitor-choice-card,
#competitorAnalysisPage .competitor-preview-stack article { border-radius: 5px; box-shadow: none; }
#competitorAnalysisPage .competitor-choice-card strong { font-size: 15px; font-weight: 600; }
#competitorAnalysisPage .competitor-choice-card small,
#competitorAnalysisPage .competitor-choice-card em,
#competitorAnalysisPage .competitor-preview-stack small,
#competitorAnalysisPage .competitor-preview-stack em { font-size: 13px; font-weight: 400; line-height: 1.5; }
#competitorAnalysisPage .competitor-field,
#competitorAnalysisPage .competitor-date-row label { font-size: 14px; font-weight: 600; }
#competitorAnalysisPage .competitor-field span { font-size: 13px; font-weight: 400; }
#competitorAnalysisPage .competitor-field select,
#competitorAnalysisPage .competitor-inline-input,
#competitorAnalysisPage .competitor-date-row input { min-height: 48px; border-radius: 5px; font-size: 15px; font-weight: 400; }
#competitorAnalysisPage .competitor-filter-chip { min-height: 40px; border-radius: 4px; font-size: 13px; font-weight: 500; box-shadow: none; }
#competitorAnalysisPage .competitor-policy-box { font-size: 14px; font-weight: 400; line-height: 1.6; }
#competitorAnalysisPage .competitor-policy-box strong { font-size: 15px; font-weight: 650; }
#competitorAnalysisPage .competitor-run-progress { grid-template-columns: 140px minmax(0,1fr) minmax(340px,.65fr); border-radius: 7px; padding: 38px; background: #f9fbfb; box-shadow: none; }
#competitorAnalysisPage .competitor-run-copy > span { font-size: 11px; font-weight: 600; }
#competitorAnalysisPage .competitor-run-copy h2 { font-size: clamp(27px,3vw,38px); font-weight: 650; }
#competitorAnalysisPage .competitor-run-copy p { font-size: 15px; font-weight: 400; }
#competitorAnalysisPage .competitor-run-facts b { border-radius: 4px; font-size: 12px; font-weight: 500; }
#competitorAnalysisPage .competitor-run-steps { border-radius: 6px; }
#competitorAnalysisPage .competitor-run-steps li { border-radius: 4px; }
#competitorAnalysisPage .competitor-run-steps li strong { font-size: 14px; font-weight: 600; }
#competitorAnalysisPage .competitor-run-steps li small,
#competitorAnalysisPage .competitor-run-note p { font-size: 12px; font-weight: 400; line-height: 1.5; }
#competitorAnalysisPage .competitor-channel-hero h1,
#competitorAnalysisPage .competitor-results-head h1 { font-size: 34px; font-weight: 650; }
#competitorAnalysisPage .competitor-channel-hero p,
#competitorAnalysisPage .competitor-results-head p { font-size: 15px; font-weight: 400; }
#competitorAnalysisPage .competitor-channel-row,
#competitorAnalysisPage .competitor-data-table { border-radius: 5px; font-size: 14px; }
#competitorAnalysisPage .competitor-data-row { min-height: 61px; }
#competitorAnalysisPage .competitor-data-row > div { padding: 13px 12px; font-size: 14px; font-weight: 450; line-height: 1.48; }
#competitorAnalysisPage .competitor-data-head { min-height: 48px; background: #edf2f4; }
#competitorAnalysisPage .competitor-data-head > div { color: #425867; font-size: 12px; font-weight: 650; }
#competitorAnalysisPage .competitor-result-channel-cell strong { font-size: 14px; font-weight: 600; }
#competitorAnalysisPage .competitor-performance-badge { border-radius: 4px; font-size: 12px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-summary.is-pending { font-size: 12px; }

/* Topic report: reading and source inspection take priority. */
#competitorAnalysisPage .competitor-topic-result-page { width: min(1320px,calc(100% - 44px)); gap: 18px; }
#competitorAnalysisPage .competitor-topic-result-page > header { border-color: var(--research-line); border-radius: 7px; padding: 22px 24px; background: #f9fbfb; box-shadow: none; }
#competitorAnalysisPage .competitor-topic-result-page > header > button,
#competitorAnalysisPage .competitor-topic-result-page-empty button { border-radius: 4px; font-size: 13px; font-weight: 550; }
#competitorAnalysisPage .competitor-topic-result-page > header span { font-size: 11px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-result-page > header h1 { font-size: 28px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-result-page > header p { font-size: 14px; }
#competitorAnalysisPage .competitor-topic-result-page > header aside small { font-size: 12px; }
#competitorAnalysisPage .competitor-topic-result-page > header aside strong { font-size: 15px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-report-view { gap: 14px; }
#competitorAnalysisPage .competitor-topic-report-hero { border: 1px solid #214955; border-radius: 7px; padding: 30px 32px; background: linear-gradient(120deg,#102b39,#115e5a); box-shadow: none; }
#competitorAnalysisPage .competitor-topic-report-hero > span { font-size: 11px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-report-hero h2 { font-size: 30px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-report-hero > strong { font-size: 16px; font-weight: 550; }
#competitorAnalysisPage .competitor-topic-report-hero p { font-size: 15px; }
#competitorAnalysisPage .competitor-topic-report-hero footer { font-size: 12px; }
#competitorAnalysisPage .competitor-topic-coverage-strip { gap: 6px; }
#competitorAnalysisPage .competitor-topic-coverage-strip article { border-radius: 5px; padding: 14px; }
#competitorAnalysisPage .competitor-topic-coverage-strip span { font-size: 12px; }
#competitorAnalysisPage .competitor-topic-coverage-strip strong { font-size: 22px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-report-section { border-color: var(--research-line); border-radius: 7px; padding: 24px 26px; }
#competitorAnalysisPage .competitor-topic-report-section > header h3 { font-size: 22px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-report-section > header > strong { font-size: 13px; font-weight: 550; }
#competitorAnalysisPage .competitor-topic-reaction-grid > article,
#competitorAnalysisPage .competitor-topic-post-list > article,
#competitorAnalysisPage .competitor-topic-expression-grid article,
#competitorAnalysisPage .competitor-topic-insights article,
#competitorAnalysisPage .competitor-topic-debate article,
#competitorAnalysisPage .competitor-topic-score-grid article { border-radius: 5px; }
#competitorAnalysisPage .competitor-topic-reaction-grid header div strong { font-size: 16px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-reaction-grid header div span { font-size: 12px; }
#competitorAnalysisPage .competitor-topic-reaction-grid header em { font-size: 22px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-reaction-grid dt { font-size: 12px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-reaction-grid dd { font-size: 14px; }
#competitorAnalysisPage .competitor-topic-post-list > article > header span,
#competitorAnalysisPage .competitor-topic-post-list > article > header small { font-size: 12px; }
#competitorAnalysisPage .competitor-topic-post-list > article > header > b { font-size: 11px; font-weight: 550; }
#competitorAnalysisPage .competitor-topic-post-list h4 { font-size: 17px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-post-metrics span { font-size: 12px; }
#competitorAnalysisPage .competitor-topic-post-list section > strong,
#competitorAnalysisPage .competitor-topic-post-list footer > strong { font-size: 14px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-post-list section > p,
#competitorAnalysisPage .competitor-topic-post-list footer p { font-size: 14px; line-height: 1.72; }
#competitorAnalysisPage .competitor-topic-post-list dt { font-size: 11px; }
#competitorAnalysisPage .competitor-topic-post-list dd,
#competitorAnalysisPage .competitor-topic-comment-reactions span { font-size: 13px; }
#competitorAnalysisPage .competitor-topic-comment-reactions span em { font-size: 11px; }
#competitorAnalysisPage .competitor-topic-community-table > div > * { padding: 13px 12px; font-size: 13px; }
#competitorAnalysisPage .competitor-topic-community-table > div:first-child b { font-size: 12px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-expression-grid strong,
#competitorAnalysisPage .competitor-topic-insights article strong { font-size: 14px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-expression-grid li,
#competitorAnalysisPage .competitor-topic-insights li,
#competitorAnalysisPage .competitor-topic-debate li,
#competitorAnalysisPage .competitor-topic-confidence li { font-size: 13px; line-height: 1.65; }
#competitorAnalysisPage .competitor-topic-debate-summary { font-size: 14px; }
#competitorAnalysisPage .competitor-topic-debate article > span { font-size: 12px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-debate article > strong { font-size: 16px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-debate article > p { font-size: 13px; }
#competitorAnalysisPage .competitor-topic-score-grid span { font-size: 12px; }
#competitorAnalysisPage .competitor-topic-score-grid strong { font-weight: 650; }
#competitorAnalysisPage .competitor-topic-score-grid p,
#competitorAnalysisPage .competitor-topic-confidence p { font-size: 13px; }
#competitorAnalysisPage .competitor-topic-source-index > p { font-size: 13px; }
#competitorAnalysisPage .competitor-topic-source-index > div > a { border-radius: 5px; padding: 14px; }
#competitorAnalysisPage .competitor-topic-source-index a span { font-size: 11px; font-weight: 550; }
#competitorAnalysisPage .competitor-topic-source-index a strong { font-size: 14px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-source-index a small { font-size: 12px; }
#competitorAnalysisPage .competitor-topic-evidence-popover > button { border-radius: 4px; padding: 7px 10px; font-size: 12px; font-weight: 550; }
#competitorAnalysisPage .competitor-topic-evidence-panel { border-radius: 6px; }
#competitorAnalysisPage .competitor-topic-evidence-panel > strong,
#competitorAnalysisPage .competitor-topic-evidence-panel a b { font-size: 13px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-evidence-panel a small,
#competitorAnalysisPage .competitor-topic-evidence-panel a em { font-size: 11px; }
#competitorAnalysisPage .competitor-topic-post-open { border-radius: 4px; padding: 8px 10px; font-size: 12px; font-weight: 550; }
#competitorAnalysisPage .competitor-topic-research-details { border-radius: 5px; }
#competitorAnalysisPage .competitor-topic-research-details summary { font-size: 14px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-research-details section > strong { font-size: 13px; font-weight: 600; }
#competitorAnalysisPage .competitor-topic-research-details li { font-size: 12px; }

/* Topic report evidence and planner brief: readable, unclipped, decision-first. */
#competitorAnalysisPage .competitor-topic-report-hero { overflow: visible; position: relative; z-index: 2; }
#competitorAnalysisPage .competitor-topic-summary-switch { display: inline-flex; gap: 4px; width: fit-content; margin-top: 22px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; padding: 4px; background: rgba(3,25,32,.28); }
#competitorAnalysisPage .competitor-topic-summary-switch button { min-height: 38px; border: 0; border-radius: 5px; padding: 8px 14px; color: #b8d3d6; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; }
#competitorAnalysisPage .competitor-topic-summary-switch button.is-active { color: #123b42; background: #d9fff7; box-shadow: 0 5px 14px rgba(0,0,0,.15); }
#competitorAnalysisPage .competitor-topic-summary-shell { margin-top: 15px; }
#competitorAnalysisPage .competitor-topic-summary-shell > section[hidden] { display: none !important; }
#competitorAnalysisPage .competitor-topic-summary-shell > section { display: grid; gap: 8px; }
#competitorAnalysisPage .competitor-topic-planner-summary { border: 1px solid rgba(147,235,221,.35); border-radius: 8px; padding: 20px; background: rgba(3,29,35,.32); }
#competitorAnalysisPage .competitor-topic-planner-summary > span { color: #80e6d8; font-size: 11px; font-weight: 700; letter-spacing: .11em; }
#competitorAnalysisPage .competitor-topic-planner-summary h3 { margin: 2px 0 7px; color: #fff; font-size: clamp(21px,3vw,28px); font-weight: 650; line-height: 1.38; }
#competitorAnalysisPage .competitor-topic-planner-summary > div { display: grid; gap: 6px; margin: 0; }
#competitorAnalysisPage .competitor-topic-planner-summary article { display: grid; gap: 6px; margin-top: 6px; border-left: 3px solid #77dccf; padding: 11px 13px; background: rgba(255,255,255,.07); }
#competitorAnalysisPage .competitor-topic-planner-summary article strong { color: #bff9ef; font-size: 13px; }
#competitorAnalysisPage .competitor-topic-planner-summary ol { display: grid; gap: 5px; margin: 0; padding-left: 20px; color: #e0edf0; font-size: 14px; line-height: 1.6; }
#competitorAnalysisPage .competitor-topic-report-hero footer { align-items: center; flex-wrap: wrap; }

#competitorAnalysisPage .competitor-topic-evidence-popover { display: block; width: 100%; margin: 10px 0 0; }
#competitorAnalysisPage .competitor-topic-evidence-popover > button { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 9px; width: 100%; min-height: 42px; border: 1px solid #bfd8d6; border-radius: 6px; padding: 9px 11px; color: #205f62; background: #f1f9f8; text-align: left; font-size: 12px; font-weight: 600; cursor: pointer; }
#competitorAnalysisPage .competitor-topic-evidence-popover > button:hover { border-color: #68a9a4; background: #e9f7f5; }
#competitorAnalysisPage .competitor-topic-evidence-popover > button > span { overflow: hidden; color: inherit; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
#competitorAnalysisPage .competitor-topic-evidence-popover > button > b { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 99px; color: #fff; background: #197a73; font-size: 11px; }
#competitorAnalysisPage .competitor-topic-evidence-popover > button > i { color: #688184; font-size: 11px; font-style: normal; white-space: nowrap; }
#competitorAnalysisPage .competitor-topic-report-hero .competitor-topic-evidence-popover { width: min(390px,100%); margin: 0; }
#competitorAnalysisPage .competitor-topic-report-hero .competitor-topic-evidence-popover > button { border-color: rgba(194,255,246,.34); color: #dffefa; background: rgba(255,255,255,.08); }
#competitorAnalysisPage .competitor-topic-report-hero .competitor-topic-evidence-popover > button > b { color: #123b42; background: #c9fff6; }
#competitorAnalysisPage .competitor-topic-report-hero .competitor-topic-evidence-popover > button > i { color: #bee3e0; }

#competitorAnalysisPage .competitor-topic-search-coverage { border: 1px solid var(--research-line); border-radius: 7px; padding: 22px 25px; background: #fff; }
#competitorAnalysisPage .competitor-topic-search-coverage > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
#competitorAnalysisPage .competitor-topic-search-coverage > header span { color: var(--research-teal); font-size: 11px; font-weight: 650; letter-spacing: .1em; }
#competitorAnalysisPage .competitor-topic-search-coverage h3 { margin: 5px 0 3px; color: #203e52; font-size: 21px; }
#competitorAnalysisPage .competitor-topic-search-coverage header p { margin: 0; color: #657983; font-size: 13px; line-height: 1.55; }
#competitorAnalysisPage .competitor-topic-search-coverage header > strong { flex: 0 0 auto; color: #19776f; font-size: 14px; }
#competitorAnalysisPage .competitor-topic-search-coverage > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
#competitorAnalysisPage .competitor-topic-search-coverage > div > span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d7e0e3; border-radius: 99px; padding: 7px 9px; color: #62757f; background: #f6f8f9; font-size: 12px; }
#competitorAnalysisPage .competitor-topic-search-coverage > div > span i { width: 7px; height: 7px; border-radius: 99px; background: #aab7bc; }
#competitorAnalysisPage .competitor-topic-search-coverage > div > span b { color: #849298; font-size: 10px; font-weight: 550; }
#competitorAnalysisPage .competitor-topic-search-coverage > div > span.is-verified { border-color: #a9d7cf; color: #185f59; background: #edf9f6; }
#competitorAnalysisPage .competitor-topic-search-coverage > div > span.is-verified i { background: #1c9286; }
#competitorAnalysisPage .competitor-topic-search-coverage > div > span.is-verified b { color: #27877e; }

#competitorAnalysisPage .competitor-topic-community-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 11px; }
#competitorAnalysisPage .competitor-topic-community-grid > article { display: flex; min-width: 0; flex-direction: column; border: 1px solid #dce6e8; border-radius: 7px; padding: 16px; background: #fafcfc; }
#competitorAnalysisPage .competitor-topic-community-grid > article > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e5ebed; padding-bottom: 11px; }
#competitorAnalysisPage .competitor-topic-community-grid > article > header strong { color: #24485a; font-size: 16px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-community-grid > article > header span { border-radius: 99px; padding: 5px 8px; color: #15766e; background: #e9f6f4; font-size: 11px; }
#competitorAnalysisPage .competitor-topic-community-grid > article > div { margin-top: 12px; }
#competitorAnalysisPage .competitor-topic-community-grid small { color: #74858d; font-size: 11px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-community-grid p { margin: 5px 0 0; color: #405966; font-size: 13px; line-height: 1.65; }
#competitorAnalysisPage .competitor-topic-community-grid footer { margin-top: auto; padding-top: 4px; }
#competitorAnalysisPage .competitor-topic-expression-grid li,
#competitorAnalysisPage .competitor-topic-insights li { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,190px); align-items: start; gap: 10px; border-top: 1px solid #e2e9eb; padding: 10px 0; }
#competitorAnalysisPage .competitor-topic-expression-grid li:first-child,
#competitorAnalysisPage .competitor-topic-insights li:first-child { border-top: 0; }
#competitorAnalysisPage .competitor-topic-expression-grid li .competitor-topic-evidence-popover,
#competitorAnalysisPage .competitor-topic-insights li .competitor-topic-evidence-popover { margin: 0; }
#competitorAnalysisPage .competitor-topic-score-grid { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); }
#competitorAnalysisPage .competitor-topic-score-grid article { display: flex; min-height: 190px; flex-direction: column; border: 1px solid #e0e7e9; padding: 17px; }
#competitorAnalysisPage .competitor-topic-score-grid article .competitor-topic-evidence-popover { margin-top: auto; padding-top: 8px; }

.competitor-topic-evidence-modal { width: min(760px,calc(100vw - 28px)); max-height: min(88vh,840px); }
.competitor-topic-evidence-modal .modal-head p { margin: 5px 0 0; color: #73828c; font-size: 13px; }
.competitor-topic-evidence-modal .modal-body { overflow: auto; padding: 20px 24px; background: #f3f6f7; }
.competitor-topic-evidence-modal-list { display: grid; gap: 11px; }
.competitor-topic-evidence-modal-list article { border: 1px solid #d9e3e5; border-radius: 8px; padding: 17px; background: #fff; }
.competitor-topic-evidence-modal-list article header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; }
.competitor-topic-evidence-modal-list article header b { color: #188078; font-size: 11px; }
.competitor-topic-evidence-modal-list article header span { color: #2d5961; font-size: 12px; font-weight: 700; }
.competitor-topic-evidence-modal-list article header small { color: #849298; font-size: 11px; }
.competitor-topic-evidence-modal-list h3 { margin: 10px 0 7px; color: #233f50; font-size: 16px; line-height: 1.45; }
.competitor-topic-evidence-modal-list p { margin: 0; color: #526974; font-size: 13px; line-height: 1.65; }
.competitor-topic-evidence-modal-list footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; border-top: 1px solid #edf1f2; padding-top: 11px; }
.competitor-topic-evidence-modal-list footer span { color: #72858d; font-size: 11px; }
.competitor-topic-evidence-modal-list footer a { border-radius: 5px; padding: 8px 10px; color: #fff; background: #187d75; font-size: 12px; font-weight: 650; text-decoration: none; }

@media (max-width: 720px) {
  #competitorAnalysisPage .competitor-topic-summary-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  #competitorAnalysisPage .competitor-topic-summary-switch button { padding: 8px 7px; font-size: 12px; }
  #competitorAnalysisPage .competitor-topic-planner-summary { padding: 16px; }
  #competitorAnalysisPage .competitor-topic-search-coverage > header { align-items: flex-start; flex-direction: column; }
  #competitorAnalysisPage .competitor-topic-community-grid { grid-template-columns: 1fr; }
  #competitorAnalysisPage .competitor-topic-expression-grid li,
  #competitorAnalysisPage .competitor-topic-insights li { grid-template-columns: 1fr; }
  #competitorAnalysisPage .competitor-topic-evidence-popover > button { grid-template-columns: minmax(0,1fr) auto; }
  #competitorAnalysisPage .competitor-topic-evidence-popover > button > i { display: none; }
  .competitor-topic-evidence-modal .modal-body { padding: 14px; }
  .competitor-topic-evidence-modal-list article header { grid-template-columns: auto 1fr; }
  .competitor-topic-evidence-modal-list article header small { grid-column: 2; }
  .competitor-topic-evidence-modal-list footer { align-items: stretch; flex-direction: column; }
  .competitor-topic-evidence-modal-list footer a { text-align: center; }
}

/* Embedded monitoring data inherits the same readable hierarchy. */
#competitorAnalysisPage .monitoring-dashboard { gap: 14px; font-weight: 400; }
#competitorAnalysisPage .monitoring-summary-grid article,
#competitorAnalysisPage .monitoring-status-strip,
#competitorAnalysisPage .monitoring-insight-grid,
#competitorAnalysisPage .monitoring-results,
#competitorAnalysisPage .monitoring-source-legend { border-radius: 6px; box-shadow: none; }
#competitorAnalysisPage .monitoring-summary-grid small,
#competitorAnalysisPage .monitoring-summary-grid p,
#competitorAnalysisPage .monitoring-view-note,
#competitorAnalysisPage .monitoring-source-legend { font-size: 12px; font-weight: 400; }
#competitorAnalysisPage .monitoring-summary-grid strong { font-weight: 650; }
#competitorAnalysisPage .monitoring-insight-grid article > div span { font-size: 11px; font-weight: 600; }
#competitorAnalysisPage .monitoring-insight-grid article > strong { font-size: 17px; font-weight: 600; }
#competitorAnalysisPage .monitoring-insight-grid article > p { font-size: 14px; }
#competitorAnalysisPage .monitoring-video-open { min-height: 124px; }
#competitorAnalysisPage .monitoring-copy small { font-size: 12px; font-weight: 550; }
#competitorAnalysisPage .monitoring-copy strong { font-size: 16px; font-weight: 600; }
#competitorAnalysisPage .monitoring-copy span { font-size: 13px; }
#competitorAnalysisPage .monitoring-metrics small,
#competitorAnalysisPage .monitoring-metrics > span { font-size: 11px; font-weight: 500; }

@media (max-width: 1050px) {
  #competitorAnalysisPage .competitor-main-hero,
  #competitorAnalysisPage .competitor-result-hero { grid-template-columns: 1fr; }
  #competitorAnalysisPage .competitor-topic-pulse { grid-template-columns: 1fr; }
  #competitorAnalysisPage .competitor-run-progress { grid-template-columns: 120px minmax(0,1fr); }
  #competitorAnalysisPage .competitor-run-steps { grid-column: 1/-1; }
}
@media (max-width: 720px) {
  #competitorAnalysisPage .competitor-page-inner { padding: 16px 12px 38px; }
  #competitorAnalysisPage .competitor-main-hero,
  #competitorAnalysisPage .competitor-result-hero { padding: 26px 20px; }
  #competitorAnalysisPage .competitor-main-copy h1,
  #competitorAnalysisPage .competitor-result-hero h1 { font-size: 31px; }
  #competitorAnalysisPage .competitor-main-copy p,
  #competitorAnalysisPage .competitor-result-hero p { font-size: 15px; }
  #competitorAnalysisPage .competitor-topic-pulse,
  #competitorAnalysisPage .competitor-main-start,
  #competitorAnalysisPage .competitor-main-results,
  #competitorAnalysisPage .competitor-result-section { padding: 21px 17px; }
  #competitorAnalysisPage .competitor-topic-pulse-form { grid-template-columns: 1fr; }
  #competitorAnalysisPage .competitor-topic-pulse-form > button { grid-column: auto; }
  #competitorAnalysisPage .competitor-main-periods button { min-height: 132px; }
  #competitorAnalysisPage .competitor-run-progress { grid-template-columns: 1fr; padding: 24px 18px; }
  #competitorAnalysisPage .competitor-run-visual { width: 94px; height: 94px; }
  #competitorAnalysisPage .competitor-run-note { grid-column: auto; }
  #competitorAnalysisPage .competitor-topic-result-page { width: calc(100% - 20px); }
  #competitorAnalysisPage .competitor-topic-report-hero,
  #competitorAnalysisPage .competitor-topic-report-section { padding: 21px 17px; }
  #competitorAnalysisPage .competitor-topic-coverage-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Market research gateway: two independent research rooms. */
#competitorAnalysisPage .market-research-hub { display: grid; gap: 18px; min-height: calc(100vh - 84px); align-content: center; }
#competitorAnalysisPage .market-research-hub-head { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 30px; align-items: end; border-bottom: 1px solid #bfcbd1; padding: 10px 4px 27px; }
#competitorAnalysisPage .market-research-hub-head > div > span { color: var(--research-teal); font-size: 12px; font-weight: 650; letter-spacing: .14em; }
#competitorAnalysisPage .market-research-hub-head h1 { margin: 11px 0 8px; color: #142633; font-size: clamp(38px,5vw,61px); font-weight: 620; line-height: 1.08; letter-spacing: -.045em; }
#competitorAnalysisPage .market-research-hub-head p { max-width: 730px; margin: 0; color: #526976; font-size: 16px; line-height: 1.7; }
#competitorAnalysisPage .market-research-hub-head aside { position: relative; display: grid; justify-items: end; gap: 2px; border-left: 1px solid #c9d3d8; padding: 12px 3px 6px 30px; }
#competitorAnalysisPage .market-research-hub-head aside i { position: absolute; left: 24px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: #18a998; box-shadow: 0 0 0 7px rgba(24,169,152,.1); }
#competitorAnalysisPage .market-research-hub-head aside span { color: #697c87; font-size: 11px; letter-spacing: .1em; }
#competitorAnalysisPage .market-research-hub-head aside strong { color: #162a37; font-size: 44px; font-weight: 650; line-height: 1; }
#competitorAnalysisPage .market-research-hub-head aside small { color: #71838e; font-size: 12px; }
#competitorAnalysisPage .market-research-gates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
#competitorAnalysisPage .market-research-gate { position: relative; overflow: hidden; display: grid; gap: 25px; min-height: 390px; border: 1px solid #bfcbd1; border-radius: 7px; padding: 29px 31px; color: #172a37; background: #fff; text-align: left; cursor: pointer; transition: border-color .18s ease,background .18s ease,transform .18s ease; }
#competitorAnalysisPage .market-research-gate::after { position: absolute; right: -58px; top: -58px; width: 150px; height: 150px; border: 1px solid #dce4e7; border-radius: 50%; content: ""; }
#competitorAnalysisPage .market-research-gate:hover { border-color: #5d878c; background: #f9fcfc; transform: translateY(-2px); }
#competitorAnalysisPage .market-research-gate:focus-visible { outline: 3px solid rgba(8,125,115,.22); outline-offset: 2px; }
#competitorAnalysisPage .market-research-gate > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dde4e7; padding-bottom: 16px; }
#competitorAnalysisPage .market-research-gate > header span { color: #607682; font-size: 11px; font-weight: 600; letter-spacing: .11em; }
#competitorAnalysisPage .market-research-gate > header b { border: 1px solid #c4d5da; border-radius: 3px; padding: 5px 8px; color: #256073; background: #edf4f6; font-size: 10px; font-weight: 650; letter-spacing: .08em; }
#competitorAnalysisPage .market-research-gate.is-topic > header b { color: #0b756c; background: #e8f5f2; }
#competitorAnalysisPage .market-research-gate > div > strong { display: block; max-width: 540px; font-size: clamp(27px,3vw,38px); font-weight: 620; line-height: 1.2; letter-spacing: -.035em; }
#competitorAnalysisPage .market-research-gate > div > p { max-width: 580px; margin: 12px 0 0; color: #526976; font-size: 15px; line-height: 1.7; }
#competitorAnalysisPage .market-research-gate dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: auto 0 0; border-block: 1px solid #e0e6e8; }
#competitorAnalysisPage .market-research-gate dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 13px; }
#competitorAnalysisPage .market-research-gate dl > div + div { border-left: 1px solid #e0e6e8; }
#competitorAnalysisPage .market-research-gate dt { color: #70828c; font-size: 12px; }
#competitorAnalysisPage .market-research-gate dd { margin: 0; color: #18303d; font-size: 21px; font-weight: 650; }
#competitorAnalysisPage .market-research-gate > footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#competitorAnalysisPage .market-research-gate > footer span { color: #6d808b; font-size: 12px; }
#competitorAnalysisPage .market-research-gate > footer b { color: #087d73; font-size: 14px; font-weight: 650; }
#competitorAnalysisPage .market-research-hub-note { display: flex; align-items: center; gap: 15px; border: 1px solid #cad5da; border-left: 4px solid #2c7681; border-radius: 5px; padding: 15px 18px; background: rgba(255,255,255,.72); }
#competitorAnalysisPage .market-research-hub-note span { color: #1a6c76; font-size: 11px; font-weight: 650; letter-spacing: .1em; }
#competitorAnalysisPage .market-research-hub-note p { margin: 0; color: #5b707c; font-size: 13px; line-height: 1.55; }

/* Dedicated domestic topic-research workbench. */
#competitorAnalysisPage .topic-research-workbench { display: grid; gap: 15px; }
#competitorAnalysisPage .topic-workbench-head { display: grid; grid-template-columns: auto minmax(0,1fr) 220px; gap: 22px; align-items: center; border: 1px solid #314955; border-radius: 7px; padding: 27px 30px; color: #fff; background-image: linear-gradient(rgba(120,178,179,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,178,179,.055) 1px,transparent 1px),linear-gradient(125deg,#0a1a27,#123642 72%,#0f4b49); background-size: 22px 22px,22px 22px,auto; }
#competitorAnalysisPage .topic-workbench-head > button { align-self: start; border: 1px solid #49616d; border-radius: 4px; padding: 9px 11px; color: #c1d0d6; background: rgba(255,255,255,.04); font-size: 12px; font-weight: 550; cursor: pointer; }
#competitorAnalysisPage .topic-workbench-head > div > span { color: #6fdbce; font-size: 11px; font-weight: 600; letter-spacing: .12em; }
#competitorAnalysisPage .topic-workbench-head h1 { margin: 8px 0 6px; font-size: clamp(30px,4vw,43px); font-weight: 620; letter-spacing: -.035em; }
#competitorAnalysisPage .topic-workbench-head p { margin: 0; color: #b8c8ce; font-size: 15px; line-height: 1.65; }
#competitorAnalysisPage .topic-workbench-head > aside { display: grid; gap: 5px; border-left: 1px solid #46606a; padding-left: 22px; }
#competitorAnalysisPage .topic-workbench-head > aside small { color: #8ca2ac; font-size: 11px; }
#competitorAnalysisPage .topic-workbench-head > aside strong { font-size: 17px; font-weight: 600; }
#competitorAnalysisPage .topic-workbench-head > aside span { display: flex; align-items: center; gap: 8px; color: #80dacd; font-size: 12px; }
#competitorAnalysisPage .topic-workbench-head > aside i { width: 8px; height: 8px; border-radius: 50%; background: #5de1cf; box-shadow: 0 0 0 5px rgba(93,225,207,.09); }
#competitorAnalysisPage .topic-workbench-command { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr); gap: 14px; }
#competitorAnalysisPage .topic-workbench-command > main,
#competitorAnalysisPage .topic-workbench-protocol,
#competitorAnalysisPage .topic-workbench-coverage,
#competitorAnalysisPage .topic-workbench-history,
#competitorAnalysisPage .topic-workbench-shared { border: 1px solid var(--research-line); border-radius: 6px; padding: 26px 28px; background: #fff; }
#competitorAnalysisPage .topic-workbench-command > main { border-top: 4px solid #167f77; }
#competitorAnalysisPage .topic-workbench-section-title > span { color: var(--research-teal); font-size: 11px; font-weight: 650; letter-spacing: .11em; }
#competitorAnalysisPage .topic-workbench-section-title h2 { margin: 7px 0 4px; color: #172c39; font-size: 23px; font-weight: 630; letter-spacing: -.02em; }
#competitorAnalysisPage .topic-workbench-section-title p { margin: 0; color: #6b7e89; font-size: 13px; line-height: 1.6; }
#competitorAnalysisPage .topic-workbench-form { margin-top: 22px; }
#competitorAnalysisPage .topic-workbench-form input { background: #fbfcfc; }
#competitorAnalysisPage .topic-workbench-source-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 15px; border-top: 1px solid #e2e8ea; padding-top: 14px; }
#competitorAnalysisPage .topic-workbench-source-tools span { border: 1px solid #bfd5d3; border-radius: 3px; padding: 5px 8px; color: #126f69; background: #eff7f5; font-size: 11px; font-weight: 550; }
#competitorAnalysisPage .topic-workbench-source-tools i { margin-left: auto; color: #748690; font-size: 11px; font-style: normal; }
#competitorAnalysisPage .topic-workbench-protocol { background: #f7f9f9; }
#competitorAnalysisPage .topic-workbench-protocol ol { display: grid; gap: 0; margin: 19px 0 0; padding: 0; list-style: none; }
#competitorAnalysisPage .topic-workbench-protocol li { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 10px 0; }
#competitorAnalysisPage .topic-workbench-protocol li + li { border-top: 1px solid #dfe6e8; }
#competitorAnalysisPage .topic-workbench-protocol li > b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #b8cccD; border-radius: 4px; color: #15776f; background: #fff; font-size: 12px; font-weight: 650; }
#competitorAnalysisPage .topic-workbench-protocol li div { display: grid; gap: 3px; }
#competitorAnalysisPage .topic-workbench-protocol li strong { color: #263d49; font-size: 14px; font-weight: 600; }
#competitorAnalysisPage .topic-workbench-protocol li span { color: #70818b; font-size: 12px; line-height: 1.45; }
#competitorAnalysisPage .topic-workbench-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--research-line); border-radius: 6px; background: #fff; }
#competitorAnalysisPage .topic-workbench-metrics article { padding: 19px 22px; }
#competitorAnalysisPage .topic-workbench-metrics article + article { border-left: 1px solid #dce4e7; }
#competitorAnalysisPage .topic-workbench-metrics span { color: #70838d; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
#competitorAnalysisPage .topic-workbench-metrics strong { display: block; margin: 5px 0 3px; color: #163441; font-size: 29px; font-weight: 650; }
#competitorAnalysisPage .topic-workbench-metrics p { margin: 0; color: #75858e; font-size: 12px; }
#competitorAnalysisPage .topic-workbench-coverage > div:last-child { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 19px; }
#competitorAnalysisPage .topic-workbench-coverage article { display: grid; align-content: start; min-height: 190px; border: 1px solid #d8e1e4; border-radius: 4px; padding: 17px; background: #fafcfc; }
#competitorAnalysisPage .topic-workbench-coverage article > b { color: #157b72; font-size: 10px; font-weight: 650; letter-spacing: .09em; }
#competitorAnalysisPage .topic-workbench-coverage article > strong { margin-top: 12px; color: #213a47; font-size: 16px; font-weight: 600; }
#competitorAnalysisPage .topic-workbench-coverage article > p { margin: 8px 0 15px; color: #647985; font-size: 13px; line-height: 1.6; }
#competitorAnalysisPage .topic-workbench-coverage article > span { align-self: end; width: fit-content; border-radius: 3px; padding: 5px 7px; color: #5e737e; background: #e9eff1; font-size: 11px; }
#competitorAnalysisPage .topic-workbench-history > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 19px; }
#competitorAnalysisPage .topic-workbench-history article { display: grid; grid-template-columns: minmax(0,1fr) auto; overflow: hidden; border: 1px solid #d5dfe2; border-radius: 4px; background: #fbfcfc; }
#competitorAnalysisPage .topic-workbench-history-open { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px 10px; border: 0; padding: 14px 15px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
#competitorAnalysisPage .topic-workbench-history-open:hover { background: #f0f7f6; }
#competitorAnalysisPage .topic-workbench-history-open > span { grid-row: 1/3; align-self: start; border-radius: 3px; padding: 4px 6px; color: #0c776e; background: #e3f2ef; font-size: 10px; font-weight: 600; }
#competitorAnalysisPage .topic-workbench-history-open > strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
#competitorAnalysisPage .topic-workbench-history-open > small { color: #74858e; font-size: 11px; }
#competitorAnalysisPage .topic-workbench-history-delete { border: 0; border-left: 1px solid #e0e6e8; padding: 0 13px; color: #a14b51; background: #fffafa; font-size: 11px; font-weight: 550; cursor: pointer; }
#competitorAnalysisPage .topic-workbench-history-delete:disabled { color: #a8b2b7; background: #f3f5f6; cursor: not-allowed; }
#competitorAnalysisPage .topic-workbench-empty { display: grid; grid-column: 1/-1; place-items: center; min-height: 150px; border: 1px dashed #cbd7db; border-radius: 4px; padding: 24px; background: #fafbfb; text-align: center; }
#competitorAnalysisPage .topic-workbench-empty strong { font-size: 15px; font-weight: 600; }
#competitorAnalysisPage .topic-workbench-empty p { margin: 6px 0 0; color: #71828b; font-size: 13px; }
#competitorAnalysisPage .topic-workbench-shared .competitor-server-report-grid { margin-top: 19px; }

#competitorAnalysisPage .youtube-research-workbench { display: grid; gap: 15px; }
#competitorAnalysisPage .youtube-workbench-head { display: grid; grid-template-columns: auto minmax(0,1fr) 220px; gap: 22px; align-items: center; border: 1px solid #314955; border-radius: 7px; padding: 27px 30px; color: #fff; background-image: linear-gradient(rgba(113,157,188,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(113,157,188,.055) 1px,transparent 1px),linear-gradient(125deg,#0a1828,#173349 72%,#15475a); background-size: 22px 22px,22px 22px,auto; }
#competitorAnalysisPage .youtube-workbench-head > button { align-self: start; border: 1px solid #49616d; border-radius: 4px; padding: 9px 11px; color: #c1d0d6; background: rgba(255,255,255,.04); font-size: 12px; font-weight: 550; cursor: pointer; }
#competitorAnalysisPage .youtube-workbench-head > div > span { color: #8ac7e4; font-size: 11px; font-weight: 600; letter-spacing: .12em; }
#competitorAnalysisPage .youtube-workbench-head h1 { margin: 8px 0 6px; font-size: clamp(30px,4vw,43px); font-weight: 620; letter-spacing: -.035em; }
#competitorAnalysisPage .youtube-workbench-head p { margin: 0; color: #b8c8d2; font-size: 15px; line-height: 1.65; }
#competitorAnalysisPage .youtube-workbench-head > aside { display: grid; gap: 5px; border-left: 1px solid #496370; padding-left: 22px; }
#competitorAnalysisPage .youtube-workbench-head > aside small { color: #8ca2ac; font-size: 11px; }
#competitorAnalysisPage .youtube-workbench-head > aside strong { font-size: 22px; font-weight: 620; }
#competitorAnalysisPage .youtube-workbench-head > aside button { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 5px; border: 1px solid #79cfc5; border-radius: 8px; padding: 9px 12px; background: #d9fff8; color: #123f48; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(4,31,43,.18); cursor: pointer; }
#competitorAnalysisPage .youtube-workbench-head > aside button:hover { border-color: #a9fff3; background: #effffc; transform: translateY(-1px); }
#competitorAnalysisPage .competitor-studio-nav-actions { display: flex; align-items: center; gap: 12px; }
#competitorAnalysisPage .competitor-studio-nav-actions > span { color: #8a98aa; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
#competitorAnalysisPage .competitor-studio-nav-actions > button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #97aaa3; border-radius: 8px; padding: 9px 13px; background: #fff; color: #214a48; font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(30,67,63,.08); cursor: pointer; }
#competitorAnalysisPage .competitor-studio-nav-actions > button:hover { border-color: #4e8c82; background: #f2fbf8; }
#competitorAnalysisPage .youtube-workbench-start,
#competitorAnalysisPage .youtube-workbench-history { border: 1px solid var(--research-line); border-radius: 6px; padding: 26px 28px; background: #fff; }
#competitorAnalysisPage .youtube-workbench-start { border-top: 4px solid #397fa1; }
#competitorAnalysisPage .youtube-workbench-custom { width: 100%; min-height: 45px; margin-top: 11px; border: 1px solid #b9ced8; border-radius: 4px; color: #245f7b; background: #f0f6f8; font-size: 13px; font-weight: 600; cursor: pointer; }
#competitorAnalysisPage .youtube-workbench-custom b { margin-left: 8px; }
#competitorAnalysisPage .youtube-workbench-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--research-line); border-radius: 6px; background: #fff; }
#competitorAnalysisPage .youtube-workbench-metrics article { min-width: 0; padding: 19px 22px; }
#competitorAnalysisPage .youtube-workbench-metrics article + article { border-left: 1px solid #dce4e7; }
#competitorAnalysisPage .youtube-workbench-metrics span { color: #70838d; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
#competitorAnalysisPage .youtube-workbench-metrics strong { display: block; overflow: hidden; margin: 5px 0 3px; color: #17384a; font-size: 27px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
#competitorAnalysisPage .youtube-workbench-metrics p { margin: 0; color: #75858e; font-size: 12px; }
#competitorAnalysisPage .youtube-workbench-history .competitor-report-grid,
#competitorAnalysisPage .youtube-workbench-history .competitor-server-report-grid { margin-top: 19px; }
#competitorAnalysisPage .competitor-tracking-progress { border: 1px solid var(--research-line); border-radius: 6px; padding: 25px 28px; background: #fff; }
#competitorAnalysisPage .competitor-tracking-progress > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
#competitorAnalysisPage .competitor-tracking-progress > header span { color: #218078; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
#competitorAnalysisPage .competitor-tracking-progress > header h2 { margin: 6px 0 4px; color: #173244; font-size: 22px; font-weight: 650; }
#competitorAnalysisPage .competitor-tracking-progress > header p { margin: 0; color: #70828c; font-size: 12px; }
#competitorAnalysisPage .competitor-collection-health { display: grid; max-width: 340px; gap: 5px; justify-items: end; text-align: right; }
#competitorAnalysisPage .competitor-collection-health b { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 10px; color: #16665f; background: #e4f5f1; font-size: 11px; }
#competitorAnalysisPage .competitor-collection-health b i { width: 7px; height: 7px; border-radius: 50%; background: #1fa08f; box-shadow: 0 0 0 4px rgba(31, 160, 143, .12); }
#competitorAnalysisPage .competitor-collection-health.working b { color: #76591e; background: #fff3d8; }
#competitorAnalysisPage .competitor-collection-health.working b i { background: #d49a2c; box-shadow: 0 0 0 4px rgba(212, 154, 44, .13); }
#competitorAnalysisPage .competitor-collection-health.attention b { color: #944d38; background: #fff0ea; }
#competitorAnalysisPage .competitor-collection-health.attention b i { background: #cf6b4e; box-shadow: 0 0 0 4px rgba(207, 107, 78, .13); }
#competitorAnalysisPage .competitor-collection-health small { color: #73878e; font-size: 10px; line-height: 1.65; }
#competitorAnalysisPage .competitor-tracking-counts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 18px; border: 1px solid #dce6e7; border-radius: 7px; overflow: hidden; }
#competitorAnalysisPage .competitor-tracking-counts article { padding: 15px 17px; background: #f8fbfb; }
#competitorAnalysisPage .competitor-tracking-counts article + article { border-left: 1px solid #dce6e7; }
#competitorAnalysisPage .competitor-tracking-counts span { display: block; color: #75868e; font-size: 10px; }
#competitorAnalysisPage .competitor-tracking-counts strong { display: block; margin-top: 5px; color: #173f4a; font-size: 22px; font-weight: 650; }
#competitorAnalysisPage .competitor-tracking-counts article:nth-child(3) strong { font-size: 15px; line-height: 1.35; }
#competitorAnalysisPage .competitor-tracking-counts small { display: block; margin-top: 4px; color: #84939a; font-size: 9px; }
#competitorAnalysisPage .competitor-tracking-progress > ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; }
#competitorAnalysisPage .competitor-tracking-progress > ol li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; border: 1px solid #e1e9ea; border-radius: 7px; padding: 13px; }
#competitorAnalysisPage .competitor-tracking-progress > ol li > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: #2b7f7a; font-size: 11px; }
#competitorAnalysisPage .competitor-tracking-progress > ol strong { display: block; color: #244650; font-size: 12px; }
#competitorAnalysisPage .competitor-tracking-progress > ol small { display: block; margin-top: 4px; color: #778a91; font-size: 10px; line-height: 1.45; }

@media (max-width: 1080px) {
  #competitorAnalysisPage .market-research-gates { grid-template-columns: 1fr; }
  #competitorAnalysisPage .market-research-gate { min-height: 330px; }
  #competitorAnalysisPage .topic-workbench-command { grid-template-columns: 1fr; }
  #competitorAnalysisPage .topic-workbench-coverage > div:last-child { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  #competitorAnalysisPage .market-research-hub { min-height: 0; align-content: start; }
  #competitorAnalysisPage .market-research-hub-head { grid-template-columns: 1fr; padding-top: 6px; }
  #competitorAnalysisPage .market-research-hub-head h1 { font-size: 39px; }
  #competitorAnalysisPage .market-research-hub-head aside { display: none; }
  #competitorAnalysisPage .market-research-gate { min-height: 350px; padding: 23px 20px; }
  #competitorAnalysisPage .market-research-gate > div > strong { font-size: 29px; }
  #competitorAnalysisPage .market-research-gate > footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  #competitorAnalysisPage .market-research-hub-note { align-items: flex-start; }
  #competitorAnalysisPage .topic-workbench-head { grid-template-columns: 1fr; padding: 22px 18px; }
  #competitorAnalysisPage .topic-workbench-head > button { width: fit-content; }
  #competitorAnalysisPage .topic-workbench-head > aside { border-top: 1px solid #46606a; border-left: 0; padding: 14px 0 0; }
  #competitorAnalysisPage .topic-workbench-command > main,
  #competitorAnalysisPage .topic-workbench-protocol,
  #competitorAnalysisPage .topic-workbench-coverage,
  #competitorAnalysisPage .topic-workbench-history,
  #competitorAnalysisPage .topic-workbench-shared { padding: 21px 17px; }
  #competitorAnalysisPage .topic-workbench-source-tools i { width: 100%; margin-left: 0; }
  #competitorAnalysisPage .topic-workbench-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #competitorAnalysisPage .topic-workbench-metrics article:nth-child(3) { border-top: 1px solid #dce4e7; border-left: 0; }
  #competitorAnalysisPage .topic-workbench-metrics article:nth-child(4) { border-top: 1px solid #dce4e7; }
  #competitorAnalysisPage .topic-workbench-coverage > div:last-child,
  #competitorAnalysisPage .topic-workbench-history > div { grid-template-columns: 1fr; }
  #competitorAnalysisPage .youtube-workbench-head { grid-template-columns: 1fr; padding: 22px 18px; }
  #competitorAnalysisPage .youtube-workbench-head > button { width: fit-content; }
  #competitorAnalysisPage .youtube-workbench-head > aside { border-top: 1px solid #496370; border-left: 0; padding: 14px 0 0; }
  #competitorAnalysisPage .competitor-studio-nav-actions { width: 100%; justify-content: space-between; }
  #competitorAnalysisPage .youtube-workbench-start,
  #competitorAnalysisPage .youtube-workbench-history,
  #competitorAnalysisPage .competitor-tracking-progress { padding: 21px 17px; }
  #competitorAnalysisPage .competitor-benchmark-periods { grid-template-columns: 1fr; }
  #competitorAnalysisPage .competitor-tracking-progress > header { align-items: flex-start; flex-direction: column; }
  #competitorAnalysisPage .competitor-collection-health { max-width: none; justify-items: start; text-align: left; }
  #competitorAnalysisPage .competitor-tracking-counts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #competitorAnalysisPage .competitor-tracking-counts article:nth-child(3) { border-top: 1px solid #dce6e7; border-left: 0; }
  #competitorAnalysisPage .competitor-tracking-counts article:nth-child(4) { border-top: 1px solid #dce6e7; }
  #competitorAnalysisPage .competitor-tracking-progress > ol { grid-template-columns: 1fr; }
  #competitorAnalysisPage .youtube-workbench-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #competitorAnalysisPage .youtube-workbench-metrics article:nth-child(3) { border-top: 1px solid #dce4e7; border-left: 0; }
  #competitorAnalysisPage .youtube-workbench-metrics article:nth-child(4) { border-top: 1px solid #dce4e7; }
}

/* Topic pulse decision and evidence clarity. */
#competitorAnalysisPage .competitor-topic-heat-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: -3px 0 13px; border: 1px solid #dce5e7; border-radius: 6px; padding: 10px 12px; background: #f8fafa; }
#competitorAnalysisPage .competitor-topic-heat-legend span { display: inline-flex; align-items: center; gap: 5px; color: #5c717b; font-size: 11px; }
#competitorAnalysisPage .competitor-topic-heat-legend span b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 4px; color: #fff; background: #70828c; font-size: 10px; }
#competitorAnalysisPage .competitor-topic-heat-legend span:first-child b { background: #c83b42; }
#competitorAnalysisPage .competitor-topic-heat-legend span:nth-child(2) b { background: #df7241; }
#competitorAnalysisPage .competitor-topic-heat-legend span:nth-child(3) b { background: #c99527; }
#competitorAnalysisPage .competitor-topic-heat-legend p { flex: 1 1 320px; margin: 0; color: #71828a; font-size: 11px; text-align: right; }
#competitorAnalysisPage .competitor-topic-reaction-grid article > header > em { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 6px; min-width: 76px; border-radius: 6px; padding: 8px 10px; color: #6b7b83; background: #eef2f3; font-size: 11px; font-style: normal; text-align: right; }
#competitorAnalysisPage .competitor-topic-reaction-grid article > header > em i { grid-row: 1/3; color: #fff; font-size: 22px; font-style: normal; line-height: 1; }
#competitorAnalysisPage .competitor-topic-reaction-grid article > header > em small { color: inherit; font-size: 10px; }
#competitorAnalysisPage .competitor-topic-reaction-grid article.heat-s { border-left: 5px solid #c83b42; }
#competitorAnalysisPage .competitor-topic-reaction-grid article.heat-a { border-left: 5px solid #df7241; }
#competitorAnalysisPage .competitor-topic-reaction-grid article.heat-b { border-left: 5px solid #c99527; }
#competitorAnalysisPage .competitor-topic-reaction-grid article.heat-c { border-left: 5px solid #4b8a88; }
#competitorAnalysisPage .competitor-topic-reaction-grid article.heat-d { border-left: 5px solid #88979e; }
#competitorAnalysisPage .competitor-topic-reaction-grid article.heat-s > header > em { color: #fff; background: #c83b42; }
#competitorAnalysisPage .competitor-topic-reaction-grid article.heat-a > header > em { color: #fff; background: #df7241; }
#competitorAnalysisPage .competitor-topic-reaction-grid article.heat-b > header > em { color: #fff; background: #c99527; }
#competitorAnalysisPage .competitor-topic-reaction-grid article.heat-c > header > em { color: #fff; background: #4b8a88; }
#competitorAnalysisPage .competitor-topic-reaction-grid article.heat-d > header > em { color: #fff; background: #88979e; }
#competitorAnalysisPage .competitor-topic-heat-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 13px 0 0; border: 1px solid #e0e7e9; border-radius: 5px; background: #f8fafa; }
#competitorAnalysisPage .competitor-topic-heat-metrics span { padding: 9px 11px; color: #71828a; font-size: 11px; }
#competitorAnalysisPage .competitor-topic-heat-metrics span + span { border-left: 1px solid #e0e7e9; }
#competitorAnalysisPage .competitor-topic-heat-metrics b { display: block; margin-top: 2px; color: #264553; font-size: 15px; }

#competitorAnalysisPage details.competitor-topic-verified-posts { padding: 0; }
#competitorAnalysisPage .competitor-topic-verified-posts > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 25px; cursor: pointer; list-style: none; }
#competitorAnalysisPage .competitor-topic-verified-posts > summary::-webkit-details-marker { display: none; }
#competitorAnalysisPage .competitor-topic-verified-posts > summary span { color: var(--research-teal); font-size: 11px; font-weight: 600; letter-spacing: .11em; }
#competitorAnalysisPage .competitor-topic-verified-posts > summary h3 { margin: 5px 0 2px; color: #203e52; font-size: 22px; }
#competitorAnalysisPage .competitor-topic-verified-posts > summary p { margin: 0; color: #74858d; font-size: 12px; }
#competitorAnalysisPage .competitor-topic-verified-posts > summary > strong { color: #167a72; font-size: 13px; }
#competitorAnalysisPage .competitor-topic-verified-posts[open] > summary { border-bottom: 1px solid #e0e7e9; background: #f6faf9; }
#competitorAnalysisPage .competitor-topic-verified-posts > .competitor-topic-post-list { padding: 20px 24px 24px; }
#competitorAnalysisPage .competitor-topic-comment-reactions.is-unverified strong { line-height: 1.55; }
#competitorAnalysisPage .competitor-topic-comment-reactions.is-empty { color: #647a82; background: #f3f6f6; }

#competitorAnalysisPage .competitor-topic-authority-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#competitorAnalysisPage .competitor-topic-authority-list article { display: flex; min-width: 0; flex-direction: column; border: 1px solid #dce5e8; border-radius: 6px; padding: 16px; background: #fafcfc; }
#competitorAnalysisPage .competitor-topic-authority-list article > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; }
#competitorAnalysisPage .competitor-topic-authority-list article > header span { border-radius: 4px; padding: 5px 7px; color: #155f75; background: #e8f2f6; font-size: 10px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-authority-list article > header b { overflow: hidden; color: #35535e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#competitorAnalysisPage .competitor-topic-authority-list article > header small { color: #829096; font-size: 10px; }
#competitorAnalysisPage .competitor-topic-authority-list h4 { margin: 12px 0 7px; font-size: 15px; line-height: 1.45; }
#competitorAnalysisPage .competitor-topic-authority-list h4 a { color: #203e52; text-decoration: none; }
#competitorAnalysisPage .competitor-topic-authority-list > article > p { margin: 0; color: #516873; font-size: 12px; line-height: 1.65; }
#competitorAnalysisPage .competitor-topic-authority-list ul { display: grid; gap: 4px; margin: 11px 0 0; padding-left: 18px; color: #405b68; font-size: 11px; line-height: 1.55; }
#competitorAnalysisPage .competitor-topic-authority-list footer { margin-top: auto; border-top: 1px solid #e6ecee; padding-top: 11px; }
#competitorAnalysisPage .competitor-topic-authority-list footer span { color: #16756d; font-size: 10px; font-weight: 650; }
#competitorAnalysisPage .competitor-topic-authority-list footer p { margin: 5px 0 0; color: #74858d; font-size: 11px; line-height: 1.5; }

#competitorAnalysisPage .competitor-topic-community-table { min-width: 820px; }
#competitorAnalysisPage .competitor-topic-community-table > div { display: grid; grid-template-columns: 130px 150px minmax(220px,1fr) minmax(220px,1fr) 145px; align-items: stretch; }
#competitorAnalysisPage .competitor-topic-community-table > div > * { min-width: 0; margin: 0; border-bottom: 1px solid #e7edef; padding: 13px 12px; color: #405966; font-size: 12px; line-height: 1.55; }
#competitorAnalysisPage .competitor-topic-community-table > div > * + * { border-left: 1px solid #e7edef; }
#competitorAnalysisPage .competitor-topic-community-table .is-head { position: sticky; top: 0; z-index: 1; background: #edf3f4; }
#competitorAnalysisPage .competitor-topic-community-table .is-head b { color: #49626d; font-size: 11px; }
#competitorAnalysisPage .competitor-topic-community-table > div > strong { color: #203f50; font-size: 14px; }
#competitorAnalysisPage .competitor-topic-community-table > div > span { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
#competitorAnalysisPage .competitor-topic-community-table > div > span > b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 4px; color: #fff; background: #607982; }
#competitorAnalysisPage .competitor-topic-community-table > div > span small { width: 100%; color: #829096; font-size: 10px; }
#competitorAnalysisPage .competitor-topic-community-table aside .competitor-topic-evidence-popover { margin: 0; }

#competitorAnalysisPage .competitor-topic-editorial-decision { border-top: 5px solid #147b72; background: linear-gradient(180deg,#fff,#f7fbfa); }
#competitorAnalysisPage .competitor-topic-editorial-decision > header > strong { border-radius: 5px; padding: 8px 11px; color: #fff; background: #177b72; }
#competitorAnalysisPage .competitor-topic-decision-hero { border-radius: 7px; padding: 20px 22px; color: #fff; background: linear-gradient(120deg,#123846,#176d68); }
#competitorAnalysisPage .competitor-topic-decision-hero span { color: #8fe7d9; font-size: 11px; font-weight: 650; letter-spacing: .1em; }
#competitorAnalysisPage .competitor-topic-decision-hero h4 { margin: 7px 0 6px; font-size: 22px; line-height: 1.45; }
#competitorAnalysisPage .competitor-topic-decision-hero p { margin: 0; color: #d6e7e8; font-size: 13px; line-height: 1.6; }
#competitorAnalysisPage .competitor-topic-decision-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 11px; }
#competitorAnalysisPage .competitor-topic-decision-grid article { display: flex; flex-direction: column; border: 1px solid #dbe5e6; border-radius: 7px; padding: 18px; background: #fff; }
#competitorAnalysisPage .competitor-topic-decision-grid article.is-lead { border-color: #80bbb3; box-shadow: inset 4px 0 #168078; }
#competitorAnalysisPage .competitor-topic-decision-grid article > span { color: #177a72; font-size: 10px; font-weight: 650; letter-spacing: .08em; }
#competitorAnalysisPage .competitor-topic-decision-grid article > strong { margin: 8px 0 6px; color: #203f4e; font-size: 18px; line-height: 1.4; }
#competitorAnalysisPage .competitor-topic-decision-grid article > p { margin: 0 0 14px; color: #5d717a; font-size: 12px; line-height: 1.6; }
#competitorAnalysisPage .competitor-topic-decision-grid article > small { margin-top: auto; color: #829096; font-size: 10px; }
#competitorAnalysisPage .competitor-topic-decision-grid article > b { margin-top: 4px; color: #315665; font-size: 12px; line-height: 1.55; }
#competitorAnalysisPage .competitor-topic-editorial-decision blockquote { margin: 11px 0 0; border: 1px solid #cbdcdd; border-left: 5px solid #397a8b; border-radius: 6px; padding: 15px 17px; background: #f2f7f8; }
#competitorAnalysisPage .competitor-topic-editorial-decision blockquote span { display: block; color: #66808a; font-size: 10px; }
#competitorAnalysisPage .competitor-topic-editorial-decision blockquote strong { display: block; margin-top: 4px; color: #244957; font-size: 16px; }
#competitorAnalysisPage .competitor-topic-decision-cautions { margin-top: 10px; border-radius: 6px; padding: 14px 16px; color: #74543e; background: #fff6eb; }
#competitorAnalysisPage .competitor-topic-decision-cautions ul { margin: 7px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }
#competitorAnalysisPage .competitor-topic-decision-authorities { display: grid; gap: 5px; margin-top: 12px; }
#competitorAnalysisPage .competitor-topic-decision-authorities strong { color: #526d76; font-size: 11px; }
#competitorAnalysisPage .competitor-topic-decision-authorities a { width: fit-content; color: #15766e; font-size: 12px; text-decoration: none; }
#competitorAnalysisPage .competitor-topic-score-details > summary { font-size: 13px; }
#competitorAnalysisPage .competitor-topic-score-details > .competitor-topic-score-grid { padding: 0 15px 15px; }
#competitorAnalysisPage .competitor-topic-document-actions { position: sticky; bottom: 12px; z-index: 5; border: 1px solid #cbdadb; border-radius: 7px; padding: 10px; background: rgba(255,255,255,.96); box-shadow: 0 10px 32px rgba(21,54,66,.14); backdrop-filter: blur(10px); }
#competitorAnalysisPage .competitor-topic-confidence-platforms { border: 1px solid #dde6e8; border-radius: 5px; padding: 10px 12px; background: #fff; }
#competitorAnalysisPage .competitor-topic-confidence-groups { display: grid; gap: 9px; margin-top: 12px; }
#competitorAnalysisPage .competitor-topic-confidence-groups article { overflow: hidden; border: 1px solid #dce5e7; border-radius: 6px; background: #fff; }
#competitorAnalysisPage .competitor-topic-confidence-groups article > header { display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #e6edef; padding: 12px 14px; }
#competitorAnalysisPage .competitor-topic-confidence-groups article > header i { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; color: #fff; background: #778991; font-size: 14px; font-style: normal; font-weight: 750; }
#competitorAnalysisPage .competitor-topic-confidence-groups article > header strong { display: block; color: #274652; font-size: 13px; }
#competitorAnalysisPage .competitor-topic-confidence-groups article > header span { display: block; margin-top: 2px; color: #71838b; font-size: 11px; }
#competitorAnalysisPage .competitor-topic-confidence-groups article > ul { display: grid; gap: 5px; margin: 0; padding: 12px 17px 13px 32px; }
#competitorAnalysisPage .competitor-topic-confidence-groups article > ul li { margin: 0; color: #536a75; font-size: 12px; line-height: 1.55; }
#competitorAnalysisPage .competitor-topic-confidence-groups .is-recovered { border-color: #b9ddd5; }
#competitorAnalysisPage .competitor-topic-confidence-groups .is-recovered > header { background: #edf8f5; }
#competitorAnalysisPage .competitor-topic-confidence-groups .is-recovered > header i { background: #18816f; }
#competitorAnalysisPage .competitor-topic-confidence-groups .is-limited { border-color: #ead3b9; }
#competitorAnalysisPage .competitor-topic-confidence-groups .is-limited > header { background: #fff8ed; }
#competitorAnalysisPage .competitor-topic-confidence-groups .is-limited > header i { background: #c77b2e; }
#competitorAnalysisPage .competitor-topic-confidence-groups .is-optional { border-color: #cddde8; }
#competitorAnalysisPage .competitor-topic-confidence-groups .is-optional > header { background: #f1f7fa; }
#competitorAnalysisPage .competitor-topic-confidence-groups .is-optional > header i { background: #477f9c; }

@media (max-width: 900px) {
  #competitorAnalysisPage .competitor-topic-authority-list,
  #competitorAnalysisPage .competitor-topic-decision-grid { grid-template-columns: 1fr; }
  #competitorAnalysisPage .competitor-topic-heat-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #competitorAnalysisPage .competitor-topic-heat-metrics span:nth-child(3) { border-top: 1px solid #e0e7e9; border-left: 0; }
  #competitorAnalysisPage .competitor-topic-heat-metrics span:nth-child(4) { border-top: 1px solid #e0e7e9; }
}

@media (max-width: 620px) {
  #competitorAnalysisPage .competitor-topic-heat-legend p { text-align: left; }
  #competitorAnalysisPage .competitor-topic-reaction-grid article > header { align-items: flex-start; }
  #competitorAnalysisPage .competitor-topic-reaction-grid article > header > em { min-width: 64px; }
  #competitorAnalysisPage .competitor-topic-authority-list article > header { grid-template-columns: auto 1fr; }
  #competitorAnalysisPage .competitor-topic-authority-list article > header small { grid-column: 2; }
  #competitorAnalysisPage .competitor-topic-verified-posts > summary { align-items: flex-start; flex-direction: column; padding: 18px; }
  #competitorAnalysisPage .competitor-topic-verified-posts > .competitor-topic-post-list { padding: 14px; }
  #competitorAnalysisPage .competitor-topic-document-actions { position: static; }
}

/* Market research shared shell and local tracking desk. */
#competitorAnalysisPage.page { padding: 0; }
#competitorAnalysisPage .competitor-page-inner {
  width: 100%;
  max-width: 1640px;
  min-height: 100vh;
  padding: clamp(24px, 3vw, 48px) clamp(22px, 3.6vw, 58px) 64px;
}
#competitorAnalysisPage #competitorDashboardView,
#competitorAnalysisPage #competitorLegacyDashboard,
#competitorAnalysisPage #competitorNewAnalysisView,
#competitorAnalysisPage #competitorChannelManageView,
#competitorAnalysisPage #competitorResultsView { width: 100%; min-width: 0; }

#competitorAnalysisPage .competitor-youtube-home { display: grid; gap: 22px; }
#competitorAnalysisPage .competitor-youtube-home[hidden] { display: none; }
#competitorAnalysisPage .competitor-youtube-home-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  overflow: hidden;
  min-height: 236px;
  border: 1px solid rgba(75, 111, 130, .8);
  border-radius: 18px;
  padding: 38px 42px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 16%, rgba(73, 218, 199, .19), transparent 25%),
    linear-gradient(rgba(132, 180, 194, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 180, 194, .055) 1px, transparent 1px),
    linear-gradient(128deg, #091827 0%, #102d3e 65%, #11434a 100%);
  background-size: auto, 24px 24px, 24px 24px, auto;
  box-shadow: 0 24px 54px rgba(9, 30, 43, .18);
}
#competitorAnalysisPage .competitor-view-back {
  align-self: start;
  border: 1px solid rgba(176, 210, 217, .3);
  border-radius: 9px;
  padding: 10px 13px;
  color: #d7e5e8;
  background: rgba(255, 255, 255, .055);
  font-size: 13px;
  font-weight: 650;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
#competitorAnalysisPage .competitor-view-back:hover { border-color: rgba(158, 236, 224, .7); background: rgba(117, 219, 202, .12); transform: translateX(-2px); }
#competitorAnalysisPage .competitor-youtube-home-title > span { color: #7de0d1; font-size: 11px; font-weight: 650; letter-spacing: .14em; }
#competitorAnalysisPage .competitor-youtube-home-title h1 { margin: 12px 0 10px; font-size: clamp(38px, 4.1vw, 58px); font-weight: 640; line-height: 1.05; letter-spacing: -.045em; }
#competitorAnalysisPage .competitor-youtube-home-title p { max-width: 720px; margin: 0; color: #bdccd2; font-size: 16px; line-height: 1.72; }
#competitorAnalysisPage .competitor-youtube-home-head .competitor-hero-actions { align-self: end; }
#competitorAnalysisPage .competitor-youtube-home-head .competitor-secondary-action,
#competitorAnalysisPage .competitor-youtube-home-head .competitor-primary-action { height: 48px; border-radius: 10px; box-shadow: none; font-size: 14px; font-weight: 700; }
#competitorAnalysisPage .competitor-youtube-home-head .competitor-secondary-action { border-color: rgba(199, 222, 227, .32); color: #e5f0f1; background: rgba(255, 255, 255, .07); }
#competitorAnalysisPage .competitor-youtube-home-head .competitor-primary-action { border: 1px solid #7ad8cc; color: #082d2d; background: linear-gradient(135deg, #9bf0e3, #63cfc4); }
#competitorAnalysisPage .competitor-youtube-home-head .competitor-curated-main-action { border-color: #c6b1ff; color: #24153d; background: linear-gradient(135deg, #ded3ff, #ac91f3); }
#competitorAnalysisPage .competitor-youtube-home-head .competitor-curated-main-action > span { font-size: 15px; line-height: 1; }

#competitorAnalysisPage .competitor-youtube-home > .competitor-summary-grid { gap: 14px; }
#competitorAnalysisPage .competitor-youtube-home .competitor-stat-card,
#competitorAnalysisPage .competitor-youtube-home > .competitor-section {
  border-color: #cbd7dc;
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px rgba(23, 52, 68, .07);
}
#competitorAnalysisPage .competitor-youtube-home .competitor-stat-card { min-height: 118px; padding: 23px 24px; }
#competitorAnalysisPage .competitor-youtube-home .competitor-stat-icon { width: 48px; height: 48px; border-radius: 14px; }
#competitorAnalysisPage .competitor-youtube-home .competitor-stat-card strong { font-size: 29px; font-weight: 680; }
#competitorAnalysisPage .competitor-youtube-home > .competitor-section { padding: 29px 30px; }
#competitorAnalysisPage .competitor-youtube-home .competitor-section-head { margin-bottom: 22px; }
#competitorAnalysisPage .competitor-youtube-home .competitor-section-head h2 { color: #172d3a; font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
#competitorAnalysisPage .competitor-youtube-home .competitor-section-head button { border: 1px solid #b7cfce; border-radius: 9px; padding: 10px 14px; color: #166c68; background: #f2f9f7; }
#competitorAnalysisPage .competitor-youtube-home .competitor-quick-card { min-height: 142px; border-color: #d2dde2; border-radius: 14px; padding: 24px; box-shadow: none; }
#competitorAnalysisPage .competitor-youtube-home .competitor-quick-card:hover { border-color: #62aaa5; box-shadow: 0 15px 32px rgba(28, 90, 88, .1); transform: translateY(-2px); }
#competitorAnalysisPage .competitor-youtube-home .competitor-quick-icon { width: 50px; height: 50px; border-radius: 14px; }

#competitorAnalysisPage .competitor-tracking-method { margin-top: 14px; border-top: 1px solid #e1e8ea; }
#competitorAnalysisPage .competitor-tracking-method > summary { padding: 14px 2px 0; color: #4e6b73; font-size: 12px; font-weight: 650; cursor: pointer; }
#competitorAnalysisPage .competitor-tracking-method > ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
#competitorAnalysisPage .competitor-tracking-method > ol li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; border: 1px solid #e1e9ea; border-radius: 8px; padding: 13px; }
#competitorAnalysisPage .competitor-tracking-method > ol li > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: #2b7f7a; font-size: 11px; }
#competitorAnalysisPage .competitor-tracking-method > ol strong { display: block; color: #244650; font-size: 12px; }
#competitorAnalysisPage .competitor-tracking-method > ol small { display: block; margin-top: 4px; color: #778a91; font-size: 10px; line-height: 1.45; }

#competitorAnalysisPage .competitor-tracking-queue { overflow: hidden; border: 1px solid #c7d5da; border-radius: 16px; background: rgba(255, 255, 255, .97); box-shadow: 0 18px 42px rgba(19, 52, 67, .08); }
#competitorAnalysisPage .competitor-tracking-queue-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; padding: 29px 31px 22px; }
#competitorAnalysisPage .competitor-tracking-queue-head > div:first-child > span { color: #147b73; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
#competitorAnalysisPage .competitor-tracking-queue-head h2 { margin: 8px 0 5px; color: #152e3c; font-size: 26px; font-weight: 670; letter-spacing: -.03em; }
#competitorAnalysisPage .competitor-tracking-queue-head p { margin: 0; color: #687d88; font-size: 13px; line-height: 1.6; }
#competitorAnalysisPage .competitor-tracking-ring { display: grid; width: 104px; height: 104px; place-content: center; justify-self: end; border-radius: 50%; background: radial-gradient(circle at center, #fff 0 58%, transparent 60%), conic-gradient(#15887f 0 var(--tracking-completion), #dfe9e9 var(--tracking-completion) 360deg); text-align: center; }
#competitorAnalysisPage .competitor-tracking-ring strong { color: #173d48; font-size: 23px; font-weight: 720; line-height: 1; }
#competitorAnalysisPage .competitor-tracking-ring small { margin-top: 4px; color: #75868d; font-size: 9px; }
#competitorAnalysisPage .competitor-tracking-visual-summary { display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: 26px; align-items: center; border-top: 1px solid #e0e8ea; border-bottom: 1px solid #dce5e8; padding: 15px 31px; background: #f7faf9; }
#competitorAnalysisPage .competitor-tracking-progress-bar { overflow: hidden; height: 8px; border-radius: 999px; background: #dce7e7; }
#competitorAnalysisPage .competitor-tracking-progress-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #166f76, #23ad9c); }
#competitorAnalysisPage .competitor-tracking-visual-summary dl { display: flex; gap: 22px; margin: 0; }
#competitorAnalysisPage .competitor-tracking-visual-summary dl div { display: flex; align-items: baseline; gap: 6px; }
#competitorAnalysisPage .competitor-tracking-visual-summary dt { color: #71848c; font-size: 10px; }
#competitorAnalysisPage .competitor-tracking-visual-summary dd { margin: 0; color: #284c57; font-size: 13px; font-weight: 680; }
#competitorAnalysisPage .competitor-tracking-filters { display: flex; gap: 8px; overflow-x: auto; padding: 18px 31px; }
#competitorAnalysisPage .competitor-tracking-filters button { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; border: 1px solid #ccdadd; border-radius: 999px; padding: 8px 12px; color: #526b75; background: #fff; font-size: 12px; }
#competitorAnalysisPage .competitor-tracking-filters button b { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 999px; padding: 0 6px; color: #567079; background: #edf3f3; font-size: 10px; }
#competitorAnalysisPage .competitor-tracking-filters button.active { border-color: #267f7b; color: #fff; background: #174d57; box-shadow: 0 7px 16px rgba(20, 75, 83, .16); }
#competitorAnalysisPage .competitor-tracking-filters button.active b { color: #154f54; background: #bfeee5; }
#competitorAnalysisPage .competitor-tracking-table { border-top: 1px solid #e1e8ea; }
#competitorAnalysisPage .competitor-tracking-table-head,
#competitorAnalysisPage .competitor-tracking-row { display: grid; grid-template-columns: minmax(300px, 1.7fr) minmax(150px, .72fr) minmax(120px, .52fr) minmax(145px, .62fr) 126px; gap: 18px; align-items: center; }
#competitorAnalysisPage .competitor-tracking-table-head { padding: 11px 31px; color: #75878f; background: #f5f8f8; font-size: 10px; font-weight: 650; letter-spacing: .045em; }
#competitorAnalysisPage .competitor-tracking-row { width: 100%; min-height: 92px; border: 0; border-top: 1px solid #e5ebed; padding: 15px 31px; color: inherit; background: #fff; font: inherit; text-align: left; cursor: pointer; }
#competitorAnalysisPage .competitor-tracking-row:hover { background: #f7fbfa; }
#competitorAnalysisPage .competitor-tracking-row:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(22, 139, 130, .22); outline-offset: -3px; }
#competitorAnalysisPage .competitor-tracking-video { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 13px; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
#competitorAnalysisPage .competitor-tracking-video > img,
#competitorAnalysisPage .competitor-tracking-video > span[aria-hidden="true"] { width: 88px; height: 50px; border-radius: 9px; object-fit: cover; }
#competitorAnalysisPage .competitor-tracking-video > span[aria-hidden="true"] { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #183d4d, #25867d); }
#competitorAnalysisPage .competitor-tracking-video > span:not([aria-hidden]) { min-width: 0; }
#competitorAnalysisPage .competitor-tracking-video strong { display: block; overflow: hidden; color: #173440; font-size: 13px; font-weight: 650; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
#competitorAnalysisPage .competitor-tracking-video small,
#competitorAnalysisPage .competitor-tracking-latest small,
#competitorAnalysisPage .competitor-tracking-next small { display: block; overflow: hidden; margin-top: 5px; color: #7b8c93; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#competitorAnalysisPage .competitor-tracking-row-status > span { display: inline-flex; border-radius: 999px; padding: 5px 8px; color: #176c67; background: #e4f4f1; font-size: 10px; font-weight: 650; }
#competitorAnalysisPage .competitor-tracking-row-status > span.completed { color: #345e70; background: #e8f0f4; }
#competitorAnalysisPage .competitor-tracking-row-status > span.waiting { color: #546d76; background: #edf3f4; }
#competitorAnalysisPage .competitor-tracking-row-status > span.unavailable { color: #756b82; background: #f1edf5; }
#competitorAnalysisPage .competitor-tracking-row-status > em { display: block; width: fit-content; margin-top: 5px; color: #9a5728; font-size: 9px; font-style: normal; font-weight: 650; }
#competitorAnalysisPage .competitor-tracking-row-status > div { overflow: hidden; height: 4px; margin-top: 8px; border-radius: 999px; background: #e1e9e9; }
#competitorAnalysisPage .competitor-tracking-row-status > div i { display: block; height: 100%; border-radius: inherit; background: #22958a; }
#competitorAnalysisPage .competitor-tracking-row-status > small { display: block; margin-top: 5px; color: #75868d; font-size: 9px; }
#competitorAnalysisPage .competitor-tracking-latest strong,
#competitorAnalysisPage .competitor-tracking-next strong { display: block; overflow: hidden; color: #284854; font-size: 12px; font-weight: 660; text-overflow: ellipsis; white-space: nowrap; }
#competitorAnalysisPage svg.competitor-tracking-sparkline { display: block; width: 118px; height: 44px; overflow: visible; }
#competitorAnalysisPage .competitor-tracking-sparkline path { fill: none; stroke: #e0e9e9; stroke-width: 1; }
#competitorAnalysisPage .competitor-tracking-sparkline polyline { fill: none; stroke: #188b82; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#competitorAnalysisPage .competitor-tracking-sparkline circle { fill: #fff; stroke: #188b82; stroke-width: 1.4; }
#competitorAnalysisPage .competitor-tracking-sparkline circle:last-child { fill: #f0b948; stroke: #9f7218; }
#competitorAnalysisPage div.competitor-tracking-sparkline { display: grid; gap: 2px; align-content: center; min-height: 44px; color: #6f828a; }
#competitorAnalysisPage div.competitor-tracking-sparkline span { font-size: 10px; font-weight: 650; }
#competitorAnalysisPage div.competitor-tracking-sparkline small { font-size: 9px; }
#competitorAnalysisPage .competitor-tracking-empty { display: grid; min-height: 150px; place-items: center; border-top: 1px solid #e2e9eb; padding: 30px; text-align: center; }
#competitorAnalysisPage .competitor-tracking-empty p { margin: 5px 0 0; color: #75868e; font-size: 12px; }
#competitorAnalysisPage .competitor-tracking-pagination { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #dfe7e9; padding: 15px 31px; color: #70838b; background: #fafcfc; font-size: 11px; }
#competitorAnalysisPage .competitor-tracking-pagination > div { display: flex; align-items: center; gap: 10px; }
#competitorAnalysisPage .competitor-tracking-pagination button { border: 1px solid #c9d7da; border-radius: 8px; padding: 7px 10px; color: #355d64; background: #fff; font-size: 11px; }
#competitorAnalysisPage .competitor-tracking-pagination b { min-width: 48px; color: #385a63; text-align: center; font-size: 11px; }

.modal-backdrop:has(.competitor-tracking-detail-modal) { overflow: auto; place-items: start center; padding: 24px; background: rgba(9, 25, 34, .58); backdrop-filter: blur(8px); }
.competitor-tracking-detail-modal { width: min(1080px, 100%); max-height: none; overflow: hidden; border: 1px solid rgba(210, 226, 229, .9); border-radius: 24px; background: #f7faf9; box-shadow: 0 30px 90px rgba(7, 28, 37, .28); }
.competitor-tracking-detail-modal .modal-head { min-height: 82px; border-bottom-color: #dce6e8; padding: 19px 26px; background: rgba(255, 255, 255, .92); }
.competitor-tracking-detail-modal .modal-head span { display: block; margin-bottom: 5px; color: #16857c; font-size: 9px; font-weight: 750; letter-spacing: .16em; }
.competitor-tracking-detail-modal .modal-head h2 { margin: 0; color: #16323e; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.competitor-tracking-detail-modal .modal-head .icon-button { width: 38px; height: 38px; border: 1px solid #d8e3e5; border-radius: 50%; color: #4a6570; background: #fff; font-size: 22px; }
.competitor-tracking-detail-body { display: grid; gap: 19px; max-height: calc(100vh - 184px); overflow: auto; padding: 24px 26px 30px; }
.competitor-tracking-detail-hero { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 20px; align-items: center; border: 1px solid #dce7e8; border-radius: 17px; padding: 14px; background: #fff; box-shadow: 0 9px 24px rgba(34, 73, 82, .06); }
.competitor-tracking-detail-hero > a:first-child { display: block; overflow: hidden; width: 170px; height: 96px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #173f4d, #26958a); text-decoration: none; }
.competitor-tracking-detail-hero > a:first-child img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.competitor-tracking-detail-hero > a:first-child span { display: grid; width: 100%; height: 100%; place-items: center; font-size: 24px; }
.competitor-tracking-detail-hero > a:first-child:hover img { transform: scale(1.025); }
.competitor-tracking-detail-hero > div { min-width: 0; }
.competitor-tracking-detail-hero > div > span { color: #18857c; font-size: 10px; font-weight: 680; }
.competitor-tracking-detail-hero h3 { overflow: hidden; margin: 7px 0 8px; color: #183440; font-size: 18px; font-weight: 680; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.competitor-tracking-detail-hero p { margin: 0; color: #71838a; font-size: 11px; }
.competitor-tracking-youtube-action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid #b8d0d2; border-radius: 10px; padding: 0 14px; color: #235d62; background: #f8fbfb; font-size: 11px; font-weight: 670; text-decoration: none; white-space: nowrap; }
.competitor-tracking-youtube-action:hover { border-color: #229087; color: #126b65; background: #eff9f7; }
.competitor-tracking-detail-latest { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.competitor-tracking-detail-latest article { min-height: 91px; border: 1px solid #dce6e8; border-radius: 14px; padding: 15px 16px; background: #fff; }
.competitor-tracking-detail-latest article > span { display: block; color: #788990; font-size: 10px; }
.competitor-tracking-detail-latest strong { display: block; overflow: hidden; margin-top: 10px; color: #214752; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.competitor-tracking-detail-latest small { display: block; margin-top: 3px; color: #16857c; font-size: 9px; }
.competitor-tracking-detail-metrics { display: flex; gap: 7px; overflow-x: auto; padding: 1px; }
.competitor-tracking-detail-metrics button { flex: 0 0 auto; min-height: 36px; border: 1px solid #cadadc; border-radius: 999px; padding: 0 14px; color: #587079; background: #fff; font-size: 11px; font-weight: 620; }
.competitor-tracking-detail-metrics button.active { border-color: #174f58; color: #fff; background: #174f58; box-shadow: 0 8px 18px rgba(18, 76, 84, .17); }
.competitor-tracking-detail-chart { border: 1px solid #dce7e8; border-radius: 17px; padding: 19px 21px 15px; background: #fff; box-shadow: 0 8px 23px rgba(36, 72, 81, .045); }
.competitor-tracking-detail-chart > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.competitor-tracking-detail-chart > header span { display: block; color: #72858d; font-size: 10px; }
.competitor-tracking-detail-chart > header strong { display: block; margin-top: 4px; color: #173a46; font-size: 24px; font-weight: 720; }
.competitor-tracking-detail-chart > header small { color: #74868d; font-size: 10px; }
.competitor-tracking-detail-chart svg { display: block; width: 100%; height: 246px; overflow: visible; }
.competitor-tracking-detail-chart svg .grid { fill: none; stroke: #e7eded; stroke-width: 1; stroke-dasharray: 3 5; }
.competitor-tracking-detail-chart svg polyline { fill: none; stroke: var(--tracking-chart-color, #168b82); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--tracking-chart-color, #168b82) 22%, transparent)); }
.competitor-tracking-detail-chart svg circle { fill: #fff; stroke: var(--tracking-chart-color, #168b82); stroke-width: 2.5; }
.competitor-tracking-detail-chart svg circle:last-child { fill: var(--tracking-chart-color, #168b82); }
.competitor-tracking-detail-chart svg .x-axis-labels text { fill: #71858e; font-size: 10px; font-weight: 650; }
.competitor-tracking-detail-chart .tracking-y-label { fill: #6a8188; font-size: 11px; }
.competitor-tracking-context { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.competitor-tracking-context > article { background:#fff; border:1px solid #dce7e8; padding:18px; border-radius:16px; min-width:0; max-height:230px; overflow:auto; }
.competitor-tracking-context h3 { font-size:13px; margin:0 0 12px; color:#284c56; }
.competitor-tracking-context p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.7; color:#526e77; }
.competitor-tracking-context summary { cursor:pointer; font-size:12px; line-height:1.7; color:#526e77; }
.competitor-tracking-context small,.tracking-comment small { color:#7b8f95; font-size:10px; }
.tracking-comment { padding:8px 0; border-bottom:1px solid #edf2f3; }
.tracking-comment b { font-size:11px; color:#284c56; }.tracking-comment p { margin:5px 0; }
.competitor-tracking-record-scroll { max-height:430px; overflow:auto; border:1px solid #dce7e8; border-radius:12px; }
.competitor-tracking-records { width:100%; min-width:850px; border-collapse:collapse; background:#fff; font-size:11px; }
.competitor-tracking-records th { position:sticky; top:0; background:#eff7f7; text-align:left; color:#43646e; }
.competitor-tracking-records th,.competitor-tracking-records td { padding:12px 10px; border-bottom:1px solid #edf2f3; white-space:nowrap; }
.competitor-tracking-records td small { color:#168b82; margin-left:4px; }
.competitor-tracking-date-picker { display:flex; gap:12px; align-items:center; font-size:12px; margin:12px 0; color:#426771; }
.competitor-tracking-date-picker input { padding:8px 12px; border:1px solid #c7dfe0; border-radius:10px; background:white; }
.competitor-tracking-filter-note { font-size:12px; line-height:1.7; padding:12px 16px; background:#f0f8f7; border-radius:12px; color:#476d73; }
.competitor-tracking-row-status .rising { color:#986007; background:#fff2d7; }
.tracking-comparison { border:1px solid #dce7e8; border-radius:16px; padding:18px; background:#fff; }
.tracking-comparison h3 { margin:0; color:#284c56; font-size:14px; }.tracking-comparison p { color:#71858e; font-size:12px; }
.tracking-comparison > div { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }.tracking-comparison article { display:grid; gap:6px; padding:10px; background:#f5fafa; border-radius:10px; }
.tracking-comparison span,.tracking-comparison small { color:#577780; font-size:11px; }.tracking-comparison strong { color:#168b82; }
@media(max-width:700px){.competitor-tracking-context{grid-template-columns:1fr}.competitor-tracking-detail-metrics{flex-wrap:wrap}}
.competitor-tracking-detail-chart > footer { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; color: #829198; font-size: 9px; }
.competitor-tracking-detail-chart > footer b { color: #48636c; font-weight: 650; }
.competitor-tracking-detail-chart.is-waiting { display: grid; min-height: 218px; place-content: center; text-align: center; }
.competitor-tracking-detail-chart.is-waiting strong { color: #284c56; font-size: 16px; }
.competitor-tracking-detail-chart.is-waiting p { margin: 7px 0 0; color: #788b92; font-size: 11px; }
.competitor-tracking-detail-history { overflow: hidden; border: 1px solid #dce7e8; border-radius: 17px; background: #fff; }
.competitor-tracking-detail-history > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; }
.competitor-tracking-detail-history > header span { color: #18857c; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.competitor-tracking-detail-history > header h3 { margin: 5px 0 0; color: #1e3b47; font-size: 17px; }
.competitor-tracking-detail-history > header p { margin: 0; color: #7d8d93; font-size: 10px; }
.competitor-tracking-detail-table { overflow-x: auto; border-top: 1px solid #e1e9eb; }
.competitor-tracking-detail-table > header,
.competitor-tracking-detail-table > div { display: grid; grid-template-columns: 58px 94px repeat(5, minmax(100px, 1fr)); min-width: 780px; gap: 10px; align-items: center; padding: 11px 19px; }
.competitor-tracking-detail-table > header { color: #74878e; background: #f4f8f7; font-size: 9px; font-weight: 680; letter-spacing: .04em; }
.competitor-tracking-detail-table > div { border-top: 1px solid #edf1f2; color: #526b74; font-size: 10px; }
.competitor-tracking-detail-table > div:nth-child(even) { background: #fcfdfd; }
.competitor-tracking-detail-table > div > b { color: #244a55; font-size: 10px; }
.competitor-tracking-detail-table > div > strong { color: #234752; font-size: 11px; }
.competitor-tracking-detail-table .measured,
.competitor-tracking-detail-table .late,
.competitor-tracking-detail-table .missed,
.competitor-tracking-detail-table .unavailable,
.competitor-tracking-detail-table .pending { display: inline-flex; width: fit-content; border-radius: 999px; padding: 4px 7px; font-size: 9px; font-weight: 650; }
.competitor-tracking-detail-table .measured { color: #137168; background: #e4f5f1; }
.competitor-tracking-detail-table .late { color: #416b82; background: #e8f1f6; }
.competitor-tracking-detail-table .missed { color: #9d5a2c; background: #fff0df; }
.competitor-tracking-detail-table .unavailable { color: #756b82; background: #f1edf5; }
.competitor-tracking-detail-table .pending { color: #6b7d84; background: #edf2f3; }
.competitor-tracking-detail-gap-note { display: block; width: fit-content; margin-top: 8px; border-radius: 999px; padding: 6px 9px; color: #6f6257; background: #f4f0eb; font-size: 9px; line-height: 1.4; }
.competitor-tracking-detail-modal .modal-foot { border-top-color: #dce6e8; padding: 15px 26px; background: #fff; }
.competitor-tracking-detail-modal .modal-foot > span { margin-right: auto; color: #788990; font-size: 10px; }
.competitor-tracking-detail-modal .modal-foot a { text-decoration: none; }

@media (max-width: 1180px) {
  #competitorAnalysisPage .competitor-youtube-home-head { grid-template-columns: auto minmax(0, 1fr); }
  #competitorAnalysisPage .competitor-youtube-home-head .competitor-hero-actions { grid-column: 2; justify-self: start; }
  #competitorAnalysisPage .competitor-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #competitorAnalysisPage .competitor-tracking-table-head { display: none; }
  #competitorAnalysisPage .competitor-tracking-row { grid-template-columns: minmax(280px, 1.5fr) minmax(150px, .7fr) minmax(120px, .5fr) 126px; }
  #competitorAnalysisPage .competitor-tracking-next { display: none; }
}

@media (max-width: 760px) {
  #competitorAnalysisPage .competitor-page-inner { padding: 16px 12px 38px; }
  #competitorAnalysisPage .competitor-youtube-home-head { grid-template-columns: 1fr; min-height: 0; padding: 23px 19px; }
  #competitorAnalysisPage .competitor-youtube-home-head .competitor-view-back,
  #competitorAnalysisPage .competitor-youtube-home-head .competitor-hero-actions { grid-column: 1; }
  #competitorAnalysisPage .competitor-youtube-home-title h1 { font-size: 38px; }
  #competitorAnalysisPage .competitor-youtube-home-title p { font-size: 14px; }
  #competitorAnalysisPage .competitor-youtube-home-head .competitor-hero-actions { width: 100%; }
  #competitorAnalysisPage .competitor-youtube-home-head .competitor-hero-actions button { flex: 1; min-width: 0; }
  #competitorAnalysisPage .competitor-summary-grid,
  #competitorAnalysisPage .competitor-quick-grid { grid-template-columns: 1fr; }
  #competitorAnalysisPage .competitor-youtube-home > .competitor-section { padding: 21px 17px; }
  #competitorAnalysisPage .competitor-section-head { align-items: flex-start; flex-wrap: wrap; }
  #competitorAnalysisPage .competitor-section-head span { white-space: normal; }
  #competitorAnalysisPage .competitor-tracking-method > ol { grid-template-columns: 1fr; }
  #competitorAnalysisPage .competitor-tracking-queue-head { grid-template-columns: 1fr; padding: 23px 18px 18px; }
  #competitorAnalysisPage .competitor-tracking-ring { justify-self: start; width: 88px; height: 88px; }
  #competitorAnalysisPage .competitor-tracking-visual-summary { grid-template-columns: 1fr; gap: 12px; padding: 14px 18px; }
  #competitorAnalysisPage .competitor-tracking-visual-summary dl { justify-content: space-between; gap: 10px; }
  #competitorAnalysisPage .competitor-tracking-filters { padding: 15px 18px; }
  #competitorAnalysisPage .competitor-tracking-row { grid-template-columns: 1fr 1fr; gap: 14px; padding: 17px 18px; }
  #competitorAnalysisPage .competitor-tracking-video { grid-column: 1 / -1; }
  #competitorAnalysisPage .competitor-tracking-latest { text-align: right; }
  #competitorAnalysisPage .competitor-tracking-next { display: block; }
  #competitorAnalysisPage .competitor-tracking-row > .competitor-tracking-next,
  #competitorAnalysisPage .competitor-tracking-row > .competitor-tracking-sparkline { grid-column: 1 / -1; }
  #competitorAnalysisPage svg.competitor-tracking-sparkline { width: 100%; height: 58px; }
  #competitorAnalysisPage .competitor-tracking-pagination { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px 18px; }
  .modal-backdrop:has(.competitor-tracking-detail-modal) { padding: 8px; }
  .competitor-tracking-detail-modal { border-radius: 17px; }
  .competitor-tracking-detail-body { max-height: calc(100vh - 166px); padding: 15px; }
  .competitor-tracking-detail-hero { grid-template-columns: 112px minmax(0, 1fr); gap: 13px; }
  .competitor-tracking-detail-hero > a:first-child { width: 112px; height: 64px; }
  .competitor-tracking-detail-hero h3 { margin: 4px 0 6px; font-size: 14px; }
  .competitor-tracking-detail-hero p { font-size: 9px; }
  .competitor-tracking-youtube-action { grid-column: 1 / -1; width: 100%; }
  .competitor-tracking-detail-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .competitor-tracking-detail-latest article:first-child { grid-column: 1 / -1; }
  .competitor-tracking-detail-chart svg { height: 178px; }
  .competitor-tracking-detail-history > header { align-items: flex-start; flex-direction: column; gap: 5px; }
  .competitor-tracking-detail-modal .modal-foot { align-items: stretch; flex-direction: column; }
  .competitor-tracking-detail-modal .modal-foot a { text-align: center; }
}

.handoff-calendar-load-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 0 24px 12px; color: #718096; font-size: 12px; }
.handoff-calendar-load-status button { min-height: 32px; padding: 5px 10px; font-size: 12px; }

/* Archive uses the board's existing pill filters and detail action buttons. */
.shared-memo-archive-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 14px; }
.shared-memo-archive-bar > span { color: #526176; font-size: 13px; font-weight: 650; }
.shared-memo-card-pictograms .shared-memo-archive-tag { width: auto; padding: 3px 7px; border-radius: 6px; background: #ffffffbd; color: #445269; font-size: 11px; font-weight: 650; }
.modal.shared-memo-archive-modal { width: min(430px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid #e0e7ec; border-radius: 18px; background: #fff; }
.shared-memo-archive-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.shared-memo-archive-head span { color: #748294; font-size: 11px; }
.shared-memo-archive-head h2 { margin: 6px 0 0; font-size: 20px; color: #253e60; }
.shared-memo-archive-head .icon-button { flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f3f5f7; color: #738194; }
.shared-memo-archive-modal > p { margin: 12px 0 20px; color: #748294; font-size: 12px; line-height: 1.7; }
.shared-memo-archive-choices { display: grid; gap: 10px; }
.shared-memo-archive-choices button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 1px solid #e1e8ef; border-radius: 12px; background: #f8fafc; text-align: left; color: #344256; cursor: pointer; }
.shared-memo-archive-choices button > span:first-child { font-size: 22px; }
.shared-memo-archive-choices button > span:last-child { display: grid; gap: 5px; }
.shared-memo-archive-choices strong { font-size: 14px; font-weight: 650; }
.shared-memo-archive-choices small { font-size: 11px; line-height: 1.6; font-weight: 400; color: #748294; }
.shared-memo-archive-choices button:hover:not(:disabled), .shared-memo-archive-choices button.active { border-color: #80a9d9; background: #f0f6ff; }
.shared-memo-archive-choices button:disabled { cursor: default; }
.shared-memo-archive-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.shared-memo-archive-foot button { min-height: 34px; padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.shared-memo-archive-modal button:focus-visible { outline: 2px solid #6698d8; outline-offset: 3px; }

/* Shared memo detail: quiet paper surface, generous editor, compact tools. */
.modal.shared-memo-detail-modal {
  width: min(620px, 100%);
  max-height: calc(100dvh - 48px);
  border: 1px solid #e0e7ec;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 80px #15283b30;
}
.shared-memo-detail-modal::before {
  height: 4px;
  background: var(--shared-memo-author-color, #2563eb);
}
.shared-memo-detail-modal .shared-memo-sticky-head {
  gap: 20px;
  padding: 27px 28px 20px;
}
.shared-memo-detail-modal .shared-memo-sticky-head > div { min-width: 0; gap: 10px; }
.shared-memo-detail-modal .shared-memo-modal-kicker { font-size: 11px; font-weight: 650; color: #748294; }
.shared-memo-detail-modal .shared-memo-sticky-head strong {
  font-size: 21px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.shared-memo-detail-modal .shared-memo-sticky-head .icon-button {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f3f5f7;
  color: #738194;
  font-size: 21px;
}
.shared-memo-detail-modal .shared-memo-detail-body { gap: 16px; padding: 0 28px 22px; }
.shared-memo-detail-modal .shared-memo-detail-text {
  min-height: 96px;
  padding: 18px 20px;
  border-color: #e7ebef;
  border-radius: 12px;
  background: #f8fafb;
  color: #344256;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
}
.shared-memo-detail-modal .shared-memo-detail-author { gap: 10px; }
.shared-memo-detail-modal .shared-memo-detail-author strong { font-size: 12px; font-weight: 650; }
.shared-memo-detail-modal .shared-memo-detail-author time { font-size: 11px; font-weight: 400; color: #8a95a4; }
.shared-memo-detail-modal .shared-memo-detail-status { gap: 6px; margin-top: -5px; }
.shared-memo-detail-modal .shared-memo-detail-status :is(span, button) {
  min-height: 26px;
  border: 0;
  border-radius: 6px;
  background: #f1f5f8;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
.shared-memo-detail-modal .shared-memo-additions {
  gap: 12px;
  padding: 19px 0 0;
  border: 0;
  border-top: 1px solid #e9edf1;
  border-radius: 0;
  background: transparent;
}
.shared-memo-detail-modal .shared-memo-additions-head h4 { font-size: 13px; font-weight: 650; color: #445269; }
.shared-memo-detail-modal .shared-memo-additions-head > span {
  min-width: 24px;
  padding: 3px 7px;
  background: #eef2f6;
  color: #738095;
  font-weight: 600;
}
.shared-memo-detail-modal .shared-memo-addition-list:not(:has(.shared-memo-addition-card)) { display: none; }
.shared-memo-detail-modal .shared-memo-addition-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dfe6ed;
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.shared-memo-detail-modal .shared-memo-addition-composer:focus-within {
  border-color: #95b8e5;
  box-shadow: 0 0 0 3px #2563eb0a;
}
.shared-memo-detail-modal .shared-memo-addition-composer textarea {
  grid-column: 1 / -1;
  grid-row: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  margin: 0;
  padding: 3px 3px 9px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  resize: vertical;
  color: #344256;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
}
.shared-memo-detail-modal .shared-memo-addition-composer textarea::placeholder { color: #939ead; }
.shared-memo-detail-modal .shared-memo-addition-composer select {
  grid-row: 2;
  box-sizing: border-box;
  width: 122px;
  max-width: 100%;
  min-width: 0;
  height: 34px;
  margin: 0;
  border: 1px solid #e6ebf0;
  border-radius: 8px;
  padding: 0 8px;
  background: #f6f8fa;
  color: #526176;
  font: inherit;
  font-size: 12px;
}
.shared-memo-detail-modal .shared-memo-addition-composer button {
  grid-row: 2;
  min-height: 34px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  background: #253e60;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.shared-memo-detail-modal .shared-memo-addition-composer button:hover { background: #34547c; }
.shared-memo-detail-modal .shared-memo-addition-card { padding: 13px 14px; border-color: #e6ebf0; box-shadow: none; }
.shared-memo-detail-modal .shared-memo-addition-meta { gap: 6px 10px; }
.shared-memo-detail-modal .shared-memo-addition-meta strong { font-weight: 600; }
.shared-memo-detail-modal .shared-memo-addition-actions button { font-weight: 500; }
.shared-memo-detail-modal .shared-memo-pictogram-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 15px;
  border-top-color: #e9edf1;
}
.shared-memo-detail-modal .shared-memo-pictogram-action {
  flex: 0 0 auto;
  min-height: 34px;
  gap: 5px;
  padding: 0 10px;
  border-color: #e6ebf0;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  transform: none;
}
.shared-memo-detail-modal .shared-memo-pictogram-action span { font-size: 14px; filter: none; }
.shared-memo-detail-modal .shared-memo-pictogram-action strong {
  overflow: visible;
  font-size: 11px;
  font-weight: 600;
  text-overflow: clip;
  line-height: 1.4;
}
.shared-memo-detail-modal .shared-memo-pictogram-action::after { display: none; }
.shared-memo-detail-modal .shared-memo-pictogram-action.active { box-shadow: inset 0 0 0 1px currentColor; }
.shared-memo-detail-modal .shared-memo-pictogram-action.is-star.active { background: #fff8e5; color: #a57613; }
.shared-memo-detail-modal .shared-memo-pictogram-action.is-people.active { background: #edf4ff; color: #366dbc; }
.shared-memo-detail-modal .shared-memo-pictogram-action.is-check.active { background: #edf8f2; color: #268063; }
.shared-memo-detail-modal .shared-memo-pictogram-action.is-archive.active { background: #f0f4fa; color: #526d93; }
.shared-memo-detail-modal .shared-memo-pictogram-action.is-delete { margin-left: auto; color: #b45b62; }
.shared-memo-detail-modal :is(button, select):focus-visible { outline: 2px solid #6698d8; outline-offset: 3px; }
@media (max-width: 540px) {
  .modal-backdrop:has(.shared-memo-detail-modal) { padding: 10px; }
  .modal.shared-memo-detail-modal { max-height: calc(100dvh - 20px); border-radius: 16px; }
  .shared-memo-detail-modal .shared-memo-sticky-head { padding: 22px 18px 16px; gap: 12px; }
  .shared-memo-detail-modal .shared-memo-sticky-head strong { font-size: 19px; }
  .shared-memo-detail-modal .shared-memo-detail-body { padding: 0 18px 18px; gap: 14px; }
  .shared-memo-detail-modal .shared-memo-detail-text { padding: 14px 16px; }
  .shared-memo-detail-modal .shared-memo-pictogram-action { padding: 0 9px; min-height: 36px; }
  .shared-memo-detail-modal .shared-memo-pictogram-actions { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .shared-memo-detail-modal .shared-memo-pictogram-action { grid-column: span 4; padding: 0 5px; gap: 4px; }
  .shared-memo-detail-modal .shared-memo-pictogram-action:nth-child(n+4) { grid-column: span 3; }
  .shared-memo-detail-modal .shared-memo-pictogram-action.is-delete { margin-left: 0; }
}
@media (max-width: 360px) {
  .shared-memo-detail-modal .shared-memo-pictogram-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shared-memo-detail-modal .shared-memo-pictogram-action,
  .shared-memo-detail-modal .shared-memo-pictogram-action:nth-child(n+4) { grid-column: span 1; }
  .shared-memo-detail-modal .shared-memo-pictogram-action.is-delete { margin-left: 0; }
}
/* Focused content insight: one score, one curve, details on demand. */
.modal.competitor-insight-modal { width:min(1120px,calc(100vw - 48px)); max-width:1120px; border-radius:24px; background:#f7f9fb; box-shadow:0 32px 100px #12293938; }
.competitor-insight-modal .modal-head { padding:22px 30px; background:#fff; border-bottom:1px solid #e5eaf0; }
.competitor-insight-modal .modal-head span { color:#647d91; font-size:10px; letter-spacing:2px; }
.competitor-insight-modal .modal-head h2 { font-size:21px; margin-top:6px; }
.competitor-insight-modal .competitor-tracking-detail-body { padding:28px 32px; display:flex; flex-direction:column; gap:24px; background:#f7f9fb; }
.competitor-insight-modal .competitor-tracking-detail-body > * { flex-shrink:0; }
.insight-hero { display:flex; align-items:center; gap:24px; }
.insight-thumbnail { position:relative; flex:0 0 200px; aspect-ratio:16/9; overflow:hidden; border-radius:13px; background:#142b3a; color:white; }
.insight-thumbnail img { width:100%; height:100%; object-fit:cover; }
.insight-thumbnail>span { position:absolute; bottom:8px; right:8px; background:#132432d9; color:white; padding:5px 8px; border-radius:6px; font-size:10px; }
.insight-hero-copy { min-width:0; }
.insight-hero-copy p { font-size:12px; font-weight:700; color:#176b70; margin:0 0 8px; }
.insight-hero-copy p span { color:#83919d; font-weight:400; }
.insight-hero-copy h3 { font-size:20px; line-height:1.5; margin:0 0 9px; color:#203847; overflow:visible; white-space:normal; }
.insight-hero-copy>small { font-size:12px; color:#738392; }
.content-strength-card { padding:24px 28px; background:linear-gradient(115deg,#173b45,#215c61); color:#fff; border:1px solid #2e6469; border-radius:18px; }
.content-strength-heading { display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:700; }
.content-strength-status { padding:5px 11px; background:#ffffff16; border:1px solid #ffffff30; border-radius:20px; font-size:11px; font-weight:500; }
.content-strength-main { display:flex; align-items:center; gap:30px; margin:8px 0 14px; }
.content-strength-main>strong { font-size:60px; letter-spacing:-2px; line-height:1.2; color:#fff; font-weight:750; }
.content-strength-main>strong small { font-size:17px; color:#a2c5c9; margin-left:10px; letter-spacing:0; }
.content-strength-main p { font-size:13px; line-height:1.8; color:#d8e7e9; margin:0; }
.content-strength-explainer { border-top:1px solid #ffffff26; padding-top:12px; }
.content-strength-explainer summary { font-size:12px; color:#d3e5e6; cursor:pointer; }
.content-strength-explainer p { font-size:12px; color:#d3e5e6; line-height:1.9; margin:14px 0; }
.content-strength-explainer>small { color:#a9c8cb; font-size:11px; }
.strength-component { display:grid; grid-template-columns:1fr auto; gap:8px; margin:14px 0; font-size:12px; }
.strength-component small { opacity:.65; margin-left:8px; }
.strength-component progress { grid-column:1/-1; width:100%; height:5px; accent-color:#a1dbd0; border:0; }
.content-strength-badge { display:block; font-size:10px; color:#8798a4; margin-top:6px; }
.content-strength-badge.is-ready { color:#1b7274; }
.content-strength-badge b { font-size:13px; margin-left:3px; }
.insight-growth { background:#fff; border:1px solid #e1e8ee; border-radius:18px; overflow:hidden; }
.insight-section-heading { display:flex; gap:16px; justify-content:space-between; align-items:center; padding:22px 24px 0; }
.insight-section-heading h3 { margin:0 0 6px; font-size:17px; color:#273f50; }
.insight-section-heading p { margin:0; font-size:11px; color:#80919e; }
.insight-section-heading .competitor-tracking-detail-metrics { flex-shrink:0; gap:3px; background:#f1f5f7; border-radius:9px; padding:4px; }
.insight-section-heading .competitor-tracking-detail-metrics button { padding:7px 12px; border:0; border-radius:6px; font-size:11px; background:transparent; }
.insight-section-heading .competitor-tracking-detail-metrics button.active { color:#1c5661; background:white; box-shadow:0 2px 5px #233d5012; }
.competitor-insight-modal .competitor-tracking-detail-chart { border:0; box-shadow:none; padding:20px 24px 18px; border-radius:0; margin:0; }
.competitor-insight-modal .competitor-tracking-detail-chart header { align-items:flex-end; }
.competitor-insight-modal .competitor-tracking-detail-chart header strong { font-size:27px; }
.competitor-insight-modal .competitor-tracking-detail-chart header>small { display:none; }
.competitor-insight-modal .competitor-tracking-detail-chart svg { width:100%; max-height:320px; }
.competitor-insight-modal .competitor-tracking-detail-chart footer { font-size:10px; flex-wrap:wrap; gap:8px; }
.competitor-tracking-detail-chart .insight-gap path { stroke:#91a9b4; stroke-width:2; stroke-dasharray:6 5; fill:none; }
.competitor-tracking-detail-chart .insight-gap circle { stroke:#91a9b4; fill:#fff; }
.competitor-tracking-detail-chart .insight-gap.is-surge path { stroke:#c08a42; }
.competitor-tracking-detail-chart .insight-gap text { fill:#a77734; font-size:10px; }
.insight-context-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:20px; }
.insight-context-card { background:#fff; border:1px solid #e1e8ee; padding:22px 24px; border-radius:16px; min-width:0; }
.insight-context-card>header { display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:20px; }
.insight-context-card h3 { margin:0; font-size:14px; color:#304b5c; }
.insight-context-card>header span,.insight-context-card>header a { font-size:11px; color:#708994; white-space:nowrap; }
.insight-description { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.9; color:#657885; }
.insight-context-card details { font-size:12px; color:#426e7d; }
.insight-comment { padding:16px 0; border-bottom:1px solid #edf1f4; }
.insight-comment:first-child { padding-top:0; }
.insight-comment-author { display:flex; align-items:center; gap:9px; color:#3e5869; font-size:11px; }
.insight-comment-author>span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#e9f0f3; color:#567e8c; flex-shrink:0; }
.insight-comment-author b { overflow-wrap:anywhere; }
.insight-comment-author small { margin-left:auto; color:#8c9da8; font-size:10px; white-space:nowrap; }
.insight-comment>p { font-size:13px; line-height:1.8; color:#465e6e; white-space:pre-wrap; overflow-wrap:anywhere; margin:10px 0; }
.insight-comment footer { font-size:10px; color:#8094a0; display:flex; gap:14px; align-items:center; }
.insight-comment button,.insight-comments-next { color:#247879; border:0; background:#edf6f5; border-radius:7px; padding:7px 10px; cursor:pointer; font-size:11px; }
.insight-comment-preview .insight-comment>p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.insight-comments-open { display:flex; justify-content:space-between; width:100%; margin:16px 0 9px; padding:11px 14px; border:1px solid #d9e7e8; color:#316a73; background:#f7fafb; border-radius:9px; font-size:12px; cursor:pointer; }
.insight-context-card>small { font-size:10px; color:#8b9aa6; }
.insight-all-comments { padding:26px; border:1px solid #dee7ec; border-radius:16px; background:#fff; }
.insight-all-comments[hidden] { display:none; }
.insight-all-comments>header { margin-bottom:25px; }
.insight-all-comments>header h3 { font-size:17px; color:#2a495b; margin:0 0 6px; }
.insight-all-comments>header p,.insight-comments-end { font-size:12px; color:#8698a4; }
.insight-replies { padding-left:24px; margin-top:14px; border-left:2px solid #e6eef1; }
.insight-replies:empty { display:none; }
.insight-comments-next { margin-top:18px; }
.insight-records { padding:20px 24px; border:1px solid #e0e8ed; background:#fff; border-radius:14px; }
.insight-records>summary { cursor:pointer; font-size:13px; color:#426170; }
.insight-records>summary small { margin-left:15px; font-size:11px; color:#8c9ca6; }
.insight-records>p { font-size:11px; line-height:1.8; color:#84939d; }
.competitor-insight-modal .modal-foot { background:#fff; padding:16px 30px; border-top:1px solid #e5ebef; }
@media(max-width:760px){
 .modal.competitor-insight-modal { width:calc(100vw - 16px); border-radius:16px; }
 .competitor-insight-modal .modal-head,.competitor-insight-modal .competitor-tracking-detail-body { padding:18px; }
 .insight-hero { gap:14px; align-items:flex-start; }.insight-thumbnail{flex-basis:120px;}.insight-hero-copy h3{font-size:15px;}.insight-hero-copy p span{display:none;}
 .content-strength-card{padding:20px;}.content-strength-main{gap:18px;}.content-strength-main>strong{font-size:48px;}.content-strength-main p{font-size:12px;}
 .insight-section-heading { flex-direction:column; align-items:flex-start; padding:20px 18px 0; }.insight-context-grid{grid-template-columns:1fr;}
 .competitor-insight-modal .competitor-tracking-detail-chart{padding:18px 8px;}.insight-comment-author small{display:none;}
}
/* Measurement workbench: matched curves, visible evidence, dedicated comment reader. */
.modal.insight-workbench { width:min(1320px,calc(100vw - 36px)); max-width:1320px; border-radius:20px; }
.insight-workbench .modal-head { padding:18px 26px; }
.insight-workbench .competitor-tracking-detail-body { padding:24px 28px; gap:20px; background:radial-gradient(ellipse at top right,#eaf5f780,transparent 45%),#f5f7fa; }
.insight-head-actions { display:flex; align-items:center; gap:20px; }
.insight-local-badge { display:flex; align-items:center; gap:6px; color:#4c7f79; font-size:11px; }
.insight-local-badge i { width:6px; height:6px; border-radius:50%; background:#20a08b; box-shadow:0 0 0 4px #20a08b12; }
.insight-workbench .insight-hero { background:#fff; padding:18px; border:1px solid #e2e9ef; border-radius:16px; gap:22px; }
.insight-workbench .insight-thumbnail { flex-basis:215px; box-shadow:0 8px 20px #213c4a15; }
.insight-workbench .insight-hero-copy h3 { font-size:19px; line-height:1.5; }
.insight-date-chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.insight-date-chips>span { padding:7px 9px; border-radius:6px; background:#f2f6f8; color:#899aa6; font-size:10px; }
.insight-date-chips b { color:#526b7b; font-weight:500; margin-left:5px; }
.insight-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.insight-stat-card { display:flex; gap:13px; background:#fff; padding:20px 17px; border:1px solid #e0e8ee; border-radius:14px; box-shadow:0 3px 7px #21394b03; min-width:0; }
.insight-stat-card>div { min-width:0; }.insight-stat-card>div>span { font-size:11px; color:#6b8394; }
.insight-stat-card strong { display:block; font-size:24px; color:#223f50; margin:7px 0 5px; font-variant-numeric:tabular-nums; letter-spacing:-.6px; }
.insight-stat-card small { display:block; font-size:10px; color:#8497a6; line-height:1.5; }
.insight-stat-icon { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:10px; background:#eaf4f4; color:#29888b; }
.insight-stat-icon svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.insight-stat-card.is-growth .insight-stat-icon { color:#477dc1;background:#edf2fb; }.insight-stat-card.is-likes .insight-stat-icon{color:#9872b8;background:#f4eef9;}.insight-stat-card.is-comments .insight-stat-icon{color:#c28a4c;background:#fcf3e6;}
.insight-analysis-grid { display:grid; grid-template-columns:minmax(0,2.3fr) minmax(275px,1fr); gap:20px; align-items:start; }
.insight-section-index { display:block; color:#8b9eac; font-size:9px; letter-spacing:1.6px; font-weight:600; margin-bottom:7px; }
.insight-workbench .insight-section-heading { padding:20px 22px 0; flex-wrap:wrap; }.insight-workbench .insight-section-heading h3{font-size:16px;}
.insight-workbench .competitor-tracking-detail-metrics button { padding:7px 8px; font-size:10px; }
.insight-workbench .tracking-unified-chart { padding:18px 18px 12px; }
.tracking-unified-chart header { display:flex; align-items:center; justify-content:space-between; padding:0 5px; margin-bottom:16px; }
.tracking-unified-chart header>p { font-size:10px;line-height:1.6;color:#8a9ca7;text-align:right; }
.tracking-unified-chart header strong small { font-size:12px; margin-left:4px; font-weight:500; color:#8095a3; }
.tracking-unified-chart svg { width:100%; height:auto; display:block; overflow:visible; }
.tracking-unified-chart svg .actual-curve,.tracking-unified-spark svg .actual-curve { fill:none;stroke:#18838b;stroke-width:3;stroke-linejoin:round;stroke-linecap:round; }
.tracking-unified-chart svg circle,.tracking-unified-spark svg circle { fill:#fff;stroke:#16848b;stroke-width:2; }
.tracking-unified-chart svg .grid{stroke:#e7eef2;stroke-dasharray:3 6;fill:none;}
.tracking-unified-chart svg text { fill:#879ba9;font-size:10px; }
.tracking-unified-chart svg .insight-gap path,.tracking-unified-spark svg .insight-gap path { fill:none;stroke:#9eabb8;stroke-width:2;stroke-dasharray:7 6; }
.tracking-unified-chart svg .insight-gap.is-surge path,.tracking-unified-spark svg .insight-gap.is-surge path { stroke:#c39459; }
.tracking-unified-chart svg .insight-gap text { fill:#99a6b0;font-size:9px; }
.tracking-unified-spark svg .actual-curve{stroke-width:9;}.tracking-unified-spark svg .insight-gap path{stroke-width:7;stroke-dasharray:15 13;}.tracking-unified-spark svg circle{stroke-width:5;}
.competitor-tracking-sparkline.tracking-unified-spark { width:140px;height:auto;display:block;background:none; }
.tracking-unified-spark svg { display:block;width:140px;height:auto; }
.tracking-unified-spark>small { display:block;font-size:9px;color:#8da0ac;text-align:right;margin-top:2px; }
#competitorAnalysisPage .tracking-unified-spark,#competitorAnalysisPage .tracking-unified-spark svg { width:126px; }
#competitorAnalysisPage .tracking-unified-spark svg .actual-curve { stroke:#18838b;stroke-width:9; }
#competitorAnalysisPage .tracking-unified-spark svg circle { stroke:#16848b;stroke-width:5;fill:#fff; }
#competitorAnalysisPage .tracking-unified-spark svg .insight-gap path { stroke:#9eabb8;stroke-width:7;stroke-dasharray:15 13; }
#competitorAnalysisPage .tracking-unified-spark svg .insight-gap.is-surge path { stroke:#c39459; }
.insight-collection-strip { display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid #e5edf2;padding:14px 20px;background:#fafcfd; }
.insight-collection-strip span{font-size:10px;color:#92a3af;}.insight-collection-strip b{color:#607c8d;margin-left:5px;font-weight:500;}
.insight-score-rail { background:#fff;border:1px solid #e0e8ee;border-radius:16px;padding:18px; }
.insight-score-rail>.insight-section-index{margin-bottom:14px;}
.insight-score-rail .content-strength-card{padding:18px;border-radius:12px;background:linear-gradient(145deg,#193747,#24616a);}
.insight-score-rail .content-strength-heading{font-size:11px;gap:7px;align-items:start;}.insight-score-rail .content-strength-status{font-size:9px;white-space:nowrap;padding:3px 6px;}
.insight-score-rail .content-strength-main{display:block;margin:10px 0 12px;}.insight-score-rail .content-strength-main>strong{font-size:46px;}.insight-score-rail .content-strength-main>p{font-size:11px;margin-top:6px;line-height:1.6;}
.insight-score-rail .content-strength-explainer summary{font-size:10px;}.insight-score-rail .content-strength-explainer p{font-size:11px;}
.insight-score-evidence{padding-top:20px;}.insight-score-evidence h3{font-size:12px;color:#526e80;margin:0 0 15px;}.insight-score-evidence>p{font-size:12px;line-height:1.8;color:#8497a4;}
.insight-score-evidence>div{display:grid;grid-template-columns:1fr auto;gap:6px;margin:12px 0;font-size:11px;color:#778e9d;}.insight-score-evidence b{color:#325b71;}.insight-score-evidence progress{grid-column:1/-1;accent-color:#459da5;width:100%;height:4px;border:0;}
.insight-score-evidence footer{display:flex;justify-content:space-between;font-size:11px;border-top:1px solid #e9eef2;padding-top:13px;margin-top:16px;color:#78909f;}
.insight-bottom-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:20px;align-items:start;}
.insight-record-preview{background:#fff;border:1px solid #e1e9ef;border-radius:16px;overflow:hidden;min-width:0;}
.insight-record-preview>header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;}.insight-record-preview h3{font-size:15px;margin:0;color:#354f60;}.insight-record-preview>header>span{font-size:10px;color:#91a2ae;}
.insight-record-preview>.competitor-tracking-record-scroll{margin:0 12px 14px;}.insight-record-preview .competitor-tracking-records{min-width:730px;}.insight-record-preview .insight-records{border:0;border-top:1px solid #e5ecf1;border-radius:0;}
.insight-response-preview .insight-section-index{font-size:9px;color:#8b9eac;}.insight-description-fold{margin-top:18px;padding-top:15px;border-top:1px solid #e9eef2;}
.tracking-library-total{text-align:right;display:flex;flex-direction:column;gap:4px;}.tracking-library-total b{font-size:24px;color:#274f64;}.tracking-library-total span{font-size:10px;color:#8297a4;}
.tracking-library-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:18px 0;color:#8a9ca8;font-size:11px;}.tracking-library-toolbar>div{display:flex;align-items:center;gap:12px;}.tracking-library-toolbar label{display:flex;align-items:center;gap:9px;font-size:11px;}.tracking-library-toolbar select,.tracking-library-toolbar input{border:1px solid #d9e4eb;border-radius:8px;background:#fff;padding:9px;color:#466b7f;font-size:11px;}
.tracking-library-toolbar .competitor-tracking-date-picker{margin:0;}
.modal.tracking-comments-modal{display:flex;flex-direction:column;width:min(850px,calc(100vw - 36px));max-width:850px;max-height:92vh;border-radius:18px;overflow:hidden;background:#fff;}
.tracking-comments-modal>.modal-head,.tracking-comments-modal>.tracking-comment-banner,.tracking-comments-modal>.modal-foot{flex-shrink:0;}
.tracking-comments-modal>.tracking-comment-body{flex:1;min-height:0;}
.response-comparison-row{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid #dbe8eb;color:#315c65;}.response-comparison-row small{display:block;font-size:11px;color:#768e97;margin-top:6px;line-height:1.6;}.response-comparison-row b{white-space:nowrap;font-size:16px;}.response-trend-note{font-size:12px;line-height:1.7;color:#637f8b;}.competitor-reach-ratio{display:block;font-size:11px;color:#8193a0;margin-bottom:6px;}
.tracking-observed-context{padding:14px 16px;border-radius:10px;background:#f0f6f7;margin:10px 0;color:#335b65;}.tracking-observed-context strong{font-size:13px;}.tracking-observed-context p{font-size:11px;line-height:1.7;margin:6px 0 0;color:#718791;}
.tracking-comments-modal .modal-head{padding:22px 26px;}.tracking-comments-modal .modal-head span{font-size:9px;letter-spacing:1.8px;color:#6e8f9a;}.tracking-comments-modal .modal-head h2{font-size:21px;margin:6px 0;}.tracking-comments-modal .modal-head p{font-size:12px;line-height:1.6;color:#7e929f;max-width:650px;margin:8px 0 0;}
.tracking-comment-banner{display:flex;justify-content:space-between;padding:12px 26px;background:#f1f7f8;border-block:1px solid #e0eaef;font-size:11px;color:#72919e;}.tracking-comment-banner a{color:#367981;}
.tracking-comments-modal .tracking-comment-body{padding:0 26px;overflow-y:auto;overscroll-behavior:contain;}.tracking-comments-modal .insight-all-comments{border:0;padding:22px 0;border-radius:0;}.tracking-comments-modal .insight-all-comments>header{display:none;}.tracking-comments-modal .insight-comment>p{font-size:14px;line-height:1.9;}.tracking-comments-modal .insight-comment{padding:22px 0;}.tracking-comments-modal .insight-comments-next{width:100%;padding:13px;}.tracking-comments-modal .modal-foot{border-top:1px solid #e2eaf0;padding:16px 24px;}.tracking-comments-modal .modal-foot>span{font-size:10px;color:#8da0aa;}
@media(max-width:1000px){.insight-stat-card{padding:15px 12px;gap:9px;}.insight-stat-card strong{font-size:19px;}.insight-stat-icon{width:28px;height:28px;}.insight-analysis-grid{grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr);}.insight-bottom-grid{grid-template-columns:1fr;}}
@media(max-width:760px){.insight-workbench .competitor-tracking-detail-body{padding:14px;gap:14px;}.insight-workbench .insight-hero{padding:12px;gap:12px;}.insight-workbench .insight-thumbnail{flex-basis:120px;}.insight-workbench .insight-hero-copy h3{font-size:14px;}.insight-date-chips{display:block;}.insight-date-chips>span{display:block;margin-top:4px;}.insight-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.insight-stat-card strong{font-size:21px;}.insight-analysis-grid{grid-template-columns:1fr;}.insight-score-rail .content-strength-main{display:flex;gap:20px;}.tracking-library-toolbar{align-items:flex-start;flex-direction:column;}.tracking-library-toolbar>div{flex-wrap:wrap;}.tracking-library-total{display:none;}.tracking-comments-modal .modal-foot>span{display:none;}.insight-local-badge{display:none;}.insight-bottom-grid{grid-template-columns:minmax(0,1fr);}}

/* Local analysis progress + Gemini-style video summary (competitor video detail) */
.competitor-analysis-slot { display: contents; }
.competitor-analysis-spinner { display: inline-block; flex: 0 0 auto; width: 13px; height: 13px; border: 2px solid rgba(11,156,145,.22); border-top-color: #0b9c91; border-radius: 50%; animation: competitor-analysis-spin .8s linear infinite; }
@keyframes competitor-analysis-spin { to { transform: rotate(360deg); } }
.secondary-button.is-busy { display: inline-flex; align-items: center; gap: 8px; color: #0b7d74; border-color: #bfe7e1; background: #f1fbf9; opacity: 1; cursor: progress; }
.competitor-analysis-progress { display: grid; gap: 11px; margin-top: 4px; padding: 16px 18px; border: 1px solid #d4eeea; border-radius: 14px; background: linear-gradient(180deg,#f6fcfb,#fff); }
.competitor-analysis-progress.is-queued { border-color: #e6e1f5; background: linear-gradient(180deg,#f8f7fd,#fff); }
.competitor-analysis-progress-top { display: flex; align-items: center; gap: 10px; }
.competitor-analysis-progress-top strong { flex: 1; min-width: 0; color: #20314a; font-size: 13px; font-weight: 750; line-height: 1.45; }
.competitor-analysis-progress-top time { color: #7d8a9b; font-size: 12px; font-variant-numeric: tabular-nums; }
.competitor-analysis-progress-bar { position: relative; height: 5px; overflow: hidden; border-radius: 99px; background: #e7f1ef; }
.competitor-analysis-progress-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg,#0b9c91,#3fc2b4); transition: width .5s ease; }
.competitor-analysis-progress-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); transform: translateX(-100%); animation: competitor-analysis-sheen 1.6s ease-in-out infinite; }
@keyframes competitor-analysis-sheen { to { transform: translateX(100%); } }
.competitor-analysis-progress ol { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.competitor-analysis-progress li { display: inline-flex; align-items: center; gap: 6px; color: #a2acba; font-size: 11.5px; font-weight: 650; }
.competitor-analysis-progress li b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #a2acba; background: #eef1f5; font-size: 10px; }
.competitor-analysis-progress li.is-active { color: #0b7d74; }
.competitor-analysis-progress li.is-active b { color: #fff; background: #0b9c91; }
.competitor-analysis-progress li.is-done { color: #50607a; }
.competitor-analysis-progress li.is-done b { color: #087969; background: #dcf4ee; }
.competitor-analysis-error { margin: 0 0 12px; padding: 10px 13px; border-radius: 10px; color: #a3392f; background: #fdf1ef; font-size: 12.5px; line-height: 1.5; }
.competitor-opening-analysis.is-running { flex-direction: column; align-items: stretch; gap: 14px; }
.competitor-opening-analysis.is-running .competitor-analysis-progress { margin-top: 0; }
.competitor-detail-status-grid.is-five { grid-template-columns: repeat(5,1fr); }
.competitor-detail-status-grid .is-running { border-color: #bfe7e1; background: #f4fbfa; }
.competitor-detail-status-grid .is-running > b { background: #e2f5f2; }
.competitor-detail-status-grid .is-running small { color: #0b7d74; }

.competitor-ai-summary { position: relative; display: grid; gap: 12px; padding: 20px 22px; border: 1px solid transparent; border-radius: 19px; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,#4f8cf7,#9a73d6,#e07a8d) border-box; }
.competitor-ai-summary-head { display: flex; align-items: center; gap: 9px; }
.competitor-ai-summary-head h2 { flex: 1; margin: 0; color: #1d2a40; font-size: 16px; }
.competitor-ai-summary-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#4f8cf7,#9a73d6 55%,#e07a8d); font-size: 14px; }
.competitor-ai-summary.is-running .competitor-ai-summary-mark { animation: competitor-ai-summary-glow 1.6s ease-in-out infinite; }
@keyframes competitor-ai-summary-glow { 50% { transform: scale(.9) rotate(18deg); opacity: .75; } }
.competitor-ai-summary-button { padding: 8px 16px; border: 0; border-radius: 99px; color: #fff; background: linear-gradient(120deg,#4f8cf7,#8a6fd8); font-size: 13px; font-weight: 750; cursor: pointer; box-shadow: 0 4px 12px rgba(95,110,230,.22); transition: transform .15s ease, box-shadow .15s ease; }
.competitor-ai-summary-button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(95,110,230,.3); }
.competitor-ai-summary.is-missing, .competitor-ai-summary.is-failed { padding-block: 14px; }
.competitor-ai-summary .competitor-analysis-error { margin: 0; }
.competitor-ai-summary .competitor-analysis-progress { border-color: #e2e4f7; background: linear-gradient(180deg,#f7f7fe,#fff); }
.competitor-ai-summary .competitor-analysis-progress-bar { background: #eceefb; }
.competitor-ai-summary .competitor-analysis-progress-bar i { background: linear-gradient(90deg,#4f8cf7,#9a73d6); }
.competitor-ai-summary .competitor-analysis-progress li.is-active { color: #5b5fd6; }
.competitor-ai-summary .competitor-analysis-progress li.is-active b { background: #7a6be0; }
.competitor-ai-summary .competitor-analysis-spinner { border-color: rgba(122,107,224,.22); border-top-color: #7a6be0; }
.competitor-ai-summary-skeleton { display: grid; gap: 8px; }
.competitor-ai-summary-skeleton i { height: 10px; border-radius: 6px; background: linear-gradient(90deg,#eef0fb 25%,#f8f8fe 50%,#eef0fb 75%); background-size: 200% 100%; animation: competitor-ai-summary-shimmer 1.4s linear infinite; }
.competitor-ai-summary-skeleton i:nth-child(2) { width: 88%; }
.competitor-ai-summary-skeleton i:nth-child(3) { width: 62%; }
@keyframes competitor-ai-summary-shimmer { to { background-position: -200% 0; } }
.competitor-ai-summary-overview { margin: 0; color: #26344b; font-size: 14px; line-height: 1.75; }
.competitor-ai-summary h3 { margin: 4px 0 0; color: #1d2a40; font-size: 13px; }
.competitor-ai-summary-points { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.competitor-ai-summary-points li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 12px; padding: 9px 0; border-top: 1px solid #f0f1f6; }
.competitor-ai-summary-points li:first-child { border-top: 0; }
.competitor-ai-summary-time { min-width: 52px; padding: 3px 8px; border: 0; border-radius: 7px; color: #3567d6; background: #eef3fe; font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; cursor: pointer; }
.competitor-ai-summary-time:hover { background: #dfe8fd; }
.competitor-ai-summary-points strong { display: block; color: #1f2c44; font-size: 13px; line-height: 1.5; }
.competitor-ai-summary-points p { margin: 2px 0 0; color: #5a6679; font-size: 12.5px; line-height: 1.65; }
.competitor-ai-summary-note { color: #98a1b0; font-size: 11px; }
@media (max-width: 1100px) {
  .competitor-detail-status-grid.is-five { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 760px) {
  .competitor-detail-status-grid.is-five { grid-template-columns: repeat(2,1fr); }
  .competitor-ai-summary { padding: 16px; }
  .competitor-ai-summary-points li { grid-template-columns: 1fr; gap: 6px; }
  .competitor-ai-summary-time { justify-self: start; }
}

/* Group original sticky-note grids by age; do not restyle cards or archive data. */
.shared-memo-sticker-sections .shared-memo-recent-section > h3,
.shared-memo-sticker-sections .shared-memo-past-section > h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: #1e293b; font-size: 15px; }
.shared-memo-sticker-sections h3 > span { color: #64748b; font-size: 12px; font-weight: 500; }
.shared-memo-sticker-sections .shared-memo-past-section { margin-top: 28px; }
.shared-memo-period-description { margin: -6px 0 14px; color: #64748b; font-size: 12px; }
.shared-memo-period-empty { margin: 14px 0 0; color: #64748b; font-size: 12px; }
.shared-memo-month { margin-top: 10px; border: 1px solid #d9e3ec; border-radius: 10px; background: rgba(255,255,255,.6); }
.shared-memo-month > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; list-style: none; cursor: pointer; color: #334155; font-size: 13px; border-radius: 10px; }
.shared-memo-month > summary::-webkit-details-marker { display: none; }
.shared-memo-month > summary > span:last-child { margin-left: auto; color: #64748b; font-size: 12px; }
.shared-memo-month > summary:hover { background: rgba(255,255,255,.8); }
.shared-memo-month > summary:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.shared-memo-month-chevron { font-size: 20px; line-height: 1; transition: transform .15s; }
.shared-memo-month[open] > summary .shared-memo-month-chevron { transform: rotate(90deg); }
.shared-memo-month-content { padding: 6px 16px 18px; }
.shared-memo-sticker-sections .shared-memo-grid { grid-template-columns: repeat(auto-fill,minmax(min(210px,100%),1fr)); }
.shared-memo-sticker-sections .shared-memo-card { grid-template-columns: minmax(0,1fr); }
.shared-memo-sticker-sections .shared-memo-card > * { min-width: 0; }
@media (max-width: 700px) {
  .shared-memo-month > summary { padding: 12px; }
  .shared-memo-month-content { padding: 4px 10px 14px; }
}