:root {
  color-scheme: light;
  --brand: #c6242a;
  --brand-strong: #981a20;
  --brand-soft: #fff0f1;
  --ink: #2a2021;
  --muted: #776467;
  --line: #ead9db;
  --surface: #ffffff;
  --canvas: #fbf7f7;
  --success: #247a4b;
  --warning: #a96212;
  --shadow: 0 18px 48px rgba(84, 24, 29, 0.11);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 32rem),
    var(--canvas);
}

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

button { cursor: pointer; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 24%, transparent);
  outline-offset: 2px;
}

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2,
h3 { letter-spacing: -0.025em; }

.boot-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--muted);
}

.brand-mark {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 30%, transparent);
  font-size: 1.5rem;
  font-weight: 800;
}

.login-page {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
}

.login-story {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 6vw, 76px);
  color: #fff;
  background: linear-gradient(145deg, var(--brand), var(--brand-strong));
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 750;
}

.login-brand .brand-mark {
  color: var(--brand);
  background: #fff;
}

.login-copy { max-width: 680px; }

.login-copy h1 {
  max-width: 620px;
  margin-bottom: 16px;
  font-size: clamp(2.3rem, 6vw, 5.6rem);
  line-height: 0.98;
}

.login-copy p {
  max-width: 560px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
}

.login-foot { color: rgba(255, 255, 255, 0.68); }

