/* =========================================================================
   Feature-panel styling: settings editors, lists, leaderboards, logs,
   overview, accounts, tickets, daily-dono. Depends on tokens/components.
   ========================================================================= */

/* nested card inside a card (used for grouped toggle rows) */
.card .card { box-shadow: none; background: var(--bg-card-2); }
.card .card .toggle-row { padding-left: var(--s-4); padding-right: var(--s-4); }

.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.action-row .btn { margin-left: auto; }
.action-status { color: var(--text-2); font-size: var(--fs-sm); }
.action-status.ready { color: var(--success); }
.form-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* send-message embed field grid + Discord-style live preview */
.embed-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: var(--s-3) 0; padding: var(--s-3); border-radius: var(--r-sm); background: var(--bg-card-2); }
.embed-fields-grid .field.wide { grid-column: 1 / -1; }
.embed-fields-grid input[type="color"] { width: 100%; height: 38px; padding: 2px; border-radius: var(--r-sm); border: 1px solid var(--border); background: transparent; cursor: pointer; }

.dm-preview { display: flex; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-sm); background: var(--bg-card-2); }
.dm-preview-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand, #5865f2); color: #fff; font-weight: 700; }
.dm-preview-body { min-width: 0; flex: 1; }
.dm-preview-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
.dm-preview-name { color: var(--text); font-size: var(--fs-sm); }
.dm-preview-tag { padding: 1px 4px; border-radius: 3px; background: var(--brand, #5865f2); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-transform: uppercase; }
.dm-preview-time { color: var(--text-3); font-size: var(--fs-xs); }
.dm-preview-content { color: var(--text-2); font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 4px; }
.dm-preview-mention { padding: 0 2px; border-radius: 3px; background: rgba(88, 101, 242, 0.3); color: #c9cdfb; font-weight: 500; }
.dm-preview-embed { --embed-color: #5865f2; display: grid; grid-template-columns: minmax(0, 1fr) auto; width: min(440px, 100%); margin-top: 4px; overflow: hidden; border-left: 4px solid var(--embed-color); border-radius: 4px; background: var(--bg-card); }
.dm-preview-embed-main { min-width: 0; padding: 10px 12px; }
.dm-preview-embed-title { color: var(--text); font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
.dm-preview-embed-desc { color: var(--text-2); font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-preview-embed-image { display: block; max-width: 100%; max-height: 220px; margin-top: 8px; border-radius: 4px; object-fit: contain; }
.dm-preview-embed-footer { margin-top: 8px; color: var(--text-3); font-size: var(--fs-xs); }
.dm-preview-embed-thumb { width: 64px; height: 64px; margin: 10px 10px 0 0; border-radius: 4px; object-fit: cover; }

/* ---- compact settings navigation ---- */
.settings-tabs-shell { min-width: 0; }
.settings-tabs {
  position: sticky;
  top: calc(var(--topbar-h) + var(--s-3));
  z-index: 12;
  display: flex;
  gap: var(--s-1);
  min-height: 44px;
  padding: var(--s-1);
  overflow-x: auto;
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
  isolation: isolate;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--s-1);
  bottom: var(--s-1);
  left: 0;
  width: var(--tab-w, 0px);
  border-radius: var(--r-xs);
  background: linear-gradient(135deg, var(--red-bright), var(--red));
  box-shadow: 0 5px 16px -8px var(--red-glow-strong);
  transform: translateX(var(--tab-x, 0px));
  transition: transform 340ms var(--ease-out), width 340ms var(--ease-out), opacity var(--t);
  opacity: 0;
}
.settings-tabs:has(.settings-tab.active)::before { opacity: 1; }
.settings-tab {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t), background var(--t), box-shadow var(--t), transform var(--t);
}
.settings-tab:hover { color: var(--text); background: var(--bg-hover); }
.settings-tab.active {
  color: var(--text-on-red);
  background: transparent;
  box-shadow: none;
}
.settings-tab:active { transform: translateY(1px); }
.settings-tab-panes {
  position: relative;
  margin-top: var(--s-4);
  overflow-anchor: none;
}
.settings-tab-panes.is-resizing {
  overflow: clip;
  transition: height 420ms cubic-bezier(0.22, 0.76, 0.28, 1);
  will-change: height;
}
.settings-tab-panel {
  scroll-margin-top: calc(var(--topbar-h) + 60px);
  animation: settingsPaneIn 380ms cubic-bezier(0.22, 0.76, 0.28, 1);
}
.settings-tab-panes.is-switching .settings-tab-panel.is-leaving {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  pointer-events: none;
  animation: settingsPaneOut 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.settings-tab-panes.is-switching .settings-tab-panel.is-entering {
  position: relative;
  z-index: 1;
  animation: settingsPaneIn 360ms cubic-bezier(0.22, 0.76, 0.28, 1) both;
}
.settings-tab-panel > * + * { margin-top: var(--s-4); }
.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr));
  align-items: start;
  gap: var(--s-4);
  container-type: inline-size;
}
.settings-card-grid > * { min-width: 0; margin-top: 0 !important; }
.settings-card-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Keep Rules balanced: the compact regex editor lives directly below overrides. */
@media (min-width: 960px) {
  .settings-tab-panel.automod-rules-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--s-4);
  }
  .settings-tab-panel.automod-rules-layout > * { min-width: 0; margin-top: 0 !important; }
}
.automod-rules-stack { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

/* Each detector stays grouped, using the same neutral editor treatment as other settings. */
.automod-spam-card { padding: var(--s-5); }
.automod-spam-card .card-head { margin-bottom: var(--s-4); }
.spam-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
.spam-signal {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  transition: border-color var(--t), background var(--t);
}
.spam-signal:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.spam-signal:has(input:checked) { border-color: var(--border-strong); }
.spam-signal .toggle-row { min-height: 60px; margin: 0; padding: 12px var(--s-4); border: 0; }
.spam-signal .toggle-row .t-name { font-size: var(--fs-sm); }
.spam-signal .toggle-row .t-desc { margin-top: 2px; font-size: var(--fs-xs); }
.spam-signal-controls { margin: 0 !important; border-top: 1px solid var(--border); }
.spam-signal-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.spam-signal-fields .field { margin: 0; }
.spam-signal-fields .field label { margin-bottom: 5px; font-size: var(--fs-xs); }
.spam-signal-fields .field input { min-height: 36px; padding: 8px 10px; }

/* Repeat escalation reads as one small policy rather than five unrelated fields. */
.automod-escalation-card {
  padding: var(--s-4);
  background:
    linear-gradient(135deg, rgba(229, 57, 69, 0.07), transparent 42%),
    linear-gradient(180deg, var(--bg-card), var(--bg-card-2));
}
.automod-escalation-card .card-head { display: block; margin-bottom: var(--s-3); }
.automod-escalation-card .card-head h3 { font-size: var(--fs-lg); }
.automod-escalation-card .card-sub { margin-top: 5px; max-width: 62ch; }
.automod-escalation-card .toggle-row {
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-input);
}
.automod-escalation-card .toggle-row .t-name { font-size: var(--fs-sm); }
.automod-escalation-card .toggle-row .t-desc { font-size: var(--fs-xs); }
.automod-escalation-card .grid-2 { gap: var(--s-2); }
.automod-escalation-card .field { margin: 0; }
.automod-escalation-card .field label { margin-bottom: 5px; font-size: var(--fs-xs); }
.automod-escalation-card .field input { min-height: 36px; padding: 8px 10px; }

