:root {
  --red: #ed1c24;
  --red-dark: #c91219;
  --black: #111111;
  --ink: #171717;
  --muted: #707070;
  --line: #e7e7e7;
  --soft: #f5f5f5;
  --soft-red: #fff1f2;
  --white: #ffffff;
  --radius: 18px;
  --shadow: 0 18px 60px rgba(0,0,0,.07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); padding: 24px 18px 18px; display: flex; flex-direction: column; background: #fff; z-index: 20; }
.brand-wrap { min-height: 108px; display: flex; align-items: center; justify-content: center; padding: 0 8px 14px; position: relative; }
.brand-logo { width: 92px; height: 92px; flex: 0 0 92px; object-fit: contain; border-radius: 50%; display: block; }
.nav { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.nav-item { border: 0; background: transparent; color: #5f5f5f; padding: 13px 14px; border-radius: 12px; display: flex; align-items: center; gap: 12px; text-align: left; font-weight: 650; transition: .2s ease; }
.nav-item:hover { background: var(--soft); color: var(--black); }
.nav-item.active { background: var(--black); color: #fff; }
.nav-item.active .nav-icon { color: var(--red); }
.nav-icon { width: 22px; text-align: center; font-size: 18px; }
.sidebar-callout { margin-top: auto; background: var(--soft); border-radius: 16px; padding: 17px; }
.sidebar-callout strong { display: block; margin: 7px 0 13px; font-size: 15px; }
.progress-track { height: 7px; background: #dedede; border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--red); border-radius: 99px; transition: width .4s ease; }
.sidebar-callout small { color: var(--muted); display: block; margin-top: 8px; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; padding: 18px 8px 0; }
.status-dot { width: 8px; height: 8px; border-radius: 99px; background: #2fb769; box-shadow: 0 0 0 4px #e7f8ee; }
.main-content { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; background: rgba(255,255,255,.93); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); min-height: 92px; padding: 18px 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 16px; }
.eyebrow { margin: 0 0 4px; color: var(--red); font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.topbar h1 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.employee-picker { min-width: 205px; display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--line); padding-left: 16px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--black); color: #fff; display: grid; place-items: center; font-weight: 850; font-size: 12px; }
.employee-picker-copy { display: flex; flex-direction: column; min-width: 0; }
.employee-picker-copy small { color: var(--muted); font-size: 10px; }
.employee-picker select { border: 0; background: transparent; font-weight: 750; max-width: 150px; padding: 2px 20px 2px 0; }
.notice-bar { margin: 20px 34px 0; padding: 11px 14px; background: var(--soft-red); border: 1px solid #ffd4d6; color: #6d2326; border-radius: 12px; font-size: 12px; display: flex; justify-content: center; align-items: center; gap: 5px; position: relative; }
.notice-bar button { position: absolute; right: 12px; border: 0; background: transparent; color: #8d4c4f; font-size: 18px; }
.page { display: none; padding: 28px 34px 60px; max-width: 1500px; margin: 0 auto; }
.page.active { display: block; animation: pageIn .25s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hero-card { padding: 42px 46px; color: #fff; background: var(--black); border-radius: 24px; min-height: 310px; display: grid; grid-template-columns: 1.5fr .5fr; align-items: center; gap: 30px; overflow: hidden; position: relative; }
.hero-card::after { content: "Q"; position: absolute; right: 15%; top: -112px; font-size: 420px; line-height: 1; font-weight: 950; color: rgba(255,255,255,.025); transform: rotate(-10deg); }
.pill { display: inline-flex; align-items: center; border-radius: 99px; font-size: 10px; letter-spacing: .13em; font-weight: 850; padding: 8px 11px; }
.pill.red { background: var(--red); color: #fff; }
.hero-card h2, .academy-hero h2 { font-size: clamp(36px, 5vw, 68px); letter-spacing: -.055em; line-height: .98; margin: 21px 0 17px; max-width: 780px; }
.hero-card h2 span, .academy-hero h2 span { color: var(--red); }
.hero-card p { max-width: 660px; color: #bcbcbc; font-size: 16px; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.primary-button, .secondary-button, .text-button { border: 0; border-radius: 10px; font-weight: 800; transition: .2s ease; }
.primary-button { background: var(--red); color: #fff; padding: 13px 18px; box-shadow: 0 8px 20px rgba(237,28,36,.22); }
.primary-button:hover { background: var(--red-dark); transform: translateY(-1px); }
.secondary-button { background: var(--soft); color: var(--black); padding: 11px 15px; }
.secondary-button:hover { background: #e8e8e8; }
.text-button { background: transparent; color: inherit; padding: 10px 0; }
.hero-score { justify-self: end; width: 210px; height: 210px; border-radius: 50%; border: 1px solid #333; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; background: radial-gradient(circle at center, #191919, #111); }
.hero-score strong { font-size: 62px; letter-spacing: -.07em; }
.hero-score small, .score-label { color: #929292; font-size: 11px; }
.score-label { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.mini-bars { display: flex; align-items: end; gap: 4px; height: 25px; margin-top: 9px; }
.mini-bars i { display: block; width: 5px; border-radius: 3px; background: var(--red); }
.section-heading, .panel-header, .page-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-heading { margin: 38px 0 17px; }
.section-heading h2, .page-intro h2 { margin: 0; font-size: 29px; letter-spacing: -.04em; }
.date-range, .score-key { color: var(--muted); font-size: 12px; }
.month-note { display: block; color: var(--muted); font-size: 10px; font-weight: 600; margin-top: 5px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.metric-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-height: 135px; position: relative; overflow: hidden; }
.metric-card::after { content: ""; position: absolute; width: 70px; height: 70px; border: 14px solid var(--soft); border-radius: 50%; right: -28px; top: -26px; }
.metric-card.red-accent { border-color: #ffc8cb; background: linear-gradient(145deg,#fff,#fff7f7); }
.metric-card p { color: var(--muted); font-size: 12px; margin: 0; }
.metric-card strong { display: block; font-size: 35px; letter-spacing: -.05em; margin: 12px 0 4px; }
.metric-card small { font-size: 11px; color: #7e7e7e; }
.metric-card .trend-up { color: #16814a; }
.two-column-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(320px,.75fr); gap: 15px; margin-top: 15px; }
.three-column-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin-top: 15px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 22px; }
.panel-header { align-items: center; }
.panel-header h3, .insight-card h3, .playbook-card h3 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.legend { display: flex; gap: 13px; color: var(--muted); font-size: 10px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.legend-black { background: #111; } .legend-red { background: var(--red); }
.chart-wrap { height: 275px; margin-top: 15px; }
.chart-wrap canvas { width: 100%; height: 100%; }
.completion-badge { border-radius: 99px; background: var(--soft); padding: 7px 10px; font-size: 11px; font-weight: 800; }
.checklist { margin-top: 12px; }
.check-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.check-item:last-child { border: 0; }
.check-item input { accent-color: var(--red); width: 17px; height: 17px; }
.check-item strong { display: block; font-size: 13px; }
.check-item small { display: block; color: var(--muted); margin-top: 3px; font-size: 11px; }
.check-item.complete strong { text-decoration: line-through; color: #999; }
.insight-card { min-height: 195px; position: relative; padding-top: 58px; }
.insight-card.featured { background: var(--red); border-color: var(--red); color: #fff; }
.insight-card.featured .eyebrow, .insight-card.featured p { color: #fff; }
.insight-card p:last-child { color: var(--muted); line-height: 1.55; font-size: 13px; }
.number-chip { position: absolute; top: 19px; right: 19px; font-size: 12px; font-weight: 900; color: var(--red); }
.featured .number-chip { color: #fff; }
.page-intro { margin-bottom: 22px; }
.page-intro p { color: var(--muted); margin: 8px 0 0; }
.save-status { color: #258858; display: flex; align-items: center; gap: 7px; font-size: 12px; }
.save-status span { width: 8px; height: 8px; background: #2fb769; border-radius: 50%; }
.stats-form { padding: 0; overflow: hidden; }
.form-section { padding: 25px; border-bottom: 1px solid var(--line); }
.form-section-title { display: flex; gap: 14px; align-items: start; margin-bottom: 21px; }
.form-section-title > span { width: 30px; height: 30px; border-radius: 8px; background: var(--black); color: #fff; display: grid; place-items: center; font-weight: 850; font-size: 11px; }
.form-section-title h3 { margin: 1px 0 4px; font-size: 17px; }
.form-section-title p { color: var(--muted); margin: 0; font-size: 12px; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2,1fr); }
.form-grid.three { grid-template-columns: repeat(3,1fr); }
.form-grid.four { grid-template-columns: repeat(4,1fr); }
label { color: #4a4a4a; font-size: 11px; font-weight: 750; }
input, select, textarea { width: 100%; border: 1px solid #dcdcdc; border-radius: 10px; background: #fff; padding: 12px; margin-top: 7px; color: var(--black); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(237,28,36,.08); }
textarea { resize: vertical; }
.full-label { display: block; margin-top: 14px; }
.form-footer { padding: 20px 25px; display: flex; align-items: center; justify-content: space-between; background: #fafafa; }
.calculated-preview { color: var(--muted); font-size: 12px; }
.calculated-preview strong { color: var(--red); }
.recent-entries { margin-top: 18px; }
.table-wrap { overflow-x: auto; margin-top: 15px; }
table { width: 100%; border-collapse: collapse; min-width: 730px; }
th { color: #8b8b8b; font-size: 10px; letter-spacing: .06em; text-align: left; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--line); }
td { font-size: 12px; padding: 13px 12px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
.table-person { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.mini-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 9px; font-weight: 900; }
.score-cell { color: var(--red); font-weight: 900; }
.delete-entry { border: 0; background: transparent; color: #aaa; font-size: 18px; }
.delete-entry:hover { color: var(--red); }
.academy-hero { background: var(--black); color: #fff; border-radius: 24px; padding: 40px 46px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.academy-hero p { color: #b8b8b8; max-width: 650px; line-height: 1.6; }
.academy-progress-ring { --progress: 0deg; min-width: 170px; width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--red) var(--progress), #292929 0); position: relative; }
.academy-progress-ring::after { content: ""; position: absolute; inset: 11px; background: var(--black); border-radius: 50%; }
.academy-progress-ring div { position: relative; z-index: 1; text-align: center; }
.academy-progress-ring strong { display: block; font-size: 33px; }
.academy-progress-ring span { color: #999; font-size: 11px; }
.academy-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 15px; margin-top: 18px; align-items: start; }
.module-list { display: flex; flex-direction: column; gap: 8px; }
.module-button { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; text-align: left; }
.module-button.active { border-color: var(--red); box-shadow: 0 7px 22px rgba(237,28,36,.07); }
.module-number { width: 34px; height: 34px; border-radius: 10px; background: var(--soft); display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.module-button.active .module-number { background: var(--red); color: #fff; }
.module-button strong { display: block; font-size: 13px; }
.module-button small { color: var(--muted); font-size: 10px; }
.module-status { font-size: 15px; color: #bbb; }
.module-status.done { color: #218653; }
.lesson-view { min-height: 580px; padding: 34px; }
.lesson-kicker { color: var(--red); font-size: 11px; font-weight: 850; letter-spacing: .12em; }
.lesson-view h2 { font-size: 35px; letter-spacing: -.045em; margin: 12px 0; }
.lesson-view .lesson-summary { color: var(--muted); font-size: 15px; line-height: 1.65; }
.lesson-block { margin-top: 27px; }
.lesson-block h3 { font-size: 15px; }
.lesson-points { display: grid; gap: 10px; }
.lesson-point { border-left: 3px solid var(--red); background: #fafafa; padding: 13px 15px; border-radius: 0 10px 10px 0; font-size: 13px; line-height: 1.5; }
.lesson-actions { display: flex; gap: 10px; margin-top: 28px; }
.playbook-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.playbook-card.large { grid-column: span 2; }
.timeline { margin-top: 20px; display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.timeline > div { padding: 16px; background: var(--soft); border-radius: 13px; border-top: 3px solid var(--black); }
.timeline > div:nth-child(4) { border-color: var(--red); background: var(--soft-red); }
.timeline span { color: var(--red); font-size: 10px; font-weight: 900; }
.timeline strong { display: block; margin: 9px 0 6px; font-size: 13px; }
.timeline p { color: var(--muted); margin: 0; line-height: 1.45; font-size: 11px; }
.copy-list { display: grid; gap: 8px; margin-top: 15px; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: var(--soft); border-radius: 11px; padding: 12px; font-size: 12px; }
.copy-row button { border: 0; background: #fff; border-radius: 8px; padding: 7px 9px; font-size: 10px; font-weight: 850; }
.clean-list { padding-left: 18px; color: #555; line-height: 1.8; font-size: 13px; }
.playbook-card.danger { border-color: #ffc4c7; background: #fffafa; }
.podium { display: grid; grid-template-columns: repeat(3,1fr); align-items: end; gap: 12px; margin: 28px auto 18px; max-width: 850px; }
.podium.two { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 620px; }
.podium-card { border: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 23px; text-align: center; min-height: 180px; background: #fff; position: relative; }
.podium-card.first { min-height: 230px; border-top: 5px solid var(--red); }
.podium-card.second { min-height: 195px; }
.podium-card.third { min-height: 170px; }
.podium-rank { font-size: 35px; font-weight: 950; color: #dedede; }
.podium-card.first .podium-rank { color: var(--red); }
.podium-card h3 { margin: 8px 0 4px; }
.podium-card p { color: var(--muted); margin: 0; font-size: 11px; }
.podium-score { display: inline-block; margin-top: 14px; background: var(--black); color: #fff; border-radius: 99px; padding: 7px 10px; font-size: 11px; font-weight: 850; }
.funnel { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 20px; }
.funnel-step { min-height: 54px; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-radius: 8px; font-size: 12px; }
.funnel-step:nth-child(2) { background: #333; }
.funnel-step:nth-child(3) { background: #7d1a1e; }
.funnel-step:nth-child(4) { background: var(--red); }
.funnel-step strong { font-size: 19px; }
.observations { display: grid; gap: 10px; margin-top: 17px; }
.observation { background: var(--soft); border-radius: 12px; padding: 14px; display: flex; gap: 11px; }
.observation i { font-style: normal; color: var(--red); font-weight: 900; }
.observation strong { display: block; font-size: 12px; }
.observation p { color: var(--muted); margin: 4px 0 0; font-size: 11px; line-height: 1.5; }
.resource-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.resource-card { border: 1px solid var(--line); border-radius: 16px; padding: 23px; display: grid; grid-template-columns: 50px 1fr auto; gap: 17px; align-items: center; }
.resource-card > span { color: var(--red); font-size: 24px; font-weight: 950; }
.resource-card h3 { margin: 0 0 6px; }
.resource-card p:last-child { color: var(--muted); margin: 0; font-size: 12px; }
.resource-card button { border: 0; background: var(--black); color: #fff; border-radius: 9px; padding: 10px 13px; font-weight: 800; }
.toast { position: fixed; right: 22px; bottom: 22px; background: var(--black); color: #fff; border-radius: 12px; padding: 13px 16px; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; z-index: 100; }
.toast.show { opacity: 1; transform: none; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90; display: none; place-items: center; padding: 20px; }
.modal-backdrop.open { display: grid; }
.modal { width: min(720px,100%); max-height: 85vh; overflow-y: auto; position: relative; padding: 32px; }
.modal-close { position: absolute; top: 14px; right: 14px; border: 0; background: var(--soft); width: 34px; height: 34px; border-radius: 50%; font-size: 20px; }
.modal h2 { font-size: 31px; letter-spacing: -.04em; margin: 12px 0; }
.modal h3 { margin-top: 24px; }
.modal p, .modal li { color: #555; line-height: 1.65; font-size: 13px; }
.icon-button { border: 0; background: var(--soft); border-radius: 9px; width: 38px; height: 38px; }
.mobile-only { display: none; }
@media print {
  .sidebar, .topbar, .notice-bar, .page:not(#page-reports), #printReport { display: none !important; }
  .app-shell { display: block; } #page-reports { display: block !important; padding: 0; }
  .panel { break-inside: avoid; }
}
@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .timeline { grid-template-columns: repeat(3,1fr); }
  .form-grid.four { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 850px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -270px; width: 250px; transition: left .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { left: 0; }
  .mobile-only { display: inline-grid; place-items: center; }
  .desktop-only { display: none; }
  .topbar { padding: 14px 18px; min-height: 78px; }
  .topbar h1 { font-size: 18px; }
  .employee-picker { min-width: 0; border: 0; padding: 0; }
  .employee-picker-copy small { display: none; }
  .employee-picker select { max-width: 105px; font-size: 11px; }
  .notice-bar { margin: 14px 18px 0; padding-right: 38px; justify-content: flex-start; }
  .page { padding: 22px 18px 45px; }
  .hero-card { grid-template-columns: 1fr; padding: 32px 26px; }
  .hero-score { justify-self: start; width: 145px; height: 145px; }
  .hero-score strong { font-size: 43px; }
  .two-column-grid, .three-column-grid, .academy-layout, .resource-grid { grid-template-columns: 1fr; }
  .academy-hero { flex-direction: column; align-items: flex-start; padding: 32px 26px; }
  .playbook-grid { grid-template-columns: 1fr; }
  .playbook-card.large { grid-column: span 1; }
  .timeline { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .metric-grid, .form-grid.two, .form-grid.three, .form-grid.four { grid-template-columns: 1fr; }
  .section-heading, .page-intro, .form-footer { align-items: flex-start; flex-direction: column; }
  .panel { padding: 18px; }
  .hero-card h2, .academy-hero h2 { font-size: 38px; }
  .podium { grid-template-columns: 1fr; align-items: stretch; }
  .podium-card { min-height: 0 !important; border-radius: 15px; }
  .podium-card.first { order: -1; }
  .resource-card { grid-template-columns: 40px 1fr; }
  .resource-card button { grid-column: 2; justify-self: start; }
}

/* Admin education editor */
[hidden] { display: none !important; }
.nav { min-height: 0; overflow-y: auto; padding-right: 2px; }
.team-announcement { margin-top: 15px; border: 1px solid #ffc9cc; border-left: 4px solid var(--red); background: linear-gradient(135deg,#fff,#fff7f7); border-radius: 14px; padding: 15px 18px; font-size: 13px; font-weight: 750; line-height: 1.55; }
.editor-heading { align-items: center; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.danger-button { border: 1px solid #ffc7ca; border-radius: 10px; background: #fff6f6; color: #a92126; padding: 11px 15px; font-weight: 800; }
.danger-button:hover { background: #ffecee; }
.editor-save-strip { margin-bottom: 14px; min-height: 48px; border: 1px solid #dcefe3; background: #f6fcf8; border-radius: 13px; padding: 11px 15px; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.editor-save-strip small { margin-left: auto; color: var(--muted); }
.editor-panel { margin-top: 15px; padding: 25px; }
.editor-form-grid { margin-top: 22px; }
.editor-span-two { grid-column: span 2; }
.editor-help { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 14px 0 0; }
.editor-subheading { margin-top: 27px; padding-top: 24px; border-top: 1px solid var(--line); }
.editor-subheading h3 { margin: 0; font-size: 17px; }
.timeline-editor { display: grid; gap: 10px; margin-top: 15px; }
.timeline-editor-row { display: grid; grid-template-columns: 38px 110px minmax(170px,.8fr) minmax(240px,1.5fr); gap: 11px; align-items: start; border: 1px solid var(--line); border-radius: 13px; padding: 13px; background: #fcfcfc; }
.timeline-editor-row > span { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--black); color: #fff; font-size: 10px; font-weight: 900; margin-top: 20px; }
.timeline-editor-row input, .timeline-editor-row textarea { background: #fff; }
.module-editor-picker { margin-top: 20px; max-width: 430px; }
.editor-locked { display: flex; align-items: center; gap: 16px; padding: 27px; background: #fafafa; }
.editor-locked h3 { margin: 0 0 6px; }
.editor-locked p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.lock-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--soft-red); display: grid; place-items: center; font-size: 20px; }
.empty-copy { color: var(--muted); font-size: 12px; margin: 0; }

@media (max-width: 1000px) {
  .timeline-editor-row { grid-template-columns: 38px 100px 1fr; }
  .timeline-editor-row label:last-child { grid-column: 2 / -1; }
}
@media (max-width: 700px) {
  .editor-actions { width: 100%; justify-content: flex-start; }
  .editor-actions button { flex: 1; }
  .editor-save-strip { align-items: flex-start; flex-wrap: wrap; }
  .editor-save-strip small { width: 100%; margin-left: 16px; }
  .editor-span-two { grid-column: span 1; }
  .timeline-editor-row { grid-template-columns: 36px 1fr; }
  .timeline-editor-row > span { grid-row: 1 / span 3; }
  .timeline-editor-row label, .timeline-editor-row label:last-child { grid-column: 2; }
}

/* TikTok analytics screenshot workflow */
.screenshot-section { background: linear-gradient(180deg, #fff 0%, #fffafa 100%); }
.analytics-upload-layout { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); gap: 16px; align-items: stretch; }
.analytics-dropzone { min-height: 238px; border: 1.5px dashed #cfcfcf; border-radius: 16px; background: #fafafa; padding: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; transition: .2s ease; cursor: pointer; }
.analytics-dropzone:hover, .analytics-dropzone.dragging { border-color: var(--red); background: var(--soft-red); transform: translateY(-1px); }
.upload-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--black); color: #fff; display: grid; place-items: center; font-size: 24px; line-height: 1; margin-bottom: 4px; }
.analytics-dropzone strong { font-size: 16px; }
.analytics-dropzone small { color: var(--muted); max-width: 310px; line-height: 1.5; }
.upload-types { margin-top: 7px; color: var(--red); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.analytics-preview { min-height: 238px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #111; position: relative; display: grid; grid-template-columns: minmax(145px, .85fr) minmax(190px, 1.15fr); }
.analytics-preview[hidden] { display: none; }
.analytics-preview img { width: 100%; height: 100%; min-height: 238px; max-height: 330px; object-fit: contain; background: #0b0b0b; }
.preview-details { background: #fff; padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.preview-details > div:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.preview-details strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.preview-details small { color: var(--muted); line-height: 1.5; }
.ai-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #22a35a; box-shadow: 0 0 0 4px #e7f8ee; flex: 0 0 auto; }
.preview-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.text-danger-button { border: 0; background: transparent; color: var(--red); font-size: 12px; font-weight: 850; padding: 9px 2px; }
.ai-extraction-status { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: #fff; }
.ai-status-heading { display: flex; align-items: center; gap: 11px; }
.ai-status-heading div { display: flex; flex-direction: column; gap: 2px; }
.ai-status-heading small { color: var(--muted); }
.ai-spark { width: 32px; height: 32px; border-radius: 10px; background: var(--soft-red); color: var(--red); display: grid; place-items: center; font-weight: 900; }
.ai-extraction-status p { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.ai-extraction-status.success { border-color: #bfe8cf; background: #fbfffc; }
.ai-extraction-status.warning { border-color: #ffd0d2; background: #fffafa; }
.ai-progress { margin-top: 14px; height: 6px; background: #ececec; border-radius: 99px; overflow: hidden; }
.ai-progress span { display: block; width: 0; height: 100%; background: var(--red); transition: width .2s ease; }
.extraction-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.extraction-summary span { padding: 7px 9px; border-radius: 9px; background: var(--soft); font-size: 10px; font-weight: 800; }
.extraction-summary span strong { color: var(--red); }
.compact-admin-grid { align-items: stretch; }
.admin-permission-note { border: 1px solid #ffd1d3; background: var(--soft-red); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.admin-permission-note strong { color: var(--red); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.admin-permission-note span { color: #6c4b4d; font-size: 11px; line-height: 1.5; }
.admin-request-section.employee-locked input { background: #f3f3f3; color: #999; pointer-events: none; }
.screenshot-table-button, .requests-edit-button { border: 0; background: var(--soft); color: var(--black); border-radius: 8px; padding: 7px 9px; font-weight: 800; font-size: 10px; white-space: nowrap; }
.screenshot-table-button:hover, .requests-edit-button:hover { background: var(--black); color: #fff; }
.requests-cell { display: flex; align-items: center; gap: 7px; }
.screenshot-modal-panel { width: min(920px, 94vw); max-height: 92vh; overflow: auto; }
.screenshot-modal-panel h2 { margin: 4px 0 18px; }
.screenshot-modal-panel img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #111; border-radius: 13px; }
.save-button-loading { opacity: .68; pointer-events: none; }

@media (max-width: 900px) {
  .analytics-upload-layout { grid-template-columns: 1fr; }
  .analytics-preview { grid-template-columns: minmax(120px, .75fr) minmax(170px, 1.25fr); }
}
@media (max-width: 600px) {
  .analytics-preview { grid-template-columns: 1fr; }
  .analytics-preview img { max-height: 380px; }
  .preview-details { padding: 17px; }
  .analytics-dropzone { min-height: 210px; }
}

.brand-wrap > .icon-button { position: absolute; right: 8px; top: 27px; }
.csv-image-note { display:inline-block; padding:6px 8px; border-radius:8px; background:var(--soft-red); color:var(--red); font-size:10px; font-weight:800; white-space:nowrap; }

/* Local account access and saved-session editing */
body.auth-locked { overflow: hidden; }
body.auth-locked .app-shell { display: none; }
.login-screen { min-height: 100vh; padding: 28px; display: grid; place-items: center; background: radial-gradient(circle at top, #ffffff 0, #f5f5f5 58%, #ededed 100%); }
.login-screen[hidden] { display: none !important; }
.login-card { width: min(540px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 28px 90px rgba(0,0,0,.12); padding: 38px; text-align: center; }
.login-logo { width: 94px; height: 94px; object-fit: contain; border-radius: 50%; display: block; margin: 0 auto 20px; }
.login-card h1 { margin: 16px 0 10px; font-size: clamp(30px, 6vw, 43px); line-height: 1; letter-spacing: -.055em; }
.login-intro { color: var(--muted); max-width: 430px; margin: 0 auto 25px; line-height: 1.55; font-size: 13px; }
.login-account-choices { display: grid; gap: 10px; text-align: left; }
.login-account-card { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 15px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 13px; color: var(--black); text-align: left; transition: .18s ease; }
.login-account-card:hover { border-color: var(--red); transform: translateY(-1px); box-shadow: 0 10px 25px rgba(237,28,36,.08); }
.login-account-card strong, .selected-login-account strong { display: block; font-size: 14px; }
.login-account-card small, .selected-login-account small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; line-height: 1.4; }
.login-account-card i { color: var(--red); font-style: normal; font-size: 20px; }
.login-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--black); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.login-form { text-align: left; }
.login-back { border: 0; background: transparent; color: var(--muted); padding: 0 0 15px; font-size: 11px; font-weight: 750; }
.selected-login-account { display: flex; align-items: center; gap: 12px; background: var(--soft); border-radius: 14px; padding: 12px; margin-bottom: 17px; }
.login-form label { display: block; margin-top: 12px; }
.login-submit { width: 100%; margin-top: 18px; }
.login-message { min-height: 18px; margin: 14px 0 0; font-size: 11px; font-weight: 750; }
.login-message.error { color: var(--red); }
.login-message.success { color: #218653; }
.login-security-note { display: block; color: #929292; line-height: 1.5; margin-top: 20px; }
.account-text-button { border: 0; background: transparent; color: #686868; font-size: 10px; font-weight: 800; padding: 8px 4px; white-space: nowrap; }
.account-text-button:hover { color: var(--black); }
.logout-button { color: var(--red); }
.employee-picker select:disabled { color: var(--black); opacity: 1; cursor: default; }
.entry-actions { display: inline-flex; align-items: center; gap: 7px; }
.table-edit-button { border: 0; border-radius: 8px; background: var(--black); color: #fff; padding: 7px 10px; font-size: 10px; font-weight: 850; white-space: nowrap; }
.table-edit-button:hover { background: var(--red); }
.edit-entry-modal { width: min(920px,100%); }
.edit-entry-help { margin: -3px 0 22px; }
.edit-metric-grid { margin-top: 15px; }
.edit-entry-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.edit-entry-footer > span { color: var(--muted); font-size: 10px; max-width: 390px; line-height: 1.45; }
.edit-entry-footer > div { display: flex; gap: 8px; }
#editEnquiries:disabled, #editEmployee:disabled { background: #f0f0f0; color: #777; }

@media (max-width: 850px) {
  .account-text-button:not(.logout-button) { display: none; }
  .logout-button { display: inline-block; font-size: 10px; }
  .topbar-actions { gap: 8px; }
  .login-card { padding: 28px 22px; }
}
@media (max-width: 600px) {
  .login-screen { padding: 14px; }
  .login-card { border-radius: 22px; }
  .edit-entry-footer { align-items: stretch; flex-direction: column; }
  .edit-entry-footer > div { width: 100%; }
  .edit-entry-footer button { flex: 1; }
}

/* Cloud authentication and sync additions */
.cloud-login-form { margin-top: 22px; }
.login-reset-button { width: 100%; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; padding: 13px 8px 0; }
.login-reset-button:hover { color: var(--red); }
.cloud-login-note { margin-top: 22px; border: 1px solid var(--line); background: var(--soft); border-radius: 15px; padding: 14px; text-align: left; display: grid; gap: 4px; }
.cloud-login-note strong { font-size: 12px; }
.cloud-login-note span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.save-status.syncing { color: #9a6900; }
.save-status.syncing span { background: #d99c1a; }
.save-status.error { color: var(--red); }
.save-status.error span { background: var(--red); }
.save-status.cloud-ready { color: #258858; }
.cloud-account-email { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }

/* QCS Email Marketing Centre */
.email-page-intro { align-items: center; }
.email-provider-status { min-width: 230px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; background: #fff; }
.email-provider-status > span { width: 10px; height: 10px; border-radius: 50%; background: #d99c1a; box-shadow: 0 0 0 4px #fff4d8; }
.email-provider-status strong, .email-provider-status small { display: block; }
.email-provider-status strong { font-size: 12px; }
.email-provider-status small { color: var(--muted); margin-top: 2px; font-size: 10px; }
.email-provider-status.ready > span { background: #2fb769; box-shadow: 0 0 0 4px #e7f8ee; }
.email-provider-status.error > span { background: var(--red); box-shadow: 0 0 0 4px var(--soft-red); }
.email-compliance-banner { margin-bottom: 16px; border: 1px solid #ffd1d3; border-left: 4px solid var(--red); border-radius: 12px; background: #fff9f9; padding: 13px 15px; display: flex; flex-wrap: wrap; gap: 7px; font-size: 12px; color: #672b2e; }
.email-compliance-banner span { color: #7a5a5c; }
.email-metric-grid { margin-bottom: 17px; }
.email-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; margin-bottom: 4px; }
.email-tab { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: #666; padding: 10px 14px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.email-tab:hover { border-color: #bbb; color: var(--black); }
.email-tab.active { background: var(--black); color: #fff; border-color: var(--black); }
.email-panel { display: none; }
.email-panel.active { display: block; animation: pageIn .2s ease; }
.email-filter-row { display: grid; grid-template-columns: minmax(260px,1fr) 210px; gap: 12px; margin-top: 18px; }
.email-table { min-width: 940px; }
.email-status-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 6px 9px; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; background: var(--soft); color: #555; }
.email-status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #999; }
.email-status-badge.sent::before, .email-status-badge.delivered::before, .email-status-badge.subscribed::before { background: #2fb769; }
.email-status-badge.scheduled::before, .email-status-badge.queued::before { background: #d99c1a; }
.email-status-badge.failed::before, .email-status-badge.bounced::before, .email-status-badge.unsubscribed::before { background: var(--red); }
.email-status-badge.cancelled::before, .email-status-badge.pending::before { background: #888; }
.email-campaign-name strong { display: block; font-size: 12px; }
.email-campaign-name small { display: block; color: var(--muted); margin-top: 3px; max-width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-table-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.email-table-actions button { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 7px 9px; font-size: 9px; font-weight: 800; }
.email-table-actions button:hover { border-color: var(--red); color: var(--red); }
.email-table-actions button.danger { color: #a52a2f; }
.email-empty-state { text-align: center; padding: 45px 20px 30px; }
.email-empty-state strong, .email-empty-state span { display: block; }
.email-empty-state strong { font-size: 16px; }
.email-empty-state span { color: var(--muted); margin-top: 6px; font-size: 12px; }
.email-compose-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(320px,.72fr); gap: 15px; align-items: start; }
.email-compose-form { min-width: 0; }
.email-draft-owner { color: var(--muted); font-size: 10px; }
.email-campaign-fields { margin-top: 20px; }
.email-audience-summary { margin-top: 15px; border: 1px solid #ffd5d7; background: var(--soft-red); border-radius: 12px; padding: 13px 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.email-audience-summary span { font-size: 11px; font-weight: 800; }
.email-audience-summary strong { color: var(--red); font-size: 25px; grid-row: span 2; }
.email-audience-summary small { color: var(--muted); font-size: 10px; }
.email-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid #dcdcdc; border-bottom: 0; border-radius: 10px 10px 0 0; padding: 8px; margin-top: 7px; background: #fafafa; }
.email-editor-toolbar button { border: 1px solid var(--line); background: #fff; min-width: 34px; border-radius: 7px; padding: 7px 9px; font-size: 10px; }
.email-editor-toolbar button:hover { border-color: var(--red); color: var(--red); }
.email-editor-surface { min-height: 330px; border: 1px solid #dcdcdc; border-radius: 0 0 10px 10px; padding: 23px; outline: none; line-height: 1.65; font-size: 14px; overflow-wrap: anywhere; }
.email-editor-surface:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(237,28,36,.08); }
.email-editor-surface:empty::before { content: attr(data-placeholder); color: #aaa; }
.email-editor-surface h1, .email-editor-surface h2, .email-editor-surface h3 { line-height: 1.15; }
.email-editor-surface a { color: var(--red); }
.email-editor-note { color: var(--muted); font-size: 10px; margin: 8px 0 0; }
.email-editor-note code, .email-help-copy code { background: var(--soft); border-radius: 5px; padding: 2px 5px; color: var(--black); }
.email-send-fields { margin-top: 17px; }
.email-confirmation { margin: 16px 0; display: flex; align-items: flex-start; gap: 9px; background: #fafafa; border: 1px solid var(--line); padding: 12px; border-radius: 10px; line-height: 1.45; }
.email-confirmation input { width: 17px; height: 17px; margin: 0; accent-color: var(--red); flex: 0 0 auto; }
.email-compose-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.email-action-status { min-height: 18px; color: var(--muted); font-size: 11px; margin: 12px 0 0; }
.email-action-status.success { color: #218653; }
.email-action-status.error { color: var(--red); }
.email-preview-panel { position: sticky; top: 112px; }
.email-preview-pill { background: var(--black); color: #fff; }
.email-inbox-preview { margin-top: 17px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.06); }
.email-preview-header { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
.email-preview-header img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.email-preview-header strong, .email-preview-header small { display: block; }
.email-preview-header small { color: var(--muted); margin-top: 2px; font-size: 9px; }
.email-inbox-preview h4 { margin: 18px 18px 4px; font-size: 18px; line-height: 1.25; }
.email-preview-text { color: var(--muted); margin: 0 18px; font-size: 10px; }
.email-preview-body { min-height: 250px; padding: 18px; line-height: 1.65; font-size: 12px; overflow-wrap: anywhere; }
.email-preview-body img { max-width: 100%; }
.email-preview-body a { color: var(--red); }
.email-preview-footer { background: #fafafa; border-top: 1px solid var(--line); color: #999; padding: 14px 18px; font-size: 9px; }
.email-contacts-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
.email-contact-form { margin-top: 17px; }
.email-csv-dropzone { margin-top: 16px; min-height: 120px; border: 1.5px dashed #ccc; border-radius: 14px; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; cursor: pointer; background: #fcfcfc; }
.email-csv-dropzone:hover { border-color: var(--red); background: #fffafa; }
.email-csv-dropzone > span { color: var(--red); font-size: 22px; }
.email-csv-dropzone strong { color: var(--black); }
.email-csv-dropzone small { color: var(--muted); font-weight: 500; }
.email-import-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.email-contact-list-panel { margin-top: 15px; }
.email-contact-identity strong, .email-contact-identity small { display: block; }
.email-contact-identity small { color: var(--muted); margin-top: 3px; }
.email-tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.email-tag { background: var(--soft); border-radius: 99px; padding: 5px 7px; font-size: 8px; font-weight: 800; }
.email-template-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 15px; }
.email-template-card { border: 1px solid var(--line); border-radius: 16px; padding: 19px; background: #fff; min-height: 180px; display: flex; flex-direction: column; }
.email-template-card .eyebrow { margin-bottom: 10px; }
.email-template-card h3 { margin: 0; font-size: 17px; }
.email-template-card p { color: var(--muted); font-size: 11px; line-height: 1.5; flex: 1; }
.email-template-card-actions { display: flex; gap: 7px; }
.email-template-card-actions button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 9px; font-size: 9px; font-weight: 800; }
.email-template-card-actions .use-template { background: var(--black); color: #fff; border-color: var(--black); }
.email-template-editor { max-width: 900px; }
.email-settings-card { max-width: 850px; }
.email-admin-pill { background: var(--soft-red); color: var(--red); }
.email-help-copy { color: var(--muted); font-size: 12px; line-height: 1.55; }
.email-setup-blocker { border: 1px solid #ffd1d3; background: #fffafa; border-radius: 12px; padding: 13px; margin-top: 13px; color: #783235; font-size: 11px; }
.email-rate { font-weight: 800; }
.email-rate.good { color: #218653; }
.email-rate.warn { color: #b26b00; }

@media (max-width: 1100px) {
  .email-compose-layout { grid-template-columns: 1fr; }
  .email-preview-panel { position: static; }
  .email-template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .email-provider-status { width: 100%; margin-top: 14px; }
  .email-filter-row, .email-contacts-layout { grid-template-columns: 1fr; }
  .email-template-grid { grid-template-columns: 1fr; }
  .email-compose-actions > button, .email-import-actions > button { flex: 1 1 45%; }
  .email-editor-surface { min-height: 260px; padding: 16px; }
}


/* QCS AI email writer */
.email-ai-writer { margin-top: 18px; margin-bottom: 20px; border: 1px solid #ffd2d5; background: linear-gradient(145deg,#fff 0%,#fff8f8 100%); border-radius: 16px; padding: 18px; box-shadow: inset 4px 0 0 var(--red); }
.email-ai-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.email-ai-header h3 { margin: 2px 0 5px; font-size: 18px; }
.email-ai-header p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; max-width: 720px; }
.email-ai-badge { flex: 0 0 auto; border: 1px solid #efc870; background: #fff8dd; color: #8a6300; border-radius: 99px; padding: 7px 10px; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.email-ai-badge.ready { border-color: #aee2c3; background: #eefaf3; color: #218653; }
.email-ai-badge.error { border-color: #ffc4c7; background: var(--soft-red); color: var(--red); }
.email-ai-options { margin-top: 13px; }
.email-ai-detail-fields { margin-top: 12px; }
.email-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.email-ai-actions button:disabled { opacity: .45; cursor: not-allowed; }
.email-ai-status { min-height: 17px; margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.email-ai-status.success { color: #218653; }
.email-ai-status.error { color: var(--red); }
.email-ai-subjects, .email-ai-compliance { margin-top: 13px; border-top: 1px solid #f0dadd; padding-top: 12px; }
.email-ai-subjects > strong, .email-ai-compliance > strong { display: block; margin-bottom: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.email-ai-subjects > div { display: flex; flex-wrap: wrap; gap: 6px; }
.email-ai-subjects button { border: 1px solid #e1c5c7; background: #fff; color: #4c3032; border-radius: 99px; padding: 7px 10px; font-size: 9px; text-align: left; }
.email-ai-subjects button:hover { border-color: var(--red); color: var(--red); }
.email-ai-compliance ul { margin: 0; padding-left: 18px; color: #6e5557; font-size: 10px; line-height: 1.55; }
@media (max-width:760px) {
  .email-ai-header { display: block; }
  .email-ai-badge { display: inline-flex; margin-top: 10px; }
  .email-ai-actions > button { flex: 1 1 45%; }
}

/* Telegram Public Request Tracker */
.telegram-tracker-status { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:15px; background:#fff; }
.telegram-tracker-status > span { width:10px; height:10px; border-radius:50%; background:#e1a326; box-shadow:0 0 0 5px #fff5d9; flex:0 0 auto; }
.telegram-tracker-status.ready > span { background:#2fb769; box-shadow:0 0 0 5px #e7f8ee; }
.telegram-tracker-status.loading > span { animation:telegramPulse 1s infinite alternate; }
.telegram-tracker-status strong,.telegram-tracker-status small { display:block; }
.telegram-tracker-status small { color:var(--muted); margin-top:3px; }
@keyframes telegramPulse { to { opacity:.25; } }
.telegram-admin-setup,.telegram-links-panel,.telegram-requests-panel { margin-top:15px; }
.telegram-help-copy { color:var(--muted); line-height:1.6; max-width:900px; }
.telegram-help-copy code,.telegram-link-code { background:var(--soft); border:1px solid var(--line); border-radius:7px; padding:4px 7px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.telegram-setup-summary { display:flex; gap:10px; align-items:center; background:var(--soft-red); border:1px solid #ffd4d6; border-radius:12px; padding:12px 14px; margin:16px 0; }
.telegram-setup-summary span { color:#7a4b4e; font-size:12px; }
.telegram-setup-grid { align-items:end; }
.telegram-setup-actions { display:flex; gap:9px; align-items:center; padding-bottom:1px; }
.telegram-connection-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0; }
.telegram-connection-grid > div { background:var(--soft); border-radius:12px; padding:13px; }
.telegram-connection-grid small,.telegram-connection-grid strong { display:block; }
.telegram-connection-grid small { color:var(--muted); font-size:10px; margin-bottom:5px; text-transform:uppercase; letter-spacing:.08em; }
.telegram-connection-grid strong { font-size:12px; overflow-wrap:anywhere; }
.telegram-warning { margin:15px 0; background:#fff8e8; border:1px solid #f4dfa9; border-radius:11px; padding:11px 13px; color:#745c22; font-size:12px; }
.telegram-link-code { display:inline-block; max-width:390px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.telegram-actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.telegram-actions .primary-button,.telegram-actions .secondary-button { padding:8px 10px; font-size:11px; }
.telegram-actions .text-button { color:var(--red); font-size:11px; padding:8px; }
.telegram-tracker-grid { margin-top:15px; }
.telegram-how-card ol { padding-left:20px; margin:16px 0 0; color:var(--muted); line-height:1.65; font-size:13px; }
.telegram-status { display:inline-flex; padding:5px 8px; border-radius:99px; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.05em; background:var(--soft); }
.telegram-status.pending { background:#fff4d8; color:#7f5b00; }
.telegram-status.approved { background:#e7f8ee; color:#187845; }
.telegram-status.declined,.telegram-status.cancelled { background:#ffe9ea; color:#a3262c; }
.table-subcopy { display:block; color:var(--muted); margin-top:3px; font-size:10px; }
.muted-copy { color:var(--muted); font-size:12px; }
@media (max-width:900px) { .telegram-connection-grid { grid-template-columns:repeat(2,1fr); } .telegram-setup-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .telegram-connection-grid { grid-template-columns:1fr; } .telegram-setup-actions { flex-direction:column; align-items:stretch; } .telegram-link-code { max-width:190px; } }

/* Conn-only dashboard user manager */
.user-manager-status-strip { display:flex; align-items:center; gap:10px; border:1px solid #cfe9da; background:#f3fbf6; border-radius:14px; padding:13px 15px; margin-bottom:16px; }
.user-manager-status-strip > span { width:9px; height:9px; border-radius:50%; background:#2fb769; box-shadow:0 0 0 5px #e2f6ea; flex:0 0 auto; }
.user-manager-status-strip strong { font-size:12px; }
.user-manager-status-strip small { margin-left:auto; color:var(--muted); font-size:10px; }
.user-manager-grid { align-items:start; }
.user-create-panel,.user-credentials-card,.dashboard-users-panel { margin-top:15px; }
.user-manager-help { color:var(--muted); font-size:12px; line-height:1.6; margin:12px 0 16px; }
.user-password-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; margin-top:12px; }
.user-password-row label { margin:0; }
.user-security-note { display:flex; gap:10px; align-items:flex-start; background:#fff8e8; border:1px solid #f4dfa9; border-radius:11px; padding:11px 13px; margin:14px 0; color:#745c22; }
.user-security-note strong { white-space:nowrap; font-size:11px; }
.user-security-note span { font-size:10px; line-height:1.5; }
.user-once-badge { background:#fff4d8; color:#7f5b00; border:1px solid #f1d490; border-radius:99px; padding:7px 10px; font-size:9px; font-weight:850; letter-spacing:.06em; }
.credential-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:15px 0; }
.credential-grid > div { background:var(--soft); border:1px solid var(--line); border-radius:11px; padding:12px; min-width:0; }
.credential-grid small,.credential-grid strong,.credential-grid code { display:block; }
.credential-grid small { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.credential-grid strong,.credential-grid code { font-size:12px; overflow-wrap:anywhere; }
.credential-grid code,.user-handle-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.user-status { display:inline-flex; align-items:center; border-radius:99px; padding:5px 8px; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.05em; }
.user-status.active { background:#e7f8ee; color:#187845; }
.user-status.inactive { background:#ffe9ea; color:#a3262c; }
.user-manager-actions { display:flex; flex-wrap:wrap; gap:7px; align-items:center; min-width:190px; }
.user-manager-actions .primary-button,.user-manager-actions .secondary-button { padding:8px 10px; font-size:10px; }
.danger-text { color:var(--red); font-size:10px; padding:8px; }
.dashboard-users-panel .table-person { align-items:center; }
.dashboard-users-panel .table-person > span { min-width:0; }
@media (max-width:900px) {
  .user-manager-status-strip { align-items:flex-start; flex-wrap:wrap; }
  .user-manager-status-strip small { margin-left:19px; width:100%; }
  .user-password-row { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .credential-grid { grid-template-columns:1fr; }
}