.login-panel {
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-box {
  width: min(460px, 100%);
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.login-box h2 { margin-bottom: 8px; font-size: 1.65rem; }

.muted { color: var(--muted); }

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 24px 0 20px;
  padding: 4px;
  border-radius: 12px;
  background: #f4ebec;
}

.segment {
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
}

.segment[aria-pressed="true"] {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 10px rgba(64, 27, 31, 0.08);
  font-weight: 700;
}

.field { display: grid; gap: 7px; margin-bottom: 15px; }

.field label { font-weight: 700; }

.control {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d9c7c9;
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
}

.control::placeholder { color: #aa9598; }

.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #d9c7c9;
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  font-weight: 700;
}

.button:hover { background: #fff8f8; }

.button.primary {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}

.button.primary:hover { background: var(--brand-strong); }

.button.ghost { border-color: transparent; background: transparent; }

.button.danger { border-color: #e9b8bc; color: #9e1d24; background: #fff3f4; }

.button.block { width: 100%; }

.button:disabled { cursor: not-allowed; opacity: 0.55; }

.demo-hint {
  margin: 16px 0 0;
  padding: 11px 12px;
  border-radius: 11px;
  color: #76575a;
  background: var(--brand-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.error-message {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #9e1d24;
  background: #fff0f1;
}

.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 20px;
  font-size: 1.03rem;
  font-weight: 800;
}

.sidebar-brand .brand-mark { width: 38px; height: 38px; border-radius: 12px; }

.nav-list { display: grid; gap: 6px; }

.nav-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}

.nav-button[aria-current="page"] {
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-weight: 750;
}

.nav-count {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 0.72rem;
  font-weight: 850;
}

.sidebar-footer { margin-top: auto; }

.device-session-note {
  margin: 12px 4px 0;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
}

.sidebar-user {
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #f8f1f2;
}

.sidebar-user strong,
.sidebar-user span { display: block; }

.sidebar-user span { margin-top: 3px; color: var(--muted); font-size: 0.85rem; }

.app-main { min-width: 0; padding: 24px clamp(18px, 4vw, 48px) 72px; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.page-header h1 { margin-bottom: 5px; font-size: clamp(1.8rem, 4vw, 2.6rem); }

.page-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.grid { display: grid; gap: 14px; }
.grid.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 8px 30px rgba(84, 24, 29, 0.055);
}

.stat-label { color: var(--muted); }
.stat-value { display: block; margin: 8px 0 4px; font-size: 1.8rem; font-weight: 800; }
.stat-detail { color: var(--muted); font-size: 0.86rem; }
.usage-stat-value { font-size: clamp(1.25rem, 2.4vw, 1.8rem); }

.analytics-table-wrap { padding: 4px 14px; }
.analytics-table { min-width: 1180px; }
.compact-analytics-table { min-width: 720px; }
.analytics-table th { white-space: nowrap; }
.analytics-table td { min-width: 130px; vertical-align: top; line-height: 1.42; }
.analytics-table td:first-child { min-width: 190px; }
.team-insight-summary { margin-bottom: 14px; }
.insight-table { min-width: 980px; }
.insight-table td { min-width: 170px; }
.insight-table td:nth-child(2) { min-width: 250px; }
.compliance-meter {
  width: min(220px, 100%);
  height: 7px;
  margin: 9px 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #eee5e5;
}
.compliance-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38a96c, #73c493);
}
.today-block-status { display: grid; gap: 7px; }
.today-block-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.today-block-line > span:first-child { color: var(--muted); font-size: 0.82rem; }
.status-pill.scheduled { color: #516078; background: #eef2f7; }
.analytics-footnote { margin: 10px 3px 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.engagement-summary { margin-bottom: 14px; }
.analytics-detail-grid { margin-bottom: 8px; }
.analytics-panel { padding: 20px; }
.analytics-panel h3 { margin: 0 0 16px; font-size: 1.05rem; }
.analytics-wide { grid-column: 1 / -1; }
.analytics-bars { display: grid; gap: 13px; }
.analytics-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(100px, 1.4fr) 38px;
  align-items: center;
  gap: 10px;
}
.analytics-bar-copy strong,
.analytics-bar-copy span { display: block; }
.analytics-bar-copy span { margin-top: 2px; color: var(--muted); font-size: 0.76rem; }
.analytics-bar-track { height: 8px; overflow: hidden; border-radius: 999px; background: #eee5e5; }
.analytics-bar-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #dd777b); }
.analytics-bar-value { text-align: right; }
.analytics-ranking { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: ranking; }
.analytics-ranking li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fbf7f7;
}
.analytics-ranking li div strong,
.analytics-ranking li div span { display: block; }
.analytics-ranking li div span { margin-top: 3px; color: var(--muted); font-size: 0.78rem; }
.analytics-ranking li > strong { color: var(--brand-strong); font-size: 1.05rem; }
.analytics-empty { padding: 18px 8px; color: var(--muted); text-align: center; }
.new-content-analytics-table { min-width: 900px; }
.usage-opening-times {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.usage-opening-times span {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.analytics-ranking-control { display: grid; min-width: 210px; gap: 5px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.analytics-ranking-control .control { min-height: 42px; padding-block: 8px; }
.usage-leader-grid { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr); gap: 14px; }
.usage-leader-card {
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff8e7, #fff 55%, var(--brand-soft));
  border-color: #e6c46f;
}
.usage-leader-crown { display: grid; flex: 0 0 68px; width: 68px; height: 68px; place-items: center; border-radius: 22px; background: #fff2bd; font-size: 2rem; }
.usage-leader-card div { display: grid; gap: 5px; }
.usage-leader-card div > strong { font-size: clamp(1.3rem, 3vw, 2rem); }
.usage-leader-card div > span:last-child { color: var(--muted); }
.team-usage-ranking { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.team-usage-ranking li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fbf7f7; }
.team-usage-ranking li > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--brand-strong); background: var(--brand-soft); font-weight: 850; }
.team-usage-ranking li div { display: grid; gap: 2px; }
.team-usage-ranking small { color: var(--muted); }
.team-usage-ranking b { color: var(--brand-strong); text-align: right; }
.smart-alert-grid { display: grid; gap: 10px; }
.smart-alert { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #e3d3a8; border-radius: 15px; background: #fffaf0; }
.smart-alert > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: rgba(255,255,255,.72); font-weight: 900; }
.smart-alert strong, .smart-alert p { display: block; }
.smart-alert p { margin: 3px 0 0; color: var(--muted); font-size: 0.84rem; }
.smart-alert.danger { border-color: #e7b8bc; background: #fff0f1; }
.smart-alert.info { border-color: #bed7ea; background: #f1f8fc; }
.smart-alert.success { border-color: #acd8bd; background: #eefaf2; }
.notification-effectiveness-summary, .weekly-summary-grid, .health-summary-grid { margin-bottom: 14px; }
.weekly-activity-panel { margin-top: 14px; }
.health-operation-list, .health-error-list { display: grid; gap: 8px; }
.health-operation-list > div, .health-error-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fbf7f7; }
.health-operation-list span, .health-error-list span { display: grid; gap: 3px; }
.health-operation-list small, .health-error-list small { color: var(--muted); }
.health-operation-list b, .health-error-list b { color: var(--brand-strong); white-space: nowrap; }
.usage-member-search { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.usage-member-search .control { width: min(250px, 100%); min-height: 42px; }

.performance-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #cce4d6;
  border-radius: 14px;
  color: #37644b;
  background: #f2faf5;
  font-size: 0.9rem;
  line-height: 1.5;
}

.performance-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.performance-section { padding: 20px; }

.performance-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.performance-section-head h2 { margin: 4px 0 0; font-size: 1.18rem; }

.performance-eyebrow {
  color: var(--success);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.muted-eyebrow { color: var(--warning); }
.performance-ranking { display: grid; gap: 8px; }

.performance-ranking-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 12px;
  background: #fcf8f8;
}

.performance-rank {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-size: 0.78rem;
  font-weight: 850;
}

.performance-ranking-item div > strong,
.performance-ranking-item div > span { display: block; }
.performance-ranking-item div > span { margin-top: 3px; color: var(--muted); font-size: 0.78rem; }
.performance-count { min-width: 54px; text-align: right; }
.performance-count strong { font-size: 1.12rem; }

.performance-empty {
  padding: 24px 14px;
  border-radius: 12px;
  color: var(--muted);
  background: #faf6f6;
  text-align: center;
}

.storage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.storage-card { display: grid; gap: 8px; }
.storage-card > span { color: var(--muted); font-size: 0.86rem; }
.storage-card > strong { font-size: clamp(1.28rem, 2.5vw, 1.8rem); }
.storage-card > small { color: var(--muted); }

.duplicate-list { display: grid; gap: 10px; }
.duplicate-group {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fcf9f9;
}
.duplicate-group strong,
.duplicate-group span { display: block; }
.duplicate-group span { margin-top: 5px; color: var(--muted); font-size: 0.84rem; }
.duplicate-group ul { margin: 0; padding-left: 18px; color: var(--muted); }
.duplicate-group li + li { margin-top: 5px; }

.performance-loading {
  display: flex;
  max-width: 720px;
  align-items: center;
  gap: 16px;
  padding: 28px;
}
.performance-loading p { margin: 5px 0 0; color: var(--muted); }
.loading-pulse {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background: var(--brand-soft);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 22%, transparent);
  animation: performance-pulse 1.4s ease-out infinite;
}
@keyframes performance-pulse {
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.performance-error { max-width: 720px; }
.performance-error p { color: var(--muted); }

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 12px;
}

.section-head h2 { margin-bottom: 4px; }

.folder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.folder-button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}

.folder-button[aria-pressed="true"] {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  background: var(--brand-soft);
}

.user-folder-group { min-width: 0; }
.user-folder-group > .folder-button { width: 100%; }

.folder-expander {
  flex: 0 0 auto;
  color: var(--brand-strong);
  font-size: 1.1rem;
  font-weight: 900;
}

.folder-subfolder-menu {
  display: grid;
  gap: 3px;
  margin: 7px 10px 0 24px;
  padding: 5px 0 2px 12px;
  border-left: 2px solid var(--brand-soft);
}

.folder-subfolder-link {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.folder-subfolder-link[aria-pressed="true"] {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.folder-info { display: flex; min-width: 0; align-items: center; gap: 10px; }

.folder-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 11px;
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-size: 1.15rem;
}

.folder-name { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.folder-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 0.82rem; }

.folder-order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.subfolder-section {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.subfolder-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.subfolder-heading strong,
.subfolder-heading .muted { display: block; }
.subfolder-heading .muted { margin-top: 3px; font-size: 0.84rem; }

.subfolder-bar {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}

.subfolder-chip {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.subfolder-chip[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.compact-section-head { margin-top: 12px; }
.compact-section-head h3 { margin: 0; }
.user-subfolder-section { margin-top: 14px; }
.user-subfolder-section:focus { outline: none; }
.danger-callout { border-color: #f0b8bb; background: #fff0f1; color: #8f1720; }

.selected-folder-content {
  scroll-margin-top: 84px;
}

.selected-folder-content:focus { outline: none; }

.notification-active {
  border-color: #9fd8b2;
  background: #eaf8ef;
  color: #23743f;
}

.notification-composer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.7fr);
  gap: 16px;
}

.notification-composer {
  display: grid;
  gap: 18px;
}

.notification-composer h2 { margin: 12px 0 4px; }

.notification-message {
  min-height: 132px;
  resize: vertical;
  line-height: 1.5;
}

.notification-field-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
}

.notification-image-field { gap: 8px; }

.notification-image-input {
  padding: 10px;
  background: #fff;
}

.notification-image-input::file-selector-button {
  margin-right: 12px;
  padding: 9px 13px;
  border: 0;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.notification-image-help { margin: 0; font-size: 0.84rem; }

.notification-image-preview {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-soft);
}

.notification-image-preview[hidden] { display: none; }
.notification-image-preview img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 12px;
  background: #111;
}
.notification-image-preview > div { display: grid; gap: 7px; justify-items: start; }

.notification-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.notification-summary-icon,
.team-notification-bell {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-soft);
  font-size: 1.4rem;
}

.notification-summary strong { font-size: 1.25rem; }

.notification-history { display: grid; gap: 10px; }

.notification-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.notification-history-copy { display: grid; gap: 5px; min-width: 0; flex: 1; }
.notification-history-image {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  border-radius: 12px;
  object-fit: cover;
  background: #111;
}
.notification-result { justify-items: end; text-align: right; }
.notification-result strong { color: var(--brand-strong); font-size: 0.82rem; }

.notification-confirm-preview {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--brand-soft);
}

.notification-confirm-preview span { color: var(--muted); font-size: 0.84rem; }
.notification-confirm-preview img {
  width: 100%;
  max-height: 390px;
  object-fit: contain;
  border-radius: 12px;
  background: #111;
}

.team-notification-notice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 15px 16px;
  border: 2px solid #55b979;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--brand-soft), #fff 86%);
  box-shadow: 0 10px 28px rgba(44, 145, 82, 0.14);
  animation: team-notification-card-move 2.2s ease-in-out infinite;
}

.team-notification-image {
  grid-column: 1 / -1;
  width: 100%;
  max-height: min(62vh, 560px);
  object-fit: contain;
  border-radius: 14px;
  background: #0b0b0b;
}

@keyframes team-notification-card-move {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 10px 28px rgba(44, 145, 82, 0.14);
  }
  25% { transform: translateY(-3px) rotate(-0.25deg); }
  50% {
    transform: translateY(-1px) rotate(0deg);
    box-shadow: 0 14px 34px rgba(44, 145, 82, 0.25);
  }
  75% { transform: translateY(-3px) rotate(0.25deg); }
}

.team-notification-message {
  color: var(--ink);
  font-size: clamp(1rem, 2.3vw, 1.18rem);
  line-height: 1.4;
}

.team-notification-dismiss {
  border-color: color-mix(in srgb, var(--brand) 20%, white);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-dark);
  font-weight: 800;
}