/* Suspicious activity is a compact monitoring policy with no unused grid cells. */
.claim-suspicious-card {
  padding: var(--s-4);
  background:
    linear-gradient(135deg, rgba(229, 57, 69, 0.05), transparent 42%),
    linear-gradient(180deg, var(--bg-card), var(--bg-card-2));
}
.claim-suspicious-card .card-head { display: block; margin-bottom: var(--s-3); }
.claim-suspicious-card .card-head h3 { font-size: var(--fs-lg); }
.claim-suspicious-card .card-sub { margin-top: 5px; }
.claim-suspicious-card .toggle-row {
  min-height: 50px;
  margin-bottom: var(--s-2);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-input);
}
.claim-suspicious-card .toggle-row .t-name { font-size: var(--fs-sm); }
.claim-suspicious-card .toggle-row .t-desc { font-size: var(--fs-xs); }
.claim-suspicious-card .grid-3 { gap: var(--s-2); }
.claim-suspicious-card .field { margin: 0; }
.claim-suspicious-card .field label { margin-bottom: 5px; font-size: var(--fs-xs); }
.claim-suspicious-card .field input { min-height: 36px; padding: 8px 10px; }

/* Welcome and leave are independent message flows, shown side by side. */
.greetings-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--s-4);
}
.greetings-settings-grid > .card { min-width: 0; }
.greetings-settings-grid > .card .toggle-row { margin-top: 0; }