.native-update-notice {
  align-items: center;
  background: linear-gradient(135deg, #fff9e8, #fff);
  border: 2px solid #e6ad2f;
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(132, 88, 0, 0.12);
  display: grid;
  gap: 14px;
  grid-template-columns: auto 1fr auto;
  margin-bottom: 18px;
  padding: 18px;
}

.native-update-icon {
  align-items: center;
  background: #fff0bd;
  border-radius: 16px;
  display: inline-flex;
  font-size: 1.7rem;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.native-update-notice strong { display: block; font-size: 1.04rem; }
.native-update-notice p { color: var(--muted); margin: 5px 0 0; }

.notification-activation-wrap {
  position: relative;
  flex: 0 0 auto;
}

.notification-activation-wrap .button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.notification-press-hint {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: calc(100% + 9px);
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 28%, transparent);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  animation: notification-hint-bob 1.5s ease-in-out infinite;
}

.notification-press-hint::after {
  position: absolute;
  top: 100%;
  right: 18px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: var(--brand);
  content: '';
}

.needs-attention .notification-button-bell {
  display: inline-block;
  transform-origin: 50% 0;
  animation: notification-bell-ring 1.3s ease-in-out infinite;
}

@keyframes notification-bell-ring {
  0%, 55%, 100% { transform: rotate(0deg); }
  65% { transform: rotate(18deg); }
  75% { transform: rotate(-16deg); }
  85% { transform: rotate(10deg); }
  92% { transform: rotate(-7deg); }
}

@keyframes notification-hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--success);
  background: #edf8f2;
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