@media (max-width: 720px) {
  .spam-signal-grid { grid-template-columns: 1fr; }
  .claim-suspicious-card .grid-3 { grid-template-columns: 1fr; }
  .greetings-settings-grid { grid-template-columns: 1fr; }
}
@keyframes settingsPaneIn {
  from { opacity: 0; transform: translateY(8px); filter: blur(1px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes settingsPaneOut {
  from { opacity: 1; transform: none; filter: blur(0); }
  to { opacity: 0; transform: translateY(-5px); filter: blur(1px); }
}

/* ---- automod override editor ---- */
.override-editor, .regex-editor { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.override-list, .regex-list { display: flex; flex-direction: column; gap: var(--s-2); }
.override-row, .regex-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.override-target { flex: 1; min-width: 140px; min-height: 38px; display: flex; align-items: center; font-size: var(--fs-sm); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 12px; }
.override-action-select, .regex-action, .regex-severity { width: 132px; flex: none; }
.override-remove { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--text-2); cursor: pointer; font-size: 17px; line-height: 1; transition: background var(--t), color var(--t), border-color var(--t); }
.override-remove:hover { background: var(--error-bg); color: var(--error); border-color: var(--error); }
.override-empty, .regex-empty { padding: var(--s-1) 0; }
.override-add { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; padding-top: var(--s-3); border-top: 1px dashed var(--border); }
.override-picker { flex: 1; min-width: 160px; }
/* keep the add button the same height as the pickers next to it */
.override-add-btn { height: 38px; padding: 0 16px; flex: none; }
.regex-pattern { flex: 1; min-width: 180px; }
.regex-pattern.invalid { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-bg); }
.regex-enabled { flex: none; }
.regex-add-btn { align-self: flex-start; }

/* ---- automod bypass grid ---- */
.bypass-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.bypass-group { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.bypass-group h4 { font-size: var(--fs-md); color: var(--red-bright); }

/* ---- automod tester ---- */
.tester-card { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); }
.automod-test-result { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.test-hit { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }

/* ---- role grids (allowed roles / role give) ---- */
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.role-card { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.role-card h4 { font-size: var(--fs-md); }
.add-role-card { border-style: dashed; }

/* ---- leaderboard / list rows ---- */
.lb-list { display: flex; flex-direction: column; gap: 7px; }
.lb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.lb-kicker { margin-bottom: 4px; color: var(--red-bright); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.lb-head h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.lb-summary { flex: none; padding: 7px 10px; border: 1px solid var(--border-red); border-radius: 999px; background: var(--red-tint); color: var(--red-bright); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-pager { display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; margin-top: var(--s-4); }
.lb-row {
  display: grid; grid-template-columns: 46px 34px minmax(0, 1fr) minmax(150px, 220px); align-items: center; gap: var(--s-3);
  position: relative; overflow: hidden;
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 16px;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.lb-row:hover { border-color: var(--border-red); background: var(--bg-hover); transform: translateX(2px); }
.lb-rank { display: grid; place-items: center; width: 38px; height: 30px; border-radius: var(--r-xs); background: var(--red-tint); color: var(--red-bright); font-size: var(--fs-sm); font-weight: 750; font-variant-numeric: tabular-nums; }
.lb-top { border-color: rgba(229, 57, 69, 0.38); background: linear-gradient(90deg, rgba(229, 57, 69, 0.09), var(--bg-card-2) 30%); }
.lb-top .lb-rank { color: var(--text); background: var(--red); }
.lb-top-1 .lb-rank { box-shadow: 0 0 18px rgba(229, 57, 69, 0.35); }
.lb-name { min-width: 0; display: flex; flex-direction: column; }
.lb-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name small { color: var(--text-2); font-size: var(--fs-xs); }
.lb-stats { min-width: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.lb-stats strong { font-variant-numeric: tabular-nums; }
.lb-stats small { color: var(--text-2); font-size: var(--fs-xs); }
.lb-progress { display: block; width: 100%; max-width: 180px; height: 3px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--border); }
.lb-progress::before { content: ""; display: block; width: var(--lb-progress); height: 100%; border-radius: inherit; background: var(--red); box-shadow: 0 0 8px rgba(229, 57, 69, 0.45); }
@media (max-width: 620px) {
  .lb-head { display: block; }
  .lb-summary { display: inline-flex; margin-top: var(--s-2); }
  .lb-row { grid-template-columns: 38px 32px minmax(0, 1fr); gap: var(--s-2); padding: 9px 10px; }
  .lb-rank { width: 32px; height: 28px; }
  .lb-stats { grid-column: 3; align-items: flex-start; text-align: left; }
  .lb-progress { max-width: none; }
}

/* ---- logs ---- */
.logs-toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.logs-toolbar-right { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }
.seg-count { margin-left: 6px; font-size: var(--fs-xs); opacity: 0.7; font-variant-numeric: tabular-nums; }
.logs-list { display: flex; flex-direction: column; gap: var(--s-2); }
.log-entry { display: flex; gap: var(--s-3); align-items: flex-start; background: var(--bg-card-2); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-md); padding: var(--s-3) var(--s-4); transition: border-color var(--t), background var(--t), transform var(--t); }
.log-entry:hover { background: var(--bg-hover); transform: translateX(2px); }
.log-entry-in { animation: logEntryIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--log-delay, 0ms); }
.log-entry-in .log-kind { animation: logKindIn 420ms ease-out both; animation-delay: calc(var(--log-delay, 0ms) + 45ms); }
.log-entry.log-moderation { border-left-color: var(--warning); }
.log-entry.log-automod { border-left-color: var(--error); }
.log-entry.log-website { border-left-color: var(--red); }
.log-entry.log-bot { border-left-color: var(--text-muted); }
.log-kind { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-xs); background: var(--bg-input); color: var(--text-2); }
.log-copy { flex: 1; min-width: 0; }
.log-copy p { font-size: var(--fs-sm); margin-top: 2px; }
.log-details { overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.log-people { display: flex; gap: var(--s-4); font-size: var(--fs-xs); color: var(--text-2); margin: 3px 0; flex-wrap: wrap; }
.log-people b { color: var(--text-muted); font-weight: 600; margin-right: 4px; }
.log-entry time { font-size: var(--fs-xs); color: var(--text-muted); flex: none; white-space: nowrap; }
@keyframes logEntryIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes logKindIn {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .log-entry, .log-entry-in, .log-entry-in .log-kind { animation: none; transition: none; }
}

/* ---- overview ---- */
.overview-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-5) 0; }
.module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.module-chip { display: flex; align-items: center; gap: var(--s-2); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 11px; cursor: pointer; text-align: left; transition: border-color var(--t), background var(--t); }
.module-chip:hover { border-color: var(--border-red); background: var(--bg-hover); }
.module-chip.on { border-color: var(--border-red); }
.module-ic { display: grid; place-items: center; color: var(--text-2); }
.module-chip.on .module-ic { color: var(--red-bright); }
.module-name { flex: 1; font-size: var(--fs-sm); font-weight: 500; }
.quick-grid { display: flex; flex-direction: column; gap: var(--s-2); }
.quick-action { display: flex; align-items: center; gap: var(--s-3); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 11px 13px; cursor: pointer; text-align: left; transition: border-color var(--t), background var(--t), transform var(--t); }
.quick-action:hover { border-color: var(--border-red); background: var(--bg-hover); }
.quick-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-xs); background: var(--red-tint); color: var(--red-bright); }
.quick-action span:nth-child(2) { flex: 1; font-weight: 500; }
.quick-arrow { color: var(--text-muted); transition: transform var(--t), color var(--t); }
.quick-action:hover .quick-arrow { color: var(--red-bright); transform: translateX(3px); }
.activity-list { display: flex; flex-direction: column; }
.activity-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.activity-row:last-child { border-bottom: none; }
.activity-copy { flex: 1; min-width: 0; }
.activity-summary { font-size: var(--fs-sm); font-weight: 550; }
.activity-detail { font-size: var(--fs-xs); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.activity-time { font-size: var(--fs-xs); white-space: nowrap; }

/* ---- accounts ---- */
.accounts-list { display: flex; flex-direction: column; gap: var(--s-2); }
.account-row { display: flex; align-items: center; gap: var(--s-3); background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); }
.account-info { flex: 1; min-width: 0; }
.account-name { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.account-meta { font-size: var(--fs-xs); }
.account-form { display: flex; flex-direction: column; gap: var(--s-4); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); max-height: 180px; overflow-y: auto; padding: var(--s-2); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); }

/* ---- dash nav scroll ---- */
.dash-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

/* ---- ticket + person lists (used by tickets/dailydono panels) ---- */
.ticket-list { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-3) 0; }
.ticket-card { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.ticket-card-head { display: flex; align-items: center; gap: var(--s-3); }
.ticket-card-head h4 { flex: 1; min-width: 0; }
.ticket-card-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ticket-edit-toolbar { display: flex; align-items: center; margin-bottom: var(--s-2); }
.editor-card { background: linear-gradient(180deg, var(--bg-card), var(--bg-card-2)); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); margin: var(--s-4) 0; display: flex; flex-direction: column; gap: var(--s-3); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.editor-card:focus-within { border-color: var(--border-red); box-shadow: var(--shadow-red); }
.editor-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.editor-row.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editor-row .wide { grid-column: 1 / -1; }
.ticket-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
.ticket-option-field { min-width: 0; margin: 0; }
.ticket-option-check {
  width: 100%;
  min-height: 62px;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t-fast) var(--ease-out);
}
.ticket-option-check:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.ticket-option-check:has(input:checked) {
  background: linear-gradient(105deg, var(--red-tint), var(--bg-input) 70%);
  border-color: var(--border-red);
  box-shadow: inset 3px 0 0 var(--red-bright);
}
.ticket-option-check:active { transform: translateY(1px); }
.ticket-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ticket-option-title { color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }
.ticket-option-description { color: var(--text-2); font-size: var(--fs-xs); font-weight: 400; line-height: 1.35; }
.ticket-option-check > input[type="checkbox"] { margin-left: auto; }
.optional-pill { font-size: var(--fs-xs); color: var(--text-muted); background: var(--bg-input); padding: 1px 7px; border-radius: var(--r-pill); font-weight: 500; }
.ticket-color-control {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.ticket-color-control:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.ticket-color-control:focus-within { border-color: var(--border-red); box-shadow: var(--ring); }
.ticket-color-input {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.ticket-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.ticket-color-input::-webkit-color-swatch { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 7px; }
.ticket-color-input::-moz-color-swatch { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 7px; }
.ticket-color-value { color: var(--text); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; }
.ticket-color-action { margin-left: auto; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.ticket-color-control:hover .ticket-color-action { color: var(--red-bright); }

.person-list { display: flex; flex-direction: column; gap: var(--s-2); }
.person-row { display: flex; align-items: center; gap: var(--s-3); background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); flex-wrap: wrap; }
.person-row .p-name { flex: 1; min-width: 120px; font-weight: 550; }
.person-row .p-amount { font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; }
.pill-paid { background: var(--success-bg); color: var(--success); }
.pill-owes { background: var(--error-bg); color: var(--error); }

.list-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); margin: var(--s-5) 0 var(--s-3); flex-wrap: wrap; }
.list-actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.summary-row { display: flex; gap: var(--s-2); margin-top: var(--s-2); }