.status-pill.pending { color: var(--warning); background: #fff6e8; }
.status-pill.inactive { color: var(--muted); background: #f3eeee; }

.content-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.media-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.selectable-media { transition: border-color 160ms ease, box-shadow 160ms ease; }

.selectable-media.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}

.select-check {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 12px rgba(30, 14, 16, 0.18);
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
}

.select-check input { accent-color: var(--brand); }

.media-preview {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 5;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, var(--media-color, var(--brand)), #351417);
}

.preview-button {
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.media-preview img,
.media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-type {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(20, 10, 11, 0.55);
  font-size: 0.74rem;
  backdrop-filter: blur(6px);
}

.new-content-pill {
  position: absolute;
  top: 42px;
  right: 9px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  color: #fff;
  background: #218653;
  box-shadow: 0 4px 14px rgba(18, 83, 50, 0.25);
  font-size: 0.72rem;
  font-weight: 850;
}

.new-content-header {
  align-items: center;
  padding: 20px;
  border: 1px solid #b9dec9;
  border-radius: 20px;
  background: linear-gradient(135deg, #effaf3, #fff 76%);
  box-shadow: 0 12px 34px rgba(36, 122, 75, 0.08);
}

.new-content-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--success);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.new-content-total {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--success);
  background: #e4f5eb;
  font-weight: 800;
  white-space: nowrap;
}

.new-content-grid { margin-top: 16px; }

.new-content-empty {
  display: grid;
  max-width: 620px;
  margin: 38px auto 0;
  justify-items: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
}

.new-content-empty > span {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--success);
  font-size: 1.55rem;
  font-weight: 900;
}

.new-content-empty h2,
.new-content-empty p { margin-bottom: 0; }
.new-content-empty p { color: var(--muted); }

.video-play {
  position: absolute;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding-left: 3px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 10, 11, 0.62);
  box-shadow: 0 6px 20px rgba(20, 10, 11, 0.25);
  font-size: 1.25rem;
  pointer-events: none;
  backdrop-filter: blur(5px);
}

.media-demo-title { max-width: 85%; padding: 15px; font-weight: 800; text-align: center; }
.video-preview-pending { max-width: 65%; color: rgba(255, 255, 255, 0.82); font-size: 0.78rem; }
.media-copy { padding: 11px; }
.media-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.82rem; }

.media-card-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 7px;
  padding: 0 10px 10px;
}

.media-card-actions .button { min-height: 38px; padding: 7px 9px; font-size: 0.84rem; }
.admin-media-actions { grid-template-columns: 0.75fr 1.35fr 0.8fr; }

.admin-content-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: #fff;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.admin-content-selector input,
.library-select-all input { width: 18px; height: 18px; accent-color: var(--brand); }

.media-card.admin-content-selected {
  border-color: #39a66d;
  box-shadow: 0 0 0 2px rgba(57, 166, 109, 0.18), var(--shadow);
}

.media-card.admin-content-selected .admin-content-selector {
  border-color: #9bd9b8;
  color: #167144;
  background: #effaf4;
}

.library-selection-bar {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
}

.library-select-all { display: flex; align-items: center; gap: 9px; font-weight: 800; cursor: pointer; }
.library-selection-actions { display: flex; gap: 8px; }
.move-content-callout { margin-top: 16px; }

.delete-summary {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #e9b8bc;
  border-radius: 12px;
  background: #fff3f4;
}

.access-code-card {
  display: grid;
  gap: 10px;
  margin: 22px 0;
  padding: 22px;
  text-align: center;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, #ffffff);
  border-radius: 18px;
}

.access-code-card strong {
  color: var(--brand-strong);
  font-size: clamp(2rem, 8vw, 3.4rem);
  letter-spacing: .16em;
}

.delete-summary span { color: var(--muted); font-size: 0.88rem; }

.manual-share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid #dfc7ca;
  border-radius: 14px;
  background: #fffafa;
}

.manual-share-bar strong,
.manual-share-bar span { display: block; }
.manual-share-bar span { margin-top: 3px; color: var(--muted); font-size: 0.84rem; }

.preview-frame {
  display: grid;
  min-height: 260px;
  max-height: min(62vh, 620px);
  margin-top: 18px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--media-color, var(--brand)), #351417);
}

.preview-media {
  display: block;
  width: 100%;
  max-height: min(62vh, 620px);
  object-fit: contain;
}

.upload-zone {
  display: grid;
  min-height: 128px;
  place-items: center;
  padding: 20px;
  border: 1px dashed #ccadb0;
  border-radius: 14px;
  background: #fffafa;
  text-align: center;
}

.upload-zone input { width: min(100%, 420px); }

.upload-progress {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--brand-soft);
}

.upload-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.upload-progress-copy span {
  color: var(--primary);
  font-weight: 800;
}

.upload-progress-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(167, 25, 34, 0.12);
}

.upload-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #e34c55);
  transition: width 180ms ease;
}

.upload-progress .muted {
  margin: 9px 0 0;
}

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th,
td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-size: 0.83rem; }
tbody tr:last-child td { border-bottom: 0; }

.avatar {
  display: inline-grid;
  width: 34px;
  height: 34px;
  margin-right: 9px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  font-weight: 800;
  vertical-align: middle;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.inline-form .field { margin: 0; }

.team-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 220px;
}

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

.version-info-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
}

.version-info-card h2 { margin: 4px 0 6px; }
.version-info-card p { margin-bottom: 0; }
.version-info-card .status-pill { grid-column: 2; justify-self: end; }

.version-info-label {
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.version-number {
  grid-row: 1;
  grid-column: 2;
  color: var(--brand-strong);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1;
}

.setting-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.65fr);
  gap: 12px;
}

.callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 13px;
  color: #755559;
  background: var(--brand-soft);
  line-height: 1.5;
}

.today-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 4vw, 34px);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  box-shadow: 0 18px 45px color-mix(in srgb, var(--brand) 25%, transparent);
}

.today-hero h1 { margin-bottom: 8px; }
.today-hero p { margin-bottom: 0; color: rgba(255, 255, 255, 0.78); }
.today-date { color: rgba(255, 255, 255, 0.72); font-weight: 700; }