/* daily-dono list rows */
.daily-control-input {
  width: min(100%, 280px);
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.daily-control-input:hover { border-color: var(--border-strong); }
.daily-control-input:focus { border-color: var(--border-red); background: var(--bg-elevated); box-shadow: var(--ring); }
.daily-amount-input { width: 180px; }
.person-actions { display: flex; gap: var(--s-2); align-items: center; margin-left: auto; }
.warn-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.warn-card .warn-head { grid-column: 1 / -1; width: auto !important; }
.warn-actions { display: inline-flex; gap: 4px; flex-wrap: nowrap; margin: 0; align-self: center; }
.warn-adjust-btn { min-width: 32px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.warn-clear-btn { padding: 0 10px; }
.next-action-row { width: auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.next-action-row .muted { margin-right: 4px; }
.warn-history { grid-column: 1 / -1; width: 100%; margin-top: 0; font-size: var(--fs-sm); }
.warn-history summary { cursor: pointer; color: var(--text-2); }
.warn-history ul { list-style: none; margin-top: var(--s-2); display: flex; flex-direction: column; gap: 6px; }
.warn-history li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 10px; background: var(--bg-input); border-radius: var(--r-xs); }
.warn-when { font-size: var(--fs-xs); white-space: nowrap; }
.skip-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); width: 100%; margin: var(--s-2) 0; }
.skip-meta-item { display: flex; flex-direction: column; gap: 2px; }
.skip-meta-item small { color: var(--text-muted); font-size: var(--fs-xs); }
.skip-meta-item span { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skip-reason { width: 100%; font-size: var(--fs-sm); }

/* pause panel (daily dono live) */
.pause-panel { display: flex; align-items: center; gap: var(--s-3); background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); flex-wrap: wrap; }
.pause-copy { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.pause-title { font-weight: 600; }

@media (max-width: 620px) {
  .daily-control-input, .daily-amount-input { width: 100%; }
  .pause-panel .daily-control-input { flex: 1 1 170px; }
  .warn-card { grid-template-columns: 1fr; }
  .warn-actions { grid-row: 3; justify-self: start; }
  .log-entry time { display: none; }
}

/* ---- ticket editors ---- */
.editor-heading { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-2); }
.editor-heading > div { flex: 1; min-width: 0; }
.editor-heading h3 { margin-top: 4px; }
.editor-heading .btn { flex: none; }
.ticket-section-title { font-size: var(--fs-md); font-weight: 650; color: var(--red-bright); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.ticket-card-emoji { max-width: 110px; }
.notice { background: var(--red-tint); border: 1px solid var(--border-red); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); color: var(--text); margin: var(--s-3) 0; }

/* ---- leaderboard control row ---- */
.lb-controls { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.lb-controls .picker { min-width: 160px; }

/* ---- access rules editor ---- */
.access-rule-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.access-rule-target { flex: 1; min-width: 160px; }
.access-rule-action { min-width: 120px; }
.access-rule-btn { width: 30px; height: 30px; flex: none; border: 1px solid var(--border); border-radius: var(--r-xs); background: transparent; color: var(--text-2); cursor: pointer; transition: background var(--t), color var(--t); }
.access-rule-btn:hover { background: var(--bg-hover); color: var(--text); }

@media (max-width: 900px) {
  .overview-2col { grid-template-columns: 1fr; }
  .editor-row, .editor-row.three-col { grid-template-columns: 1fr; }
  .ticket-option-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .module-grid { grid-template-columns: 1fr; }
  .lb-stats { text-align: left; }
}