.progress-ring {
  display: grid;
  width: 94px;
  height: 94px;
  flex: 0 0 94px;
  place-items: center;
  border: 9px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 800;
}

.sales-page-header { align-items: flex-end; }

.sales-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sales-focus-pill {
  padding: 9px 13px;
  border: 1px solid #d9e9b7;
  border-radius: 999px;
  color: #496b0d;
  background: #f2f8e3;
  font-size: 0.83rem;
  font-weight: 750;
  white-space: nowrap;
}

.sales-challenge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 18px;
  color: #351b1e;
  background: linear-gradient(135deg, #fff 0%, #fff7f7 58%, #fcebed 100%);
  box-shadow: 0 10px 28px rgba(115, 22, 32, 0.06);
}

.sales-challenge-target {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 25%, transparent);
  font-size: 1.2rem;
  font-weight: 900;
}

.sales-challenge h2 { margin: 0 0 6px; font-size: 1.08rem; }
.sales-challenge p { margin: 5px 0 0; font-size: 0.92rem; line-height: 1.5; }

.sales-guidance {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin-bottom: 18px;
  padding: 15px 17px;
  border: 1px solid #dbe7c8;
  border-radius: 16px;
  color: #34431e;
  background: linear-gradient(135deg, #f7faef, #fff);
}

.sales-guidance > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #668f1c;
}

.sales-guidance p { margin: 3px 0 0; font-size: 0.9rem; line-height: 1.5; }
.sales-steps { display: grid; gap: 18px; }
.sales-step { padding: 20px; }

.sales-step-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 16px;
}

.sales-step-heading > span {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--brand);
  font-weight: 850;
}

.sales-step-heading h2 { margin: 0 0 3px; font-size: 1.12rem; }
.sales-step-heading p { margin: 0; }

.sales-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sales-template-card {
  display: grid;
  min-height: 142px;
  align-content: start;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.sales-template-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.sales-template-card.selected { border-color: var(--brand); background: #fff8f8; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 10%, transparent); }
.sales-template-card span { color: var(--muted); font-size: 0.83rem; line-height: 1.4; }
.sales-template-card b { margin-top: auto; color: var(--brand); font-size: 0.8rem; }
.sales-message-field { display: grid; gap: 7px; margin-top: 16px; }
.sales-message-field > span { font-weight: 750; }
.sales-message-field textarea { min-height: 190px; resize: vertical; line-height: 1.5; }
.sales-message-field small { justify-self: end; color: var(--muted); }

.sales-image-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding: 3px;
}

.sales-image-choice {
  display: grid;
  min-width: 0;
  overflow: hidden;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  background: #fff;
}

.sales-image-choice.selected { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent); }
.sales-image-select {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.sales-image-preview { position: relative; display: grid; width: 100%; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden; place-items: center; isolation: isolate; border-radius: 9px; background: var(--media-color, #efe6e6); }
.sales-image-preview img { display: block; width: 100%; min-width: 0; max-width: 100%; height: 100%; object-fit: cover; }
.sales-image-preview .media-demo-title { padding: 8px; font-size: 0.72rem; text-align: center; }
.sales-image-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-video-play-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line)); border-radius: 9px; color: var(--brand); background: #fff8f8; font: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer; }
.sales-video-play-button:hover { border-color: var(--brand); background: #fff1f2; }
.sales-image-check { position: absolute; top: 6px; right: 6px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: var(--brand); font-size: 0.82rem; }
.sales-image-choice:not(.selected) .sales-image-check { display: none; }
.sales-empty-images { display: grid; gap: 4px; padding: 28px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; }

.sales-message-preview {
  width: min(480px, 100%);
  margin: 0 auto 16px;
  padding: 10px;
  border-radius: 16px;
  background: #e8f2e3;
  box-shadow: inset 0 0 0 1px rgba(45, 77, 37, 0.08);
}

.sales-preview-media { display: grid; min-height: 210px; max-height: 430px; overflow: hidden; place-items: center; border-radius: 11px 11px 4px 4px; background: var(--media-color, #efe6e6); }
.sales-preview-media img { width: 100%; max-height: 430px; object-fit: contain; background: #fff; }
.sales-preview-video { display: block; width: 100%; min-width: 0; max-width: 100%; max-height: 430px; object-fit: contain; background: #111; }
.sales-preview-media .media-demo-title { padding: 30px; text-align: center; }
.sales-preview-empty { font-size: 3rem; }
.sales-preview-copy { display: grid; gap: 8px; padding: 14px; border-radius: 4px 4px 11px 11px; background: #d9fdd3; line-height: 1.48; }
.sales-preview-copy > span { overflow-wrap: anywhere; }
.sales-preview-copy small { justify-self: end; color: #55715a; }
.sales-share-button { min-height: 50px; width: min(480px, 100%); margin: 0 auto; font-size: 1rem; }
.sales-share-note-spacer { width: min(560px, 100%); min-height: 2.8rem; margin: 11px auto 0; }
.sales-template-usage { display: block; font-size: 0.82rem; }

.sales-admin-template-list { display: grid; gap: 14px; }
.sales-admin-template { display: grid; gap: 16px; padding: 19px; }
.sales-admin-template-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sales-admin-template-heading span { color: #477527; font-size: 0.78rem; font-weight: 750; }
.sales-admin-template-fields { display: grid; grid-template-columns: minmax(190px, 0.7fr) minmax(240px, 1fr); gap: 12px; }
.sales-admin-message { grid-column: 1 / -1; }
.sales-admin-message textarea { min-height: 160px; line-height: 1.5; resize: vertical; }
.sales-admin-message small { color: var(--muted); }
.sales-admin-template-actions,
.sales-admin-media-actions { display: flex; justify-content: flex-end; gap: 9px; }
.sales-admin-media-manager { display: grid; gap: 16px; padding: 18px; }
.sales-admin-media-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-height: 620px; overflow-y: auto; padding: 3px; }
.sales-admin-media-card { position: relative; display: grid; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: #fff; cursor: pointer; }
.sales-admin-media-card.selected { border-color: var(--brand); background: #fff8f8; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 11%, transparent); }
.sales-admin-media-card > input { position: absolute; z-index: 2; top: 13px; left: 13px; width: 20px; height: 20px; accent-color: var(--brand); }
.sales-admin-media-card > span:last-child { display: grid; gap: 2px; min-width: 0; }
.sales-admin-media-card strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.sales-admin-media-card small { color: var(--muted); font-size: 0.7rem; }
.sales-admin-media-preview { position: relative; display: grid; aspect-ratio: 1 / 1; overflow: hidden; place-items: center; border-radius: 9px; background: var(--media-color, #efe6e6); }
.sales-admin-media-preview img { width: 100%; height: 100%; object-fit: cover; }
.sales-admin-media-preview > b { position: absolute; top: 6px; right: 6px; padding: 3px 6px; border-radius: 999px; color: #fff; background: rgba(24, 15, 16, 0.72); font-size: 0.63rem; }
.sales-upload-destination { margin-bottom: 13px; }
.sales-image-preview .video-play,
.sales-admin-media-preview .video-play { width: 40px; height: 40px; font-size: 1rem; }
.sales-preview-media .video-play { width: 58px; height: 58px; }

.batch-card { margin-top: 16px; }

.batch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.batch-head h2 { margin-bottom: 4px; }
.batch-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.empty-state { padding: 34px; color: var(--muted); text-align: center; }

.modal-backdrop {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(37, 18, 20, 0.52);
  backdrop-filter: blur(4px);
}

.modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 80px rgba(29, 12, 14, 0.3);
}

.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-head h2 { margin-bottom: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }

.toast-region {
  position: fixed;
  z-index: 40;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(380px, calc(100vw - 36px));
  gap: 9px;
}

.toast {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  box-shadow: var(--shadow);
  animation: toast-in 180ms ease-out;
}

.toast.error { color: #9e1d24; background: #fff3f4; }
.toast.success { color: #23743f; background: #eaf8ef; }

.scroll-to-top {
  position: fixed;
  z-index: 18;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  padding: 0 0 4px;
  border: 1px solid color-mix(in srgb, var(--brand) 82%, #fff);
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 32%, transparent);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  animation: scroll-to-top-in 160ms ease-out;
}

.scroll-to-top:hover { background: var(--brand-strong); transform: translateY(-2px); }
.scroll-to-top:active { transform: translateY(0); }
.scroll-to-top[hidden] { display: none; }

@keyframes scroll-to-top-in {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
}

.mobile-topbar,
.mobile-nav { display: none; }

@media (max-width: 1040px) {
  .grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .storage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-image-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sales-admin-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .login-page { grid-template-columns: 1fr; }
  .login-story { min-height: 38vh; padding: 28px; }
  .login-copy h1 { font-size: clamp(2.2rem, 12vw, 4.4rem); }
  .login-foot { display: none; }
  .login-panel { padding: 18px; }

  .app-shell { display: block; }
  .sidebar { display: none; }
  .mobile-topbar {
    position: sticky;
    z-index: 10;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
  }
  .mobile-topbar .sidebar-brand { padding: 0; }
  .mobile-nav {
    position: fixed;
    z-index: 15;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 35px rgba(50, 18, 22, 0.15);
    backdrop-filter: blur(16px);
  }
  .mobile-nav .nav-button { justify-content: center; padding: 10px 5px; font-size: 0.78rem; text-align: center; }
  .mobile-nav .nav-button { position: relative; }
  .mobile-nav .nav-count {
    position: absolute;
    top: 3px;
    right: 4px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    font-size: 0.64rem;
  }
  .app-main { padding: 18px 14px 100px; }
  .scroll-to-top {
    right: 18px;
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .page-header { flex-direction: column; }
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notification-composer-grid { grid-template-columns: 1fr; }
  .notification-history-item { align-items: flex-start; flex-direction: column; }
  .team-notification-notice {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .team-notification-dismiss { grid-column: 2; justify-self: start; }
  .team-notification-notice.has-image .team-notification-image { grid-column: 1 / -1; }
  .native-update-notice { grid-template-columns: auto 1fr; }
  .native-update-notice .button { grid-column: 2; justify-self: start; }
  .settings-grid { grid-template-columns: 1fr; }
  .performance-columns { grid-template-columns: 1fr; }
  .analytics-detail-grid { grid-template-columns: 1fr; }
  .usage-leader-grid { grid-template-columns: 1fr; }
  .usage-member-heading { align-items: stretch; }
  .usage-member-search { justify-content: flex-start; }
  .analytics-wide { grid-column: auto; }
  .today-hero { align-items: flex-start; }
  .sales-page-header { align-items: flex-start; }
  .sales-template-grid { grid-template-columns: 1fr; }
  .sales-template-card { min-height: 0; }
  .sales-image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sales-admin-template-fields { grid-template-columns: 1fr; }
  .sales-admin-message { grid-column: auto; }
  .sales-admin-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .grid.stats,
  .grid.two,
  .grid.three,
  .folder-grid { grid-template-columns: 1fr; }
  .analytics-bar-row { grid-template-columns: minmax(105px, 1fr) minmax(80px, 1fr) 32px; gap: 7px; }
  .analytics-ranking-control { width: 100%; }
  .usage-leader-card { align-items: flex-start; }
  .usage-member-search .control { width: 100%; }
  .notification-result { justify-items: start; text-align: left; }
  .notification-image-preview { grid-template-columns: 1fr; }
  .notification-image-preview img { max-height: 320px; }
  .folder-order-actions { justify-content: flex-start; }
  .subfolder-heading { align-items: flex-start; }
  .subfolder-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .subfolder-chip { flex: 0 0 auto; }
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .media-preview { aspect-ratio: 1 / 1.08; }
  .media-copy { padding: 9px; }
  .media-copy strong { font-size: 0.86rem; }
  .media-copy span { font-size: 0.74rem; }
  .media-card-actions { gap: 5px; padding: 0 7px 8px; }
  .media-card-actions .button { min-height: 34px; padding: 6px 4px; font-size: 0.74rem; }
  .admin-content-selector { margin: 0 7px 7px; padding: 7px 8px; }
  .library-selection-bar { grid-template-columns: 1fr; gap: 10px; }
  .library-selection-actions { display: grid; grid-template-columns: 0.75fr 1.25fr; }
  .select-check { top: 6px; left: 6px; padding: 4px 6px; font-size: 0.7rem; }
  .media-type { top: 6px; right: 6px; padding: 3px 6px; font-size: 0.66rem; }
  .new-content-pill { top: 34px; right: 6px; padding: 3px 6px; font-size: 0.64rem; }
  .video-play { width: 38px; height: 38px; font-size: 1rem; }
  .inline-form,
  .setting-block { grid-template-columns: 1fr; }
  .page-actions,
  .batch-actions { width: 100%; }
  .page-actions .button,
  .batch-actions .button { flex: 1 1 auto; }
  .today-hero { flex-direction: column; }
  .progress-ring { width: 76px; height: 76px; flex-basis: 76px; }
  .storage-grid { grid-template-columns: 1fr 1fr; }
  .duplicate-group { grid-template-columns: 1fr; }
  .mobile-nav .nav-button span:first-child { display: none; }
  .manual-share-bar { align-items: stretch; flex-direction: column; }
  .manual-share-bar .page-actions { display: grid; grid-template-columns: 0.7fr 1.3fr; }
  .sales-focus-pill { white-space: normal; }
  .sales-challenge { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
  .sales-challenge-target { width: 58px; height: 50px; border-radius: 14px; }
  .sales-step { padding: 15px; }
  .sales-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 460px; }
  .sales-admin-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-admin-template-heading,
  .sales-admin-template-actions,
  .sales-admin-media-actions { align-items: stretch; flex-direction: column; }
  .sales-preview-media { min-height: 170px; }
  .mobile-nav .nav-button { font-size: 0.69rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}