:root {
  --bg: #f4f6f3;
  --ink: #0e1b1f;
  --muted: #647174;
  --line: #d9dfdc;
  --brand: #0f4f54;
  --brand-2: #2f6b65;
  --soft: #eef4f1;
  --warn: #9c6b24;
  --sidebar-collapsed: 110px;
  --sidebar-expanded: 310px;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  display: grid;
  grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr);
}

body.auth-locked {
  display: block;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

body.auth-locked .sidebar,
body.auth-locked main {
  display: none;
}

body.auth-locked .login-gate {
  position: fixed;
  inset: 0;
}

body[data-auth-state="checking"] .login-card {
  display: none !important;
}

body[data-auth-state="checking"] .login-checking {
  display: grid !important;
}

body[data-auth-state="login"] .login-checking {
  display: none !important;
}

body[data-auth-state="login"] .login-card {
  display: grid !important;
}

body.modal-open {
  overflow: hidden;
}

body.modal-open main {
  overflow: hidden;
}

body:has(.sidebar:hover) {
  grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr);
}

.sidebar {
  display: flex;
  flex-direction: column;
  background: #142020;
  color: #fff;
  min-height: 100vh;
  height: 100vh;
  padding: 24px 12px;
  position: sticky;
  top: 0;
  width: var(--sidebar-collapsed);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 12;
  transition: width 0.22s ease, padding 0.22s ease, box-shadow 0.22s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.28) transparent;
}

.sidebar:hover {
  width: var(--sidebar-expanded);
  padding-inline: 12px;
  box-shadow: 22px 0 40px rgba(9, 20, 20, 0.16);
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.brand-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 10px;
  background: #f8f4ea;
  color: #071114;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.brand-copy {
  min-width: 210px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding-top: 1px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

.sidebar:hover .brand-copy {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.brand strong {
  display: block;
  font-size: 22px;
  line-height: 1.05;
}

.brand span {
  color: #b8c5c2;
  line-height: 1.25;
}

.brand-title {
  min-width: 0;
}

.brand-account {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 46px;
  margin-top: -2px;
}

.brand-user {
  display: inline-flex;
  justify-content: center;
  width: 46px;
  max-width: 46px;
  border: 0;
  border-radius: 6px;
  padding: 3px 6px;
  background: rgba(255,255,255,0.08);
  color: #f4faf8 !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-logout {
  width: 46px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #ffe9e4;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.brand-logout:hover {
  background: rgba(255,255,255,0.1);
}

nav {
  display: grid;
  gap: 6px;
  margin-top: 30px;
}

button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.2;
  max-width: 100%;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.custom-select-button:focus-visible {
  outline: 3px solid rgba(54, 138, 124, 0.26);
  outline-offset: 2px;
}

button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
}

.nav-item {
  border: 0;
  color: #eef6f3;
  background: transparent;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 42px;
  overflow: hidden;
  white-space: nowrap;
  transition: font-size 0.16s ease, background 0.16s ease;
}

.nav-item::before {
  content: attr(data-icon);
  width: 46px;
  height: 30px;
  flex: 0 0 46px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.09);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
}

.sidebar:hover .nav-item {
  justify-content: flex-start;
  padding: 9px 10px;
  font-size: 17px;
}

.nav-item.active,
.nav-item:hover {
  background: rgba(255,255,255,0.12);
}

.slogan {
  display: none;
  margin: 18px 0 10px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 14px;
  font-weight: 800;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

.sidebar:hover .slogan {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

main {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding: 30px;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.topbar {
  display: none;
  justify-content: flex-end;
  align-items: start;
  gap: 20px;
  margin-bottom: 16px;
}

.topbar > div:first-child {
  display: none;
}

.eyebrow {
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 8px;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 34px; }
h2 { font-size: 30px; }
h3 { font-size: 21px; }

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

#logoutButton {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  user-select: none;
}

#logoutButton:hover {
  transform: none;
}

.badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  background: #fff;
  color: var(--muted);
}

.view { display: none; }
.view.active { display: block; }
.hidden { display: none !important; }

.section-title {
  display: block;
  margin-bottom: 16px;
}

.section-title .eyebrow,
.section-title p:not(.eyebrow) {
  display: none;
}

.section-title h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900;
}

.task-board-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.task-board-title > div:first-child {
  display: block;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.account-summary,
.influencer-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.stats article,
.account-summary article,
.influencer-summary article,
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.stats article,
.account-summary article,
.influencer-summary article { padding: 18px; }

.stats span,
.account-summary span,
.influencer-summary span { color: var(--muted); display: block; margin-bottom: 8px; }

.stats strong,
.account-summary strong,
.influencer-summary strong { font-size: 30px; }

.account-summary {
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.account-summary article {
  padding: 10px 12px;
}

.account-summary span {
  margin-bottom: 4px;
  font-size: 12px;
}

.account-summary strong {
  font-size: 20px;
}

.owner-stat-list {
  display: contents;
}

.stats article.owner-stat,
.account-summary article.owner-stat {
  border-color: var(--owner-line);
  background: var(--owner-soft);
}

.stats article.owner-stat strong,
.account-summary article.owner-stat strong {
  color: var(--owner-main);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.ai-suggestion-panel {
  border-color: #9dbdfd;
  background: #f5f8ff;
  box-shadow: 0 12px 26px rgba(61, 139, 255, 0.12);
}

.ai-suggestion-panel .panel-header {
  border-bottom-color: #c9d8ff;
  background: #eef4ff;
}

.ai-suggestion-panel .priority-list {
  background: #f8fbff;
}

.ai-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #2457b8;
}

.ai-panel-title::before {
  content: "AI";
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 7px;
  background: #2f6dff;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.section-title p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 760px;
  line-height: 1.7;
}

.hub-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hub-stats article {
  min-height: 116px;
}

.hub-stat-card {
  position: relative;
  overflow: hidden;
}

.hub-stat-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: #a8b7ad;
}

.hub-stat-ok::after { background: #5ba67f; }
.hub-stat-warning::after { background: #de9a43; }
.hub-stat-accounts::after { background: #5b85c8; }
.hub-stat-influencer::after { background: #9a7ccf; }

.hub-today-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 16px;
}

.hub-task-panel,
.hub-schedule-panel,
.hub-module-panel {
  min-width: 0;
}

.hub-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 18px 0;
}

.hub-status-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  padding: 14px;
  min-width: 0;
}

.hub-status-card span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}

.hub-status-card strong {
  display: block;
  color: var(--brand);
  font-size: 26px;
  line-height: 1;
}

.hub-status-card.status-blocked {
  border-color: #eccb9c;
  background: #fff8ec;
}

.hub-priority-list {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.hub-priority-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 13px 14px;
  min-width: 0;
}

.hub-priority-task span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.hub-priority-task strong {
  display: block;
  color: var(--brand);
  line-height: 1.45;
  word-break: break-word;
}

.hub-schedule-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 18px 0;
  border: 1px solid #d7e4dd;
  border-radius: 8px;
  background: #f6fbf8;
  color: var(--brand);
  padding: 12px 14px;
}

.hub-schedule-summary strong {
  font-size: 15px;
}

.hub-schedule-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.hub-schedule-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.hub-schedule-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  min-width: 0;
}

.hub-schedule-group h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--brand);
}

.hub-schedule-group h4 span {
  color: var(--muted);
  font-size: 13px;
}

.hub-schedule-group p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.5;
  word-break: break-word;
}

.hub-person-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.hub-person-list span {
  min-width: 0;
  max-width: 100%;
  border: 1px solid #dbe7e1;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  padding: 5px 9px;
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.hub-person-list .muted {
  color: var(--muted);
  font-weight: 700;
}

.hub-schedule-group.work { border-color: #c7dfd0; background: #f7fcf8; }
.hub-schedule-group.leave { border-color: #eccb9c; background: #fff8ec; }
.hub-schedule-group.empty { background: #fbfbfb; }

.hub-module-card,
.ai-slot-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  min-width: 0;
}

.hub-module-card strong,
.ai-slot-card strong {
  display: block;
  color: var(--brand);
  line-height: 1.35;
}

.hub-module-card p,
.hub-module-card em,
.ai-slot-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.account-home-panel .home-account-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.hub-module-card {
  display: grid;
  gap: 12px;
  border-left: 4px solid #9fb2a8;
}

.hub-module-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.hub-module-card header div {
  min-width: 0;
}

.hub-module-card span,
.ai-slot-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
}

.hub-module-card strong {
  font-size: 21px;
}

.hub-module-card em {
  display: block;
  font-style: normal;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.hub-module-warning { border-left-color: #de9a43; background: #fffaf1; }
.hub-module-quiet { border-left-color: #cad4ce; background: #fbfcfb; }
.hub-module-normal { border-left-color: #5ba67f; }

.ai-suggestion-panel .priority-list.compact {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.ai-slot-card {
  display: grid;
  gap: 10px;
  align-content: start;
  background: #fff;
  border-color: #c9d8ff;
}

.ai-slot-card strong {
  font-size: 17px;
}

.ai-slot-card p {
  margin: 0;
}

.ai-slot-card b {
  color: var(--brand);
}

.ai-slot-card button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.hub-action-card {
  align-content: space-between;
}

.hub-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.hub-assistant-draft {
  padding: 0 18px 18px;
}

.hub-assistant-draft:empty {
  display: none;
  padding: 0;
}

.hub-draft-empty,
.hub-draft-card {
  border: 1px dashed #b9c8de;
  border-radius: 8px;
  background: #f8fbff;
  padding: 16px;
}

.hub-draft-empty strong,
.hub-draft-head strong {
  color: var(--brand);
}

.hub-draft-empty p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

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

.hub-draft-card pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--brand);
  line-height: 1.65;
  font: inherit;
}


.icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.icon-button.mini {
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.icon-button:hover {
  background: #eef8f2;
  border-color: #9fcfc0;
}

.priority-list,
.leave-list,
#metricList,
#userList {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.audit-log-panel {
  margin-top: 18px;
}

.audit-log-list {
  display: grid;
  gap: 5px;
  padding: 10px;
}

.audit-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  padding: 6px 9px;
}

.audit-log-row strong {
  font-size: 13px;
  line-height: 1.25;
}

.audit-log-row strong,
.audit-log-row p,
.audit-log-meta span,
.audit-log-meta time {
  overflow-wrap: anywhere;
}

.audit-log-row p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.audit-log-meta {
  display: grid;
  gap: 2px;
  justify-items: end;
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.task-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px;
  background: #fbfcfb;
  min-width: 0;
}

.task-card.clickable-task-card {
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.task-card.clickable-task-card:hover {
  border-color: #8fc4b4;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(20, 55, 49, 0.08);
  transform: translateY(-1px);
}

.task-card.clickable-task-card:focus-visible {
  border-color: #5aa892;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(31, 122, 99, 0.16), 0 10px 22px rgba(20, 55, 49, 0.08);
  outline: none;
}

.task-card.own-task-in-all {
  animation: ownTaskPulse 2.6s ease-in-out infinite;
  border-color: #4f9b85;
  background: linear-gradient(90deg, #e8f7ef 0%, #f5fbf8 62%, #ffffff 100%);
  box-shadow: inset 5px 0 0 #1f7a63, 0 0 0 1px rgba(31, 122, 99, 0.16), 0 8px 18px rgba(31, 122, 99, 0.1);
}

@keyframes ownTaskPulse {
  0%, 100% {
    box-shadow: inset 5px 0 0 #1f7a63, 0 0 0 1px rgba(31, 122, 99, 0.16), 0 8px 18px rgba(31, 122, 99, 0.1);
  }
  50% {
    box-shadow: inset 5px 0 0 #178f72, 0 0 0 3px rgba(31, 122, 99, 0.18), 0 10px 24px rgba(31, 122, 99, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-card.own-task-in-all {
    animation: none;
  }
}

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

.metric-main { min-width: 0; }

.metric-main p {
  margin: 9px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.metric-next-action {
  color: var(--text);
  font-weight: 800;
}

.metric-card-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.metric-card-actions .copy-button {
  min-width: 58px;
  padding: 9px 12px;
  font-size: 13px;
}

.metric-card.editing {
  grid-template-columns: 1fr;
  align-items: stretch;
}

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

.metric-edit-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.metric-edit-grid input,
.metric-edit-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  background: #fff;
  color: var(--text);
}

.metric-edit-notes {
  grid-column: 1 / -1;
}

.metric-subnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.metric-subnav button {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 12px 9px;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.metric-subnav button:hover,
.metric-subnav button:focus-visible {
  color: var(--brand);
}

.metric-subnav button.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.metric-pane {
  min-width: 0;
}

.metric-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.45fr);
  align-items: start;
  gap: 16px;
}

.metric-layout .metric-form {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 10px;
}

.metric-form input,
.metric-form textarea,
.metric-form select {
  min-width: 0;
}

.metric-form-head {
  display: grid;
  gap: 4px;
}

.metric-form-head h3 {
  margin: 0;
  font-size: 18px;
}

.metric-form-head span {
  color: var(--muted);
  line-height: 1.55;
}

.metric-recent-panel {
  min-width: 0;
}

.metric-list-actions {
  display: flex;
  justify-content: center;
  padding: 12px 18px 18px;
}

.metric-review-hub {
  margin-bottom: 16px;
}

.metric-review-hub .review-page-stack,
.metric-review-actions .review-page-stack {
  gap: 16px;
}

.metric-review-actions {
  margin-top: 16px;
}

.metric-summary {
  padding: 18px 18px 0;
}

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

.metric-summary-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  padding: 12px;
}

.metric-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.metric-summary-grid strong {
  color: var(--brand);
  font-size: 22px;
}

.metric-summary p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .link-fetch-control,
  .schedule-tool-grid .leave-form {
    grid-template-columns: 1fr;
  }

  .link-fetch-control button,
  .schedule-tool-grid .leave-form button {
    width: 100%;
  }

  .metric-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audit-log-row {
    grid-template-columns: 1fr;
  }

  .audit-log-meta {
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 1200px) {
  .hub-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hub-today-layout {
    grid-template-columns: 1fr;
  }

  .hub-schedule-columns,
  .account-home-panel .home-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.schedule-panel-header {
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.schedule-month-controls,
.schedule-admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-admin-actions {
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border: 1px solid #d0ded8;
  border-radius: 8px;
  background: #fbfdfc;
}

.schedule-admin-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-admin-badge {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
  white-space: nowrap;
}

.schedule-month-controls span {
  min-width: 150px;
  color: var(--brand);
  font-weight: 900;
  text-align: center;
}

.schedule-board {
  overflow: hidden;
  border-top: 1px solid #edf2f0;
}

.calendar-board {
  overflow-x: auto;
  padding: 14px;
}

.calendar-weekdays,
.calendar-grid {
  min-width: 840px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.calendar-weekdays span {
  border: 1px solid #dde7e3;
  border-radius: 6px;
  background: #f6f9f7;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  padding: 9px 6px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-day {
  min-height: 128px;
  border: 1px solid #dde7e3;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
}

.calendar-day.is-empty {
  background: #f8faf9;
  border-style: dashed;
}

.calendar-day.is-today {
  border-color: #95c8bd;
  background: #f6fbf8;
  box-shadow: inset 0 0 0 1px rgba(20, 111, 96, 0.12);
}

.calendar-day.is-today .calendar-day-head strong {
  color: var(--brand);
}

.calendar-day.is-today .calendar-day-head span::after {
  content: " · 今日";
  color: var(--muted);
  font-weight: 800;
}

.calendar-day[data-schedule-day] {
  cursor: pointer;
}

.calendar-day[data-schedule-day]:hover {
  border-color: #95c8bd;
  box-shadow: inset 0 0 0 2px rgba(20, 111, 96, 0.06);
}

.calendar-day[data-schedule-day]:focus-visible {
  outline: 3px solid rgba(54, 138, 124, 0.26);
  outline-offset: 2px;
  border-color: #72b6a8;
}

.calendar-day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.calendar-day-head strong {
  font-size: 18px;
  line-height: 1;
}

.calendar-day-head span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.calendar-day-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.calendar-chip {
  width: 100%;
  border: 1px solid #cfe4d8;
  border-radius: 6px;
  background: #ecf8f2;
  color: #1f6b4d;
  display: block;
  min-height: 34px;
  padding: 6px 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.calendar-chip {
  cursor: pointer;
}

button.calendar-chip:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(20, 111, 96, 0.1);
}

.calendar-chip.is-leave {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a5a12;
}

.schedule-tool-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

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

.leave-list-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.leave-list-tools label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.leave-list-tools select {
  min-height: 34px;
  padding: 6px 28px 6px 10px;
}

.leave-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  border-left: 5px solid #d99b2b;
  background: #fff;
}

.leave-card p {
  margin: 0;
  color: #334;
  line-height: 1.5;
  font-size: 13px;
}

.leave-card.status-recorded,
.leave-card.status-pending,
.leave-card.status-approved { border-left-color: #d99b2b; }
.leave-card.status-rejected { border-left-color: #94a3b8; opacity: 0.82; }

.leave-card-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.leave-card-main > span {
  color: var(--muted);
  font-size: 13px;
}

.leave-card-main strong {
  line-height: 1.45;
}

.task-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.task-heading > span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.task-card strong,
.task-heading strong {
  display: block;
  font-size: 18px;
  line-height: 1.45;
  margin-bottom: 10px;
  word-break: break-word;
}

.task-heading strong { margin-bottom: 0; }

.copy-button {
  border: 1px solid var(--owner-line, var(--line));
  border-radius: 8px;
  background: #fff;
  color: var(--owner-main, var(--brand));
  min-height: 32px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.copy-button:hover {
  background: var(--owner-chip, #e8f2ef);
  transform: translateY(-1px);
}

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

.copy-button.primary:hover {
  filter: brightness(0.96);
}

.copy-button:disabled,
.copy-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
  background: #f4f6f5;
  color: var(--muted);
  border-color: var(--line);
}

.copy-button.danger,
.copy-button.danger-soft {
  border-color: #f0c9c3;
  background: #fff6f5;
  color: #9b3328;
}

.copy-button.danger:hover,
.copy-button.danger-soft:hover {
  background: #fdebea;
}

.copy-button.subtle {
  padding: 3px 7px;
  font-size: 12px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-row span {
  border: 1px solid #ead7aa;
  background: #fff8e8;
  color: #73550d;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 13px;
  line-height: 1.3;
}

.tag-row span.cooperation-state-tag {
  border-color: #cfe0da;
  background: #f3f8f5;
  color: var(--brand);
  font-weight: 900;
}

.tag-row span.cooperation-state-tag.is-cooperated {
  border-color: #9fcfc0;
  background: #e6f5ef;
  color: #0d6a4a;
}

.tag-row span.cooperation-state-tag.is-uncooperated {
  border-color: #ead0a4;
  background: #fff8eb;
  color: #875611;
}

.owner-xr {
  --owner-main: #0f5f54;
  --owner-soft: #eef8f2;
  --owner-chip: #d9f0e8;
  --owner-line: #9fcfc0;
}

.owner-zzy {
  --owner-main: #9a6519;
  --owner-soft: #fff7e7;
  --owner-chip: #f7e7bd;
  --owner-line: #e4c27a;
}

.owner-qzz {
  --owner-main: #416b8c;
  --owner-soft: #eef5fb;
  --owner-chip: #dbeaf5;
  --owner-line: #a8c0d6;
}

.owner-lhc {
  --owner-main: #745a86;
  --owner-soft: #f5f1f8;
  --owner-chip: #e7dbef;
  --owner-line: #c7b4d6;
}

.owner-unknown,
.owner- {
  --owner-main: var(--brand);
  --owner-soft: #f3f7f5;
  --owner-chip: #e8f2ef;
  --owner-line: var(--line);
}

.home-account-grid {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.account-owner-group {
  border: 1px solid var(--owner-line);
  border-left: 6px solid var(--owner-main);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.owner-group-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background: var(--owner-soft);
  border-bottom: 1px solid var(--owner-line);
  padding: 12px 14px;
}

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

.owner-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--owner-main);
  flex: 0 0 auto;
}

.owner-group-header strong {
  color: var(--owner-main);
  font-size: 18px;
}

.owner-group-header span {
  color: var(--muted);
  word-break: break-word;
}

.home-owner-accounts,
.owner-account-grid {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.home-owner-accounts {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.owner-account-grid {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}

.account-empty {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--owner-soft);
  color: #213033;
  line-height: 1.6;
}

.priority-list.compact {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.review-page-stack {
  display: grid;
  gap: 18px;
}

.review-dashboard-panel {
  display: grid;
  gap: 16px;
}

.review-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 0 20px;
}

.review-operating-focus {
  display: grid;
  gap: 12px;
  margin: 0 20px;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #f7fbf9;
  padding: 14px;
}

.review-operating-focus > div:first-child {
  display: grid;
  gap: 4px;
}

.review-operating-focus strong {
  color: var(--text);
}

.review-operating-focus span,
.review-focus-item span {
  color: var(--muted);
}

.review-focus-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.review-focus-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.review-focus-item p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.review-stat-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.review-stat-card.platform {
  border-left: 5px solid #3e8376;
}

.review-stat-card.ad {
  border-left: 5px solid #b58b2a;
  background: #fffdf7;
}

.review-stat-card.gap {
  border-left: 5px solid #b75c5c;
  background: #fff8f8;
}

.review-stat-card.success {
  border-left: 5px solid #5f946f;
}

.review-stat-card span,
.review-stat-card em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.4;
}

.review-stat-card strong {
  font-size: 28px;
  line-height: 1.15;
}

.review-visual-grid,
.review-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 20px;
}

.review-trend-card,
.review-summary-grid > section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 15px;
  min-width: 0;
}

.review-trend-card header {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.review-trend-card header strong,
.review-summary-grid h4 {
  font-size: 17px;
}

.review-trend-card header span {
  color: var(--muted);
}

.review-bars {
  height: 170px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  padding-top: 8px;
}

.review-bar-item {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 7px;
  min-width: 0;
  text-align: center;
}

.review-bar-item span,
.review-bar-item em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.review-bar-item i {
  align-self: end;
  justify-self: center;
  width: min(32px, 70%);
  height: 5%;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #3e8376, #b7d5cb);
  min-height: 3px;
}

.review-bar-item.bar-h-1 i { height: 5%; }
.review-bar-item.bar-h-2 i { height: 10%; }
.review-bar-item.bar-h-3 i { height: 15%; }
.review-bar-item.bar-h-4 i { height: 20%; }
.review-bar-item.bar-h-5 i { height: 25%; }
.review-bar-item.bar-h-6 i { height: 30%; }
.review-bar-item.bar-h-7 i { height: 35%; }
.review-bar-item.bar-h-8 i { height: 40%; }
.review-bar-item.bar-h-9 i { height: 45%; }
.review-bar-item.bar-h-10 i { height: 50%; }
.review-bar-item.bar-h-11 i { height: 55%; }
.review-bar-item.bar-h-12 i { height: 60%; }
.review-bar-item.bar-h-13 i { height: 65%; }
.review-bar-item.bar-h-14 i { height: 70%; }
.review-bar-item.bar-h-15 i { height: 75%; }
.review-bar-item.bar-h-16 i { height: 80%; }
.review-bar-item.bar-h-17 i { height: 85%; }
.review-bar-item.bar-h-18 i { height: 90%; }
.review-bar-item.bar-h-19 i { height: 95%; }
.review-bar-item.bar-h-20 i { height: 100%; }

.review-bar-item.no-data span {
  color: #9aa5a1;
}

.review-bar-item.no-data i {
  background: #e5ece8;
  opacity: 0.75;
}

.review-visual-grid .review-trend-card:nth-child(2) .review-bar-item i {
  background: linear-gradient(180deg, #b58b2a, #ead9ab);
}

.review-visual-grid .review-trend-card:nth-child(2) .review-bar-item.no-data i {
  background: #eee7d6;
}

.review-summary-grid h4 {
  margin: 0 0 10px;
}

.review-mini-card-list {
  display: grid;
  gap: 10px;
}

.review-mini-card {
  border: 1px solid #d6e1dd;
  border-radius: 8px;
  background: #fbfdfc;
  padding: 12px;
  display: grid;
  gap: 7px;
}

.review-mini-card.ad {
  border-color: #ddcfaa;
  background: #fffaf0;
}

.review-mini-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.review-mini-card header span {
  color: var(--brand);
  font-weight: 900;
  font-size: 13px;
}

.review-mini-card p,
.review-mini-card em {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-style: normal;
}

.review-input-panel {
  display: grid;
  gap: 16px;
}

.review-input-form {
  display: grid;
  gap: 14px;
  padding: 0 20px;
}

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

.review-input-form.compact .review-input-grid {
  grid-template-columns: 150px 180px 120px minmax(280px, 1fr);
}

.review-input-grid label,
.review-input-textareas label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.review-input-grid input,
.review-input-grid select,
.review-input-textareas textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 12px 13px;
}

.review-input-textareas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.review-input-textareas textarea {
  resize: vertical;
  line-height: 1.6;
}

.review-input-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.review-input-actions span {
  color: var(--muted);
  line-height: 1.6;
}

.review-input-list {
  display: grid;
  gap: 10px;
  padding: 0 20px 20px;
}

.review-input-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #cbd9d4;
  border-radius: 8px;
  background: #fbfdfc;
  padding: 13px;
}

.review-input-card.ad {
  border-color: #d8c79f;
  background: #fffaf0;
}

.review-input-card.gap {
  border-color: #e0b5b5;
  background: #fff8f8;
}

.review-input-card span,
.review-input-card p {
  color: var(--muted);
}

.review-input-card strong {
  display: block;
  margin: 5px 0;
  font-size: 18px;
}

.review-input-card p,
.review-input-card em {
  margin: 0;
  line-height: 1.6;
}

.review-input-card em {
  display: block;
  margin-top: 6px;
  color: #31524d;
  font-style: normal;
}

.review-gap-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: 16px;
  padding: 0 20px 20px;
}

.review-gap-board h4 {
  margin: 0 0 10px;
  font-size: 17px;
}

.review-gap-card p {
  color: var(--muted);
  line-height: 1.65;
}

.review-gap-card-list {
  display: grid;
  gap: 10px;
}

.review-gap-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 13px;
}

.review-gap-card strong {
  display: block;
  color: var(--ink);
  margin-bottom: 6px;
}

.review-gap-card span {
  display: block;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}

.review-gap-card.high {
  border-color: #e3aaaa;
  background: #fff7f7;
}

.review-gap-card.medium {
  border-color: #d8c79f;
  background: #fffaf0;
}

.review-gap-card.low {
  border-color: #c9d8d2;
  background: #f8fbfa;
}

.review-timeline {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.review-history-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.review-history-item strong {
  font-size: 18px;
  line-height: 1.45;
}

.review-history-item span {
  border-radius: 999px;
  background: #eef5fb;
  color: #416b8c;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.review-history-item time {
  flex: 0 0 110px;
  color: var(--brand);
  font-weight: 900;
}

.review-history-item div {
  flex: 1 1 auto;
  min-width: 0;
}

.review-history-item p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.account-grid {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.account-card {
  border: 1px solid var(--owner-line);
  border-radius: 8px;
  background: #fff;
  padding: 13px;
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 112px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.compact-account-card {
  cursor: pointer;
}

.account-card:hover {
  border-color: var(--owner-main);
  box-shadow: 0 12px 24px rgba(20, 55, 49, 0.08);
  transform: translateY(-1px);
}

.account-card.is-paused {
  border-color: #d8ddd9;
  background: #f5f6f4;
  color: #69716d;
}

.account-card.is-paused:hover,
.account-card.is-paused:focus-visible {
  border-color: #aeb7b2;
  box-shadow: 0 10px 20px rgba(74, 84, 80, 0.08);
}

.account-card.is-paused .account-mark {
  background: #9aa3a0;
}

.account-card.is-paused .account-card-title strong,
.account-card.is-paused .account-card-latest strong {
  color: #4f5a56;
}

.account-card-name-line {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.account-card-status {
  border-radius: 999px;
  border: 1px solid #cfd6d2;
  background: #eef1ef;
  color: #5f6965;
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
}

.account-card[data-account-open]:focus-visible {
  border-color: var(--owner-main);
  box-shadow: 0 0 0 3px rgba(31, 122, 99, 0.16), 0 10px 22px rgba(20, 55, 49, 0.07);
  outline: none;
}

.account-card-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.account-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--owner-main, var(--brand));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.account-card-title {
  min-width: 0;
}

.account-card-title strong {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
}

.account-card-title span {
  color: var(--muted);
  display: block;
  margin-top: 2px;
  line-height: 1.35;
  overflow: visible;
  white-space: normal;
  word-break: break-word;
}

.account-card-latest {
  margin: 0;
  border-top: 1px solid #edf2f0;
  padding-top: 9px;
  color: var(--muted);
  display: grid;
  gap: 3px;
  line-height: 1.5;
}

.account-card-latest span {
  color: var(--owner-main);
  font-size: 12px;
  font-weight: 900;
}

.account-card-latest strong {
  color: #384744;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-detail-page {
  overflow: hidden;
  margin-bottom: 0;
}

.account-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  padding: 16px 18px;
  background: #fff;
}

.account-detail-back {
  white-space: nowrap;
}

.account-detail-title {
  min-width: 0;
}

.account-detail-head h3 {
  margin: 0;
  font-size: 23px;
  line-height: 1.25;
  word-break: break-word;
}

.account-detail-meta-line {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

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

.account-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px;
}

.account-detail-layout.is-new-account {
  grid-template-columns: minmax(280px, 520px);
  justify-content: start;
}

.account-detail-primary {
  display: grid;
  grid-template-columns: minmax(320px, 0.7fr) minmax(0, 1.3fr);
  gap: 14px;
  min-width: 0;
}

.account-detail-form {
  display: grid;
  gap: 12px;
}

.account-add-card {
  width: min(640px, 100%);
}

.modal-card.account-edit-modal-card {
  width: min(700px, calc(100vw - 48px));
  max-height: calc(100vh - 44px);
  overflow: hidden;
}

.account-edit-modal-body {
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px 20px;
}

.account-add-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.account-add-form .account-edit-grid {
  grid-template-columns: 1fr;
}

.account-add-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.account-add-form input,
.account-add-form select {
  width: 100%;
  color: var(--ink);
}

.account-platform-editor {
  display: grid;
  gap: 8px;
  align-content: start;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

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

.account-platform-rows {
  display: grid;
  gap: 8px;
}

.account-platform-current {
  display: grid;
  gap: 8px;
}

.account-platform-current > span {
  color: var(--muted);
  font-size: 12px;
}

.account-platform-selected-list {
  min-height: 42px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 7px 9px;
}

.account-platform-selected-list span {
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.account-platform-selected-list em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.account-platform-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.account-platform-custom input {
  width: 100%;
  color: var(--ink);
}

.account-platform-custom-add {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.account-platform-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.account-platform-row.is-custom-platform {
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1fr) auto;
}

.account-platform-row .select-shell {
  min-width: 0;
}

.account-platform-row input {
  width: 100%;
  color: var(--ink);
}

.account-platform-add,
.account-platform-remove {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.account-platform-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-platform-presets button {
  min-height: 30px;
  border: 1px solid #d7e5df;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.account-platform-presets button:hover:not(:disabled) {
  border-color: #8fc4b4;
  background: #f3faf7;
  color: var(--brand);
}

.account-platform-presets button.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.account-profile-edit-form {
  gap: 16px;
}

.account-profile-edit-main {
  display: grid;
  gap: 12px;
  align-items: start;
}

.account-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.account-platform-section {
  border: 1px solid #dce9e4;
  border-radius: 8px;
  background: #fbfdfb;
  padding: 12px;
}

.account-platform-section .account-platform-editor {
  gap: 10px;
}

.account-platform-section .account-platform-presets button {
  max-width: 100%;
  white-space: normal;
}

.account-detail-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-detail-summary > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
}

.account-detail-summary span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 5px;
}

.account-detail-summary strong,
.account-detail-summary p {
  color: var(--ink);
  font-weight: 800;
  margin: 0;
  line-height: 1.55;
  word-break: break-word;
}

.account-detail-summary .wide p {
  font-weight: 600;
}

.account-detail-summary .wide {
  grid-column: 1 / -1;
}

.account-detail-trend-total {
  display: grid;
  gap: 5px;
}

.account-detail-total-line {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 7px;
  align-items: baseline;
  color: var(--muted);
  font-size: 12px;
}

.account-detail-total-line b {
  color: var(--owner-main);
  font-size: 15px;
  font-weight: 900;
}

.account-detail-total-line em {
  color: var(--muted);
  font-style: normal;
  margin-right: 5px;
}

.account-profile-head {
  align-items: start;
}

.account-profile-edit {
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.account-trend-panel {
  border: 1px solid var(--owner-line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.account-trend-head {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) max-content;
  gap: 12px;
  align-items: center;
}

.account-trend-head strong {
  display: block;
  color: var(--ink);
}

.account-trend-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.account-trend-legend {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.account-trend-legend span {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
}

.account-trend-legend i {
  display: inline-block;
  border-radius: 999px 999px 2px 2px;
}

.account-trend-legend .legend-main {
  width: 11px;
  height: 22px;
  background: linear-gradient(180deg, #0f5f54 0%, #167466 62%, #6db6a6 100%);
}

.account-trend-legend .legend-thin {
  width: 5px;
  height: 14px;
  background: #b8ddd3;
}

.account-trend-legend .legend-dot {
  width: 8px;
  height: 8px;
  align-self: center;
  border-radius: 999px;
  background: #b7791f;
  box-shadow: 0 0 0 3px rgba(183, 121, 31, 0.12);
}

.account-trend-head > div:not(.account-trend-title) span {
  color: var(--muted);
  font-size: 12px;
}

.account-trend-total {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px 6px;
  align-items: baseline;
  justify-content: end;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.account-trend-total b {
  color: var(--owner-main);
  font-size: 15px;
}

.account-trend-tools {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-self: start;
}

.account-platform-quick-add,
.account-platform-delete-toggle {
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.account-platform-delete-toggle.is-active {
  color: #9a3412;
  border-color: #f3c7b3;
  background: #fff7ed;
}

.account-trend-platforms {
  display: grid;
  gap: 10px;
}

.account-trend-platform-row {
  display: grid;
  grid-template-columns: minmax(72px, 0.16fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--owner-line);
  border-radius: 8px;
  background: var(--owner-soft);
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.account-trend-platform-row:hover,
.account-trend-platform-row:focus-visible {
  border-color: var(--owner-main);
  box-shadow: 0 0 0 3px rgba(20, 111, 96, 0.1);
  outline: none;
}

.account-trend-platform-row.is-selected {
  border-color: var(--owner-main);
  background: #f7fcf9;
}

.account-trend-platform-name {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.account-trend-platform-name strong {
  color: var(--owner-main);
  font-size: 14px;
}

.account-trend-chart {
  position: relative;
  min-height: 174px;
  display: grid;
  grid-template-columns: repeat(14, minmax(22px, 1fr));
  gap: 2px;
  align-items: end;
  overflow: visible;
  scrollbar-width: none;
  padding-top: 26px;
}

.account-trend-chart::after {
  content: none;
}

.account-trend-update-marker {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  border-radius: 999px;
  background: #f6fbf8;
  color: #47756b;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(15, 95, 84, 0.08);
  z-index: 2;
}

.account-trend-update-marker i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

.account-trend-update-marker span {
  align-self: center;
  color: currentColor;
  font-size: 10px;
  line-height: 1;
}

.account-trend-update-marker.age-hot-0 {
  color: #317b6e;
}

.account-trend-update-marker.age-hot-1 {
  color: #b7791f;
  background: #fffbeb;
}

.account-trend-update-marker.age-hot-2 {
  color: #c65f13;
  background: #fff7ed;
}

.account-trend-update-marker.age-hot-3 {
  color: #b42318;
  background: #fff1f0;
}

.account-trend-day.marker-y-1 .account-trend-update-marker { bottom: 46px; }
.account-trend-day.marker-y-2 .account-trend-update-marker { bottom: 50px; }
.account-trend-day.marker-y-3 .account-trend-update-marker { bottom: 54px; }
.account-trend-day.marker-y-4 .account-trend-update-marker { bottom: 58px; }
.account-trend-day.marker-y-5 .account-trend-update-marker { bottom: 62px; }
.account-trend-day.marker-y-6 .account-trend-update-marker { bottom: 66px; }
.account-trend-day.marker-y-7 .account-trend-update-marker { bottom: 70px; }
.account-trend-day.marker-y-8 .account-trend-update-marker { bottom: 74px; }
.account-trend-day.marker-y-9 .account-trend-update-marker { bottom: 79px; }
.account-trend-day.marker-y-10 .account-trend-update-marker { bottom: 84px; }
.account-trend-day.marker-y-11 .account-trend-update-marker { bottom: 89px; }
.account-trend-day.marker-y-12 .account-trend-update-marker { bottom: 94px; }
.account-trend-day.marker-y-13 .account-trend-update-marker { bottom: 100px; }
.account-trend-day.marker-y-14 .account-trend-update-marker { bottom: 106px; }
.account-trend-day.marker-y-15 .account-trend-update-marker { bottom: 112px; }
.account-trend-day.marker-y-16 .account-trend-update-marker { bottom: 118px; }
.account-trend-day.marker-y-17 .account-trend-update-marker { bottom: 124px; }
.account-trend-day.marker-y-18 .account-trend-update-marker { bottom: 130px; }
.account-trend-day.marker-y-19 .account-trend-update-marker { bottom: 138px; }
.account-trend-day.marker-y-20 .account-trend-update-marker { bottom: 146px; }

.account-trend-day {
  position: relative;
  min-width: 0;
  height: 144px;
  display: grid;
  grid-template-rows: 120px 14px;
  align-items: stretch;
  justify-items: center;
  gap: 8px;
  padding: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.14s ease;
}

.account-trend-bars {
  position: relative;
  width: 100%;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.account-trend-bars::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  border-top: 2px solid #9bbfb5;
  pointer-events: none;
}

.account-trend-view-bar,
.account-trend-interaction-bar {
  border-radius: 999px 999px 2px 2px;
  display: block;
  height: 0;
  position: relative;
  z-index: 1;
}

.account-trend-view-bar {
  flex: 0 0 12px;
  background: linear-gradient(180deg, #0f5f54 0%, #167466 62%, #6db6a6 100%);
}

.account-trend-interaction-bar {
  flex: 0 0 5px;
  background: #b8ddd3;
}

.account-trend-view-bar:not(.is-zero) {
  min-height: 12px;
}

.account-trend-interaction-bar:not(.is-zero) {
  min-height: 6px;
}

.account-trend-view-bar.is-zero,
.account-trend-interaction-bar.is-zero {
  height: 0;
  min-height: 0;
}

.account-trend-view-bar.trend-h-1 { height: 12px; }
.account-trend-view-bar.trend-h-2 { height: 16px; }
.account-trend-view-bar.trend-h-3 { height: 20px; }
.account-trend-view-bar.trend-h-4 { height: 24px; }
.account-trend-view-bar.trend-h-5 { height: 28px; }
.account-trend-view-bar.trend-h-6 { height: 32px; }
.account-trend-view-bar.trend-h-7 { height: 36px; }
.account-trend-view-bar.trend-h-8 { height: 40px; }
.account-trend-view-bar.trend-h-9 { height: 45px; }
.account-trend-view-bar.trend-h-10 { height: 50px; }
.account-trend-view-bar.trend-h-11 { height: 55px; }
.account-trend-view-bar.trend-h-12 { height: 60px; }
.account-trend-view-bar.trend-h-13 { height: 66px; }
.account-trend-view-bar.trend-h-14 { height: 72px; }
.account-trend-view-bar.trend-h-15 { height: 78px; }
.account-trend-view-bar.trend-h-16 { height: 84px; }
.account-trend-view-bar.trend-h-17 { height: 90px; }
.account-trend-view-bar.trend-h-18 { height: 96px; }
.account-trend-view-bar.trend-h-19 { height: 104px; }
.account-trend-view-bar.trend-h-20 { height: 112px; }
.account-trend-interaction-bar.trend-h-1 { height: 6px; }
.account-trend-interaction-bar.trend-h-2 { height: 8px; }
.account-trend-interaction-bar.trend-h-3 { height: 10px; }
.account-trend-interaction-bar.trend-h-4 { height: 12px; }
.account-trend-interaction-bar.trend-h-5 { height: 14px; }
.account-trend-interaction-bar.trend-h-6 { height: 16px; }
.account-trend-interaction-bar.trend-h-7 { height: 18px; }
.account-trend-interaction-bar.trend-h-8 { height: 20px; }
.account-trend-interaction-bar.trend-h-9 { height: 22px; }
.account-trend-interaction-bar.trend-h-10 { height: 24px; }
.account-trend-interaction-bar.trend-h-11 { height: 26px; }
.account-trend-interaction-bar.trend-h-12 { height: 28px; }
.account-trend-interaction-bar.trend-h-13 { height: 30px; }
.account-trend-interaction-bar.trend-h-14 { height: 32px; }
.account-trend-interaction-bar.trend-h-15 { height: 35px; }
.account-trend-interaction-bar.trend-h-16 { height: 38px; }
.account-trend-interaction-bar.trend-h-17 { height: 41px; }
.account-trend-interaction-bar.trend-h-18 { height: 44px; }
.account-trend-interaction-bar.trend-h-19 { height: 47px; }
.account-trend-interaction-bar.trend-h-20 { height: 50px; }

.account-trend-day.is-empty .account-trend-view-bar {
  background: #edf2ef;
}

.account-trend-day.is-empty .account-trend-interaction-bar {
  background: #f4f7f5;
}

.account-trend-day span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  align-self: start;
}

.account-trend-day .account-trend-update-marker span {
  align-self: center;
  color: currentColor;
}

.account-trend-day:hover,
.account-trend-day:focus-visible {
  background: rgba(20, 111, 96, 0.08);
  outline: none;
}

.account-trend-row-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.account-trend-row-actions button {
  min-height: 38px;
  min-width: 76px;
  padding: 8px 13px;
  font-size: 13px;
  white-space: nowrap;
}

.account-platform-delete-x {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #efc6c0;
  background: #fff7f5;
  color: #a33a32;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
}

.account-platform-delete-x:hover,
.account-platform-delete-x:focus-visible {
  border-color: #b94b43;
  background: #fff0ed;
  outline: none;
}

.account-detail-edit-actions {
  justify-content: flex-start;
  margin-top: 0;
}

.account-detail-log-panel {
  max-height: none;
  grid-column: 1 / -1;
}

.account-log-open,
.account-log-close {
  min-height: 38px;
  padding: 8px 14px;
  white-space: nowrap;
}

.modal-card.account-log-modal-card {
  width: min(680px, 100%);
  max-height: none;
  overflow: visible;
  border-radius: 8px;
}

.account-log-modal-body {
  padding: 18px;
  border-radius: 8px;
  background: #fff;
}

.modal-header.account-log-hidden-header {
  display: none;
}

.account-log-modal-stack {
  display: grid;
  gap: 12px;
}

.account-log-modal-card .modal-header {
  position: static;
  padding: 16px 18px;
  border-radius: 8px 8px 0 0;
}

.account-log-modal-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.account-log-modal-scope {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-log-modal-scope strong {
  color: var(--ink);
  font-size: 16px;
}

.account-log-modal-scope span {
  color: var(--muted);
  font-size: 12px;
}

.account-log-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 0 0 auto;
}

.account-log-modal-actions button,
.account-log-modal-add-button {
  min-height: 38px;
  padding: 8px 14px;
  white-space: nowrap;
}

.account-log-empty-state {
  border: 1px dashed var(--owner-line);
  border-radius: 8px;
  background: #f8fbfa;
  padding: 18px;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.account-log-empty-state strong {
  color: var(--ink);
}

.account-log-empty-state span {
  color: var(--muted);
  font-size: 13px;
}

.account-log-modal-form-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  padding: 12px;
}

.account-log-modal-form-card .account-log-edit-item {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

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

.account-detail-form label {
  display: grid;
  gap: 8px;
  align-content: start;
  color: var(--muted);
  font-weight: 800;
}

.account-detail-form input,
.account-detail-form select,
.account-detail-form textarea {
  width: 100%;
  color: var(--ink);
}

.account-basic-panel,
.account-log-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.account-log-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.account-log-head strong {
  display: block;
  color: var(--ink);
}

.account-log-head .account-log-focus-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
}

.account-log-head .account-log-focus-title span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.account-log-head .account-log-platform-focus {
  display: inline-flex;
  align-items: center;
}

.account-detail-log-panel.is-focus-flash .account-log-platform-focus {
  animation: accountLogFocusBlink 0.42s ease-in-out 4;
}

@keyframes accountLogFocusBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.32;
  }
}

.account-log-head > div > span {
  color: var(--muted);
  font-size: 13px;
}

.account-log-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "date platform"
    "title title"
    "url url"
    "views likes"
    "favorites comments"
    "add add";
  gap: 10px;
  align-items: end;
}

.account-log-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.account-log-url {
  grid-column: 1 / -1;
}

.account-log-title {
  grid-column: 2 / -1;
}

.account-log-form label:nth-of-type(n+4) {
  grid-column: span 1;
}

.account-log-form label:nth-of-type(1) { grid-area: date; }
.account-log-form label:nth-of-type(2) { grid-area: platform; }
.account-log-form label:nth-of-type(3) { grid-area: title; }
.account-log-form label:nth-of-type(4) { grid-area: url; }
.account-log-form label:nth-of-type(5) { grid-area: views; }
.account-log-form label:nth-of-type(6) { grid-area: likes; }
.account-log-form label:nth-of-type(7) { grid-area: favorites; }
.account-log-form label:nth-of-type(8) { grid-area: comments; }

.account-log-add {
  grid-area: add;
  width: auto;
  min-height: 38px;
  justify-self: stretch;
  padding-inline: 18px;
}

.account-log-list {
  display: grid;
  gap: 10px;
}

.account-log-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: start;
}

.account-log-item.is-openable {
  cursor: pointer;
}

.account-log-item.is-openable:hover,
.account-log-item.is-openable:focus-visible {
  border-color: var(--owner-main);
  box-shadow: 0 0 0 3px rgba(20, 111, 96, 0.08);
  outline: none;
}

.account-log-item strong {
  display: block;
  word-break: break-word;
}

.account-log-item span,
.account-log-item a {
  color: var(--muted);
  font-size: 13px;
}

.account-log-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  grid-column: 1 / -1;
  max-width: none;
}

.account-log-stats span {
  border-radius: 999px;
  background: var(--owner-soft);
  color: var(--owner-main);
  padding: 5px 8px;
  font-weight: 800;
}

.account-log-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: flex-start;
}

.account-log-actions .copy-button {
  min-height: 34px;
  min-width: 62px;
  padding: 7px 11px;
  font-size: 13px;
}

.account-log-edit-item {
  grid-template-columns: 150px minmax(0, 1fr);
  grid-template-areas:
    "date platform"
    "title title"
    "url url"
    "views likes"
    "favorites comments"
    "actions actions";
  align-items: end;
}

.account-log-edit-item label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.account-log-edit-item label:nth-of-type(1) { grid-area: date; }
.account-log-edit-item label:nth-of-type(2) { grid-area: platform; }
.account-log-edit-item label:nth-of-type(3) { grid-area: title; }
.account-log-edit-item label:nth-of-type(4) { grid-area: url; }
.account-log-edit-item label:nth-of-type(5) { grid-area: views; }
.account-log-edit-item label:nth-of-type(6) { grid-area: likes; }
.account-log-edit-item label:nth-of-type(7) { grid-area: favorites; }
.account-log-edit-item label:nth-of-type(8) { grid-area: comments; }

.account-log-edit-actions {
  grid-area: actions;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}

.influencer-summary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.influencer-subnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: center;
  margin: 8px 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.influencer-subnav button {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 4px 11px;
  min-height: 40px;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.influencer-subnav button:hover,
.influencer-subnav button:focus-visible {
  color: var(--brand);
  outline: none;
}

.influencer-subnav button.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

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

.mini-section-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mini-section-head strong {
  color: var(--brand);
}

.mini-section-head span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.coop-detail-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.mini-section-head > .coop-detail-actions {
  display: flex;
}

.influencer-form .coop-detail-actions button {
  grid-column: auto;
  justify-self: auto;
  min-width: 112px;
  width: auto;
}

.influencer-task-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.modal-task-form {
  padding: 18px 20px 20px;
}

.influencer-task-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.influencer-task-section.compact {
  background: #fbfdfc;
}

.influencer-task-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.influencer-task-section-title strong {
  color: var(--ink);
  font-size: 16px;
}

.influencer-task-section-title span {
  color: var(--muted);
  font-size: 13px;
}

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

.influencer-task-form label {
  gap: 5px;
  min-width: 0;
  font-size: 13px;
}

.influencer-task-form label.wide-field {
  grid-column: span 2;
}

.influencer-task-textarea-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.influencer-task-form textarea {
  min-height: 108px;
  resize: vertical;
}

.influencer-task-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.influencer-task-actions button {
  min-width: 180px;
}

.influencer-entry {
  display: grid;
  padding: 18px;
}

.modal-card.influencer-add-modal-card {
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.influencer-add-modal-card .modal-header {
  position: static;
  padding: 14px 18px;
  border-radius: 8px 8px 0 0;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.influencer-add-modal-card .influencer-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  max-height: calc(100dvh - 126px);
  overflow: auto;
  padding: 16px 18px 18px;
  border-radius: 0 0 8px 8px;
}

.influencer-add-modal-card .influencer-form textarea {
  min-height: 72px;
  height: 72px;
}

.influencer-coop-detail-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid #dbe7e3;
  border-radius: 8px;
  background: #fbfdfb;
  padding: 14px;
}

.influencer-coop-detail-section[hidden] {
  display: none;
}

.influencer-form.has-cooperation-details .influencer-stage-field {
  display: none;
}

.influencer-coop-detail-section .mini-section-head,
.influencer-coop-detail-section .wide-textarea {
  grid-column: 1 / -1;
}

.influencer-coop-mode-banner {
  grid-column: 1 / -1;
  border: 1px solid #b9d8ce;
  border-radius: 8px;
  background: #f0faf5;
  color: var(--brand);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
}

.influencer-coop-mode-banner.is-editing {
  border-color: #ead0a4;
  background: #fff8eb;
  color: #875611;
}

.influencer-coop-detail-section .field-with-hint {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.influencer-coop-detail-section .field-with-hint > span:not(.field-title-row) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.field-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}

.field-title-row b {
  font: inherit;
}

.field-link-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #cfe0da;
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.field-link-action:hover,
.field-link-action:focus-visible {
  border-color: var(--brand);
  background: #eef8f4;
}

.influencer-coop-detail-section .field-with-hint textarea {
  min-height: 68px;
  height: 68px;
}

.influencer-coop-detail-section .field-with-hint.wide-textarea textarea {
  min-height: 84px;
  height: 84px;
}

.influencer-coop-record-switcher {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dfe8e4;
  border-radius: 8px;
  background: #fbfdfc;
}

.influencer-coop-record-switcher[hidden] {
  display: none;
}

.influencer-coop-record-switcher > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.influencer-coop-record-switcher > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.influencer-coop-record-switcher .copy-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 13px;
}

.influencer-coop-record-switcher .coop-record-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.influencer-coop-record-switcher .coop-record-button span {
  color: inherit;
  font-size: 12px;
  opacity: 0.76;
}

.influencer-coop-record-switcher .coop-record-button strong {
  font-size: 13px;
}

.influencer-form:not(.needs-commission) .influencer-coop-commission-field,
.influencer-form:not(.needs-refund) .influencer-coop-refund-field {
  display: none;
}

.influencer-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  background: #fbfcfb;
  padding: 14px;
}

.influencer-form h4 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--brand);
  font-size: 16px;
}

.influencer-form label {
  gap: 5px;
  min-width: 0;
  font-size: 13px;
}

.influencer-form .link-fetch-field {
  grid-column: 1 / -1;
}

.field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
}

.required-mark {
  color: #b42318;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.is-required input,
.is-required select,
.is-required .custom-select-button {
  border-color: #e3b2ac;
  background: #fffdfc;
}

.is-required input:focus,
.is-required select:focus,
.is-required .custom-select-button:focus-visible {
  border-color: #b42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.1);
}

.is-required input:invalid,
.is-required select:invalid {
  border-color: #c64a3c;
}

.influencer-form textarea {
  grid-column: 1 / -1;
  min-height: 92px;
}

.influencer-coop-detail-section textarea:nth-of-type(n + 4) {
  grid-column: auto;
}

.form-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.form-note.warning {
  color: #8a4b00;
  font-weight: 700;
}

.influencer-form button {
  grid-column: 1 / -1;
  justify-self: start;
}

.link-fetch-field {
  display: grid;
  gap: 5px;
}

.link-fetch-control {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.link-fetch-control button {
  grid-column: auto;
  justify-self: stretch;
  align-self: stretch;
  min-width: 92px;
  white-space: nowrap;
}

.influencer-pool-panel {
  border: 1px solid #cfe0da;
  border-radius: 8px;
  background: #fbfcfb;
  display: grid;
  gap: 0;
  overflow: hidden;
}

.influencer-pool-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #dfe8e4;
  background: #f3f8f6;
}

.influencer-pool-head strong {
  color: var(--brand);
  font-size: 16px;
}

.influencer-pool-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.influencer-pool-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  max-height: 520px;
  overflow: auto;
}

.influencer-pool-column {
  border: 1px solid #dfe8e4;
  border-radius: 8px;
  background: #fbfcfb;
  overflow: hidden;
  min-width: 0;
}

.influencer-pool-column header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border-bottom: 1px solid #dfe8e4;
  background: #fff;
}

.influencer-pool-column header strong {
  color: var(--ink);
  font-size: 14px;
}

.influencer-pool-column header span {
  border-radius: 999px;
  background: #eef8f2;
  color: var(--brand);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 900;
}

.influencer-pool-column > div {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.influencer-pool-item {
  border: 1px solid #dbe7e3;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.influencer-pool-item:hover,
.influencer-pool-item:focus-visible {
  border-color: var(--brand-2);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(20, 55, 49, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.influencer-pool-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(31, 122, 99, 0.16), 0 8px 18px rgba(20, 55, 49, 0.08);
}

.influencer-pool-item.active {
  border-color: var(--brand-2);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(20, 111, 96, 0.12);
}

.influencer-pool-item strong,
.influencer-pool-item span {
  display: block;
}

.influencer-pool-item strong {
  line-height: 1.35;
  font-size: 15px;
}

.influencer-pool-item span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.influencer-pool-item em {
  border-radius: 999px;
  background: #eef8f2;
  color: var(--brand);
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  padding: 5px 9px;
}

.influencer-pool-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.influencer-pool-item button {
  width: 100%;
  justify-self: stretch;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 13px;
  text-align: center;
}

.modal-card.influencer-task-modal-card {
  width: min(1180px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
  border-radius: 8px;
}

.influencer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.34fr);
  gap: 16px;
  padding: 18px;
  align-items: start;
}

.influencer-board-panel .influencer-layout {
  grid-template-columns: 1fr;
}

.influencer-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 14px;
  min-width: 0;
  overflow: visible;
}

.influencer-column {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef3f1;
  min-height: 300px;
  min-width: 0;
  overflow: hidden;
}

.influencer-board-panel .influencer-detail {
  position: static;
}

.influencer-column header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.influencer-column-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.influencer-column header strong {
  display: block;
  font-size: 18px;
  line-height: 1.35;
}

.influencer-column header small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  min-height: calc(12px * 1.35);
}

.influencer-column header small.is-empty {
  visibility: hidden;
}

.influencer-column header span {
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  padding: 4px 9px;
  font-size: 13px;
  font-weight: 900;
}

.influencer-column-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.influencer-column > div {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.influencer-card,
.influencer-detail-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  padding: 15px;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.influencer-card {
  cursor: pointer;
  align-content: start;
  min-height: 112px;
  position: relative;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.influencer-card:hover,
.influencer-card:focus-visible {
  border-color: #a9c7bd;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(20, 55, 49, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.influencer-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(31, 122, 99, 0.16), 0 10px 22px rgba(20, 55, 49, 0.08);
}

.influencer-card-move {
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.16s ease;
  z-index: 2;
}

.influencer-card:hover .influencer-card-move,
.influencer-card:focus-within .influencer-card-move {
  opacity: 1;
  pointer-events: auto;
}

.contact-board-card .influencer-card-move {
  opacity: 1;
  pointer-events: auto;
}

.contact-board-card .influencer-card-move button[data-influencer-action="advanceContact"] {
  margin-left: auto;
}

.influencer-card-move button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfe0da;
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  padding: 0;
  font-size: 0;
  font-weight: 900;
  line-height: 0;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(17, 43, 38, 0.14);
}

.influencer-card-move button::before {
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

.influencer-card-move button[data-influencer-action="moveBack"]::before,
.influencer-card-move button[data-coop-action="moveBack"]::before {
  content: "‹";
}

.influencer-card-move button[data-influencer-action="advance"]::before,
.influencer-card-move button[data-influencer-action="advanceContact"]::before,
.influencer-card-move button[data-coop-action="advance"]::before {
  content: "›";
}

.influencer-card-move button:hover:not(:disabled) {
  border-color: var(--brand);
  background: #eef8f2;
}

.influencer-card-move button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.influencer-card.active {
  border-color: var(--brand-2);
  background: #eef8f2;
  box-shadow: inset 0 0 0 1px #9fcfc0;
}

.influencer-card-head,
.influencer-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.influencer-card-head strong,
.influencer-detail-head strong {
  display: block;
  line-height: 1.35;
  word-break: break-word;
}

.influencer-card-head span,
.influencer-detail-head span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.influencer-card-head em,
.influencer-detail-head em {
  flex: 0 0 auto;
  font-style: normal;
  border-radius: 999px;
  background: #eef4f1;
  color: var(--brand);
  padding: 5px 9px;
  font-weight: 900;
}

.influencer-card-head em.hot { background: #dff3e8; color: #0d6a4a; }
.influencer-card-head em.warm { background: #fff1d8; color: #8a5b05; }
.influencer-card-head em.cold { background: #f4eeee; color: #8a3a35; }

.influencer-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.influencer-card p,
.influencer-insight p {
  margin: 0;
  color: #334044;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.influencer-metrics {
  display: grid;
  gap: 8px;
}

.influencer-metrics span {
  border: 1px solid #dbe7e3;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  min-width: 0;
}

.influencer-metrics {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.influencer-metrics span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.influencer-detail {
  position: sticky;
  top: 18px;
  min-width: 0;
}

.influencer-detail-card {
  background: #fbfcfb;
}

.influencer-insight {
  display: grid;
  gap: 5px;
  border-top: 1px solid #e1e8e4;
  padding-top: 10px;
}

.influencer-insight span {
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
}

.doc-console {
  overflow: visible;
}

.doc-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr);
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfb;
}

.doc-picker {
  --doc-picker-action-width: 112px;
  --doc-picker-search-width: 300px;
  position: fixed;
  inset: 0;
  z-index: 46;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 24, 27, 0.42);
  isolation: isolate;
}

.doc-picker-card,
.doc-candidate-card {
  width: min(960px, calc(100vw - 48px));
  max-height: min(720px, calc(100dvh - 48px));
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  padding: 18px;
}

.doc-candidate-card {
  position: absolute;
  z-index: 2;
  width: min(820px, calc(100vw - 48px));
  max-height: min(740px, calc(100dvh - 32px));
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.doc-picker-card:has(.select-shell.is-open) {
  overflow: visible;
}

.doc-candidate-card .doc-picker-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #e3ebe7;
  background: #fff;
}

.doc-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.doc-picker-head h3 {
  margin: 0;
  font-size: 19px;
}

.doc-picker-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.doc-picker-close {
  width: var(--doc-picker-action-width);
  min-height: 36px;
  padding: 7px 14px;
  justify-self: end;
}

.doc-picker-search {
  display: grid;
  grid-template-columns: minmax(0, var(--doc-picker-search-width)) minmax(96px, var(--doc-picker-action-width));
  gap: 10px;
  align-items: center;
  justify-content: start;
  min-width: 0;
}

.doc-picker-search input {
  width: var(--doc-picker-search-width);
  max-width: 100%;
}

.doc-picker-search .primary {
  width: 100%;
  min-width: 0;
}

.doc-picker-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

.doc-source-card {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border: 1px solid #dfe9e5;
  border-radius: 8px;
  background: #fbfcfb;
  padding: 12px;
}

.doc-source-card header {
  display: grid;
  gap: 3px;
}

.doc-source-card header strong {
  font-size: 15px;
}

.doc-source-card header span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.company-doc-source {
  background: #fffdf8;
  border-color: #eadfca;
}

.company-doc-source header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.company-doc-source header span {
  max-width: 210px;
  text-align: right;
}

.doc-manual-add {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.doc-manual-add input,
.doc-manual-add select,
.doc-manual-add .custom-select,
.doc-manual-add .select-shell {
  width: 100%;
  min-width: 0;
}

.doc-required-field,
.doc-manual-category-field,
.doc-candidate-target {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.doc-required-field.is-invalid input {
  border-color: #c23b31;
  box-shadow: 0 0 0 3px rgba(194, 59, 49, 0.12);
}

.field-error {
  display: none;
  color: #a53021;
  font-size: 12px;
  line-height: 1.35;
}

.doc-required-field.is-invalid .field-error {
  display: block;
}

.doc-manual-category-field {
  grid-column: 1 / 2;
  align-self: end;
}

.doc-manual-category-field > span,
.doc-candidate-target > span {
  color: #3f5953;
  font-size: 12px;
  font-weight: 700;
}

.doc-manual-add .ghost {
  grid-column: 2 / 3;
  width: 100%;
  min-width: 0;
  min-height: 43px;
  align-self: end;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.doc-manual-add .select-shell {
  grid-column: auto;
}

.doc-candidate-list {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 22px;
}

.doc-picker-status {
  border: 1px solid #dce8e3;
  border-radius: 8px;
  padding: 11px 12px;
  background: #f8fbfa;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.doc-picker-status.status-success {
  border-color: #b7dfcf;
  background: #effaf5;
  color: #1f6b4d;
}

.doc-picker-status.status-warning {
  border-color: #f0d0a9;
  background: #fff8ef;
  color: #8a5a0a;
}

.doc-picker-status.status-error {
  border-color: #f3beb6;
  background: #fff5f3;
  color: #a53021;
}

.doc-candidate {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 190px) var(--doc-picker-action-width);
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.doc-candidate-target .select-shell {
  width: 100%;
}

.doc-candidate .primary {
  width: var(--doc-picker-action-width);
  justify-self: end;
}

.doc-candidate strong,
.doc-candidate > div span {
  display: block;
  word-break: break-word;
}

.doc-candidate > div span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.doc-layout {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 18px;
}

.doc-list {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

.doc-map-panel,
.doc-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.doc-map-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.doc-folder-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 4px;
}

.doc-folder-tools > div {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.doc-folder-tools strong {
  font-size: 14px;
}

.doc-folder-editor {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #dfe9e5;
  border-radius: 8px;
  background: #fbfcfb;
}

.doc-folder-edit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.doc-folder-edit-row.dragging {
  opacity: 0.55;
}

.doc-folder-edit-row.drop-target {
  border-color: var(--brand);
  background: #eef6f2;
}

.doc-folder-drop-slot {
  position: relative;
  height: 12px;
  margin: -2px 2px;
}

.doc-folder-drop-slot::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 0;
  border-top: 2px solid transparent;
  transform: translateY(-50%);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.doc-folder-drop-slot.active::before {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(24, 105, 92, 0.08);
}

.doc-folder-drop-slot.active::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
  transform: translateY(-50%);
}

.doc-folder-handle {
  width: 30px;
  height: 30px;
  border: 1px solid #dfe9e5;
  border-radius: 7px;
  background: #f6faf8;
  color: var(--muted);
  cursor: grab;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.doc-folder-handle:active {
  cursor: grabbing;
}

.doc-folder-edit-row input {
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  font-size: 15px;
}

.doc-folder-editor .primary {
  width: 100%;
}

.doc-folder-editor p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.doc-group header span,
.doc-row-main span,
.doc-row-main p {
  color: var(--muted);
  font-size: 13px;
}

.doc-category-nav {
  display: grid;
  gap: 7px;
}

.doc-trash-drop {
  display: none;
  min-height: 88px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1.5px dashed #d7aaaa;
  border-radius: 8px;
  background: #fff8f8;
  color: #9a2f2f;
  text-align: center;
}

.doc-card-dragging .doc-trash-drop {
  display: flex;
}

.doc-trash-drop strong {
  font-size: 16px;
}

.doc-trash-drop span {
  color: #9a6a6a;
  font-size: 12px;
}

.doc-trash-drop.drop-target {
  border-color: #b93838;
  background: #fff0f0;
  box-shadow: inset 0 0 0 2px rgba(185, 56, 56, 0.14);
}

.doc-category-nav button {
  border: 1px solid #dfe9e5;
  border-radius: 8px;
  background: #fbfcfb;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.doc-category-nav button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-weight: 900;
}

.doc-category-nav button:hover,
.doc-category-nav button.active {
  background: #eef6f2;
  border-color: #b9d6ca;
}

.doc-category-nav button.company-doc-category {
  border-color: #a9cfc2;
  background: #f2faf6;
}

.doc-category-nav button.company-doc-category span::after {
  content: "手动";
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  border: 1px solid #b7d8cb;
  border-radius: 999px;
  background: #fff;
  color: #2c6c61;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.4;
}

.doc-category-nav button.drop-target {
  background: #f3f7f5;
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.doc-category-nav button.active {
  box-shadow: inset 3px 0 0 var(--brand);
}

.doc-editor {
  order: -1;
  position: static;
  align-self: start;
  overflow: visible;
}

.doc-group header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfb;
}

.doc-group header strong {
  display: block;
  margin-top: 3px;
  font-size: 19px;
}

.doc-group header em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  border-radius: 999px;
  background: #eef3f1;
  color: var(--brand);
  font-style: normal;
  font-weight: 900;
}

.doc-group {
  overflow: hidden;
  border: 1.5px solid #dce5e1;
  box-shadow: 0 10px 28px rgba(19, 39, 37, 0.05);
}

.doc-group:nth-child(even) {
  background: #fcfdfc;
}

.doc-group:nth-child(even) header {
  background: #f5f8f7;
}

.doc-row-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
  padding: 14px;
}

.doc-row {
  display: grid;
  align-items: stretch;
  position: relative;
  padding: 14px;
  border: 1.5px solid #dfe8e3;
  border-left-width: 5px;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.doc-row-folder {
  border-left-color: #8b6f47;
  background: linear-gradient(180deg, #fffdf8 0%, #fff 72%);
}

.doc-row-file {
  border-left-color: #6f7785;
  background:
    linear-gradient(135deg, rgba(111, 119, 133, 0.12) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #f8fafc 0%, #fff 72%);
}

.doc-row-sheet,
.doc-row-bitable {
  border-left-color: #3f7f5f;
  background: linear-gradient(180deg, #f6fbf7 0%, #fff 72%);
}

.doc-row-doc,
.doc-row-docx {
  border-left-color: #2f6b65;
  background: linear-gradient(180deg, #f6fbfa 0%, #fff 72%);
}

.doc-row-slides {
  border-left-color: #9a6a3a;
  background: linear-gradient(180deg, #fff9f3 0%, #fff 72%);
}

.doc-row-wiki {
  border-left-color: #6b5b95;
  background: linear-gradient(180deg, #f8f6fd 0%, #fff 72%);
}

.doc-row:hover {
  transform: translateY(-2px);
  border-color: #b8cac3;
  box-shadow: 0 12px 24px rgba(19, 39, 37, 0.08);
  background: #fbfdfc;
}

.doc-row.dragging {
  opacity: 0.55;
}

.doc-row-main {
  min-width: 0;
  padding-right: 72px;
}

.doc-row-main strong {
  display: block;
  margin-top: 3px;
  line-height: 1.42;
  word-break: break-word;
}

.doc-row-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: rgba(240, 245, 242, 0.92);
  padding: 3px 9px 3px 4px;
  font-weight: 900;
}

.doc-row-type b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.doc-row-folder .doc-row-type b { background: #8b6f47; }
.doc-row-file .doc-row-type b { background: #6f7785; }
.doc-row-sheet .doc-row-type b,
.doc-row-bitable .doc-row-type b { background: #3f7f5f; }
.doc-row-slides .doc-row-type b { background: #9a6a3a; }
.doc-row-wiki .doc-row-type b { background: #6b5b95; }

.doc-row-main p {
  margin: 5px 0 0;
  line-height: 1.45;
}

.doc-row-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 0;
  width: auto;
  padding: 5px 8px;
  border: 1px solid #dce8e3;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #45635d;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(19, 39, 37, 0.06);
}

.doc-row-edit:hover,
.doc-row-edit:focus-visible {
  border-color: #a9cfc2;
  background: #eef7f3;
  color: var(--brand);
}

.doc-edit-card {
  width: min(700px, 100%);
}

.doc-edit-card:has(.select-shell.is-open) {
  overflow: visible;
}

.doc-edit-form {
  gap: 14px;
}

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

.doc-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 6px;
}

.doc-edit-actions > div {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.doc-edit-actions button {
  min-width: 86px;
}

.doc-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px;
  color: var(--muted);
}

.meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
}

.account-setting-card {
  padding: 18px;
}

.user-card {
  display: grid;
  gap: 10px;
}

.user-card.editing {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-card.editing .user-card-actions {
  grid-column: 1 / -1;
}

.user-card.editing .form-note {
  grid-column: 1 / -1;
}

.field-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.field-row span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.password-form {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(280px, 1.15fr);
  gap: 12px 18px;
  padding: 18px;
  align-items: start;
}

.password-new-fields {
  display: grid;
  gap: 12px;
}

.password-form .form-note,
.password-actions {
  grid-column: 1 / -1;
}

.password-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f7efce;
  color: #73550d;
  font-weight: 800;
}

.priority-pill {
  border: 1px solid transparent;
}

.priority-urgent {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.priority-important {
  background: #ffedd5;
  border-color: #fed7aa;
  color: #9a3412;
}

.priority-normal {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.priority-longterm {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #075985;
}

.quicks > button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.quicks > button:hover {
  border-color: #8fc4b4;
  background: #f0f7f5;
  color: var(--brand);
  transform: translateY(-1px);
}

input, select, textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px 12px;
  color: var(--ink);
  font: inherit;
  outline: 0;
}

textarea { resize: vertical; }

input[type="date"] {
  cursor: pointer;
}

.select-shell {
  position: relative;
  min-width: 0;
  width: 100%;
}

.native-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.custom-select-button {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 34px 10px 12px;
  text-align: left;
  position: relative;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.25;
}

.custom-select-button::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.16s ease;
}

.select-shell.is-open .custom-select-button {
  border-color: #8fc4b4;
  box-shadow: 0 0 0 3px rgba(47, 107, 101, 0.12);
}

.select-shell.is-open .custom-select-button::after {
  transform: translateY(-35%) rotate(225deg);
}

.custom-select-list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
  max-height: 230px;
  overflow: auto;
  padding: 4px 0;
  border: 1px solid #cfd9d5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.select-shell.is-open .custom-select-list {
  display: grid;
  gap: 2px;
  align-items: stretch;
  justify-items: stretch;
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: stretch;
  box-sizing: border-box;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  margin: 0;
  padding: 10px 14px;
  text-align: left;
  line-height: 1.35;
  min-height: 40px;
  overflow-wrap: anywhere;
  appearance: none;
}

.custom-select-option:hover,
.custom-select-option.active,
.custom-select-option:focus-visible {
  background: #e8f2ef;
  color: var(--brand);
  font-weight: 900;
  outline: none;
}

.custom-select-option:disabled {
  color: var(--muted);
  opacity: 0.48;
  cursor: default;
}

.panel.select-open-panel {
  overflow: visible;
}

.task-form,
.metric-form,
.leave-form,
.user-form,
.memory-form {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.task-form {
  grid-template-columns: minmax(220px, 1fr) 112px 112px 104px;
  gap: 10px;
  padding: 14px;
}

.task-form.employee-task-form {
  grid-template-columns: minmax(220px, 1fr) 112px 112px 104px;
}

.metric-form {
  grid-template-columns: 1fr;
}

.leave-form {
  grid-template-columns: 1fr;
}

.schedule-tool-grid .leave-form {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 14px;
}

.leave-form textarea {
  min-height: 86px;
}

.schedule-tool-grid .leave-form textarea {
  grid-column: 1 / -1;
  min-height: 72px;
  line-height: 1.45;
  resize: vertical;
}

.schedule-tool-grid .leave-form input,
.schedule-tool-grid .leave-form textarea,
.schedule-tool-grid .leave-form button {
  width: 100%;
  min-height: 48px;
}

.user-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-form button,
.memory-form button {
  justify-self: start;
}

.primary {
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, filter 0.16s ease;
}

.primary:hover {
  filter: brightness(0.96);
  box-shadow: 0 10px 22px rgba(27, 101, 93, 0.16);
  transform: translateY(-1px);
}

.ghost, .small {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.ghost:hover,
.small:hover {
  border-color: #8fc4b4;
  background: #f0f7f5;
  color: var(--brand);
  transform: translateY(-1px);
}

.primary.small {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: none;
}

.primary.small:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  filter: brightness(0.96);
  box-shadow: 0 10px 22px rgba(27, 101, 93, 0.16);
}

.task-owner-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.task-owner-filter button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  padding: 8px 12px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.task-owner-filter button:hover {
  border-color: #79b5a7;
  background: #f0f7f5;
  color: var(--brand);
  transform: translateY(-1px);
}

.task-owner-filter button.active {
  border-color: #1b655d;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px rgba(27, 101, 93, 0.18);
}

.primary:disabled,
.primary[aria-disabled="true"],
.ghost:disabled,
.ghost[aria-disabled="true"],
.small:disabled,
.small[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.42;
  background: #f4f6f5;
  color: var(--muted);
  box-shadow: none;
  filter: none;
  transform: none;
}

.card-actions .small:hover {
  background: #e8f2ef;
  border-color: #8fc4b4;
  color: var(--brand);
  transform: translateY(-1px);
}

.card-actions .small:disabled:hover {
  background: #f4f6f5;
  border-color: var(--line);
  color: var(--muted);
  transform: none;
}

.danger {
  border-color: #e5b9ad;
  background: #fff6f5;
  color: #9c3d2e;
}

.danger:hover {
  border-color: #d9988a;
  background: #fdebea;
  color: #8f2f22;
}

.primary.danger {
  border: 0;
  background: #b7412f;
  color: #fff;
}

.primary.danger:hover {
  border: 0;
  background: #9f3426;
  color: #fff;
  filter: none;
  box-shadow: 0 10px 22px rgba(183, 65, 47, 0.16);
}

button:disabled:hover,
button[aria-disabled="true"]:hover {
  box-shadow: none;
  filter: none;
  transform: none;
}

button[data-working="true"],
.primary[data-working="true"],
.ghost[data-working="true"],
.small[data-working="true"],
.copy-button[data-working="true"],
.icon-button[data-working="true"] {
  cursor: wait;
  opacity: 0.72;
  box-shadow: none;
  filter: none;
  transform: none;
}

.primary[data-working="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary[data-working="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

button[data-working="true"]:hover,
.primary[data-working="true"]:hover,
.ghost[data-working="true"]:hover,
.small[data-working="true"]:hover,
.copy-button[data-working="true"]:hover,
.icon-button[data-working="true"]:hover {
  box-shadow: none;
  filter: none;
  transform: none;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

.kanban-col {
  border: 1px solid var(--line);
  background: #eef3f1;
  border-radius: 8px;
  min-height: 300px;
}

.kanban-col h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 54px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.2;
}

.kanban-col h3 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
}

.kanban-list {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.kanban .task-card {
  padding: 11px;
}

.kanban .task-heading span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.kanban .task-heading strong {
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 1.38;
}

.kanban .meta {
  gap: 5px;
  font-size: 12px;
}

.kanban .task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.kanban .task-owner-name {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
}

.kanban .pill {
  padding: 3px 7px;
  font-size: 12px;
}

.kanban .task-status-content {
  margin-top: 8px;
  padding: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
}

.kanban .card-actions .small {
  flex: 1 1 72px;
  padding: 7px 8px;
  font-size: 12px;
}

.task-status-content {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid #f0d6aa;
  border-left: 4px solid #c77d1a;
  border-radius: 8px;
  background: #fff8e8;
  color: #68430c;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.task-status-content.status-done {
  border-color: #b9ddc6;
  border-left-color: #2f8f64;
  background: #edf8f0;
  color: #1f5f42;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 24, 27, 0.42);
}

.modal.top-modal {
  z-index: 80;
}

.modal-card {
  width: min(460px, 100%);
  max-height: min(720px, calc(100dvh - 48px));
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.modal-card.task-action-card {
  width: min(680px, 100%);
}

.task-confirm-modal .task-action-card {
  width: min(560px, 100%);
}

.task-edit-modal .task-action-card .modal-header {
  display: none;
}

.destructive-confirm-modal .task-action-card {
  border-color: #f0c9c3;
}

.destructive-confirm-modal .modal-header {
  background: #fff7f5;
  border-bottom-color: #f0c9c3;
}

.destructive-confirm-modal .modal-header h3 {
  color: #8f2f22;
}

.modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.modal-header h3 {
  margin: 0;
  font-size: 19px;
}

.task-action-body {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
}

.task-action-body textarea {
  min-height: 120px;
}

.task-action-body textarea.readonly {
  min-height: 76px;
  background: #f7faf8;
  color: var(--ink);
}

.task-confirm-modal .task-action-body {
  gap: 18px;
  padding: 20px;
}

.task-confirm-message {
  min-height: 0;
  white-space: pre-wrap;
  border: 1px solid #dbe7e3;
  border-radius: 8px;
  background: #f7faf8;
  padding: 14px 16px;
  color: var(--ink);
  line-height: 1.65;
}

.destructive-confirm-modal .task-confirm-message {
  border-color: #f0c9c3;
  background: #fff7f5;
  color: #5f241d;
}

.task-edit-form {
  display: grid;
  gap: 14px;
}

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

.task-title-row {
  display: block;
}

.task-edit-form label,
.task-edit-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.task-edit-field > span {
  color: var(--muted);
}

.task-edit-form input,
.task-edit-form select,
.task-edit-form textarea {
  width: 100%;
  color: var(--ink);
}

.task-edit-form select[data-native-select="true"] {
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
}

.task-choice-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-choice-picker button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
  font-weight: 900;
  line-height: 1.2;
}

.task-choice-picker button:hover:not(:disabled) {
  border-color: #8fc4b4;
  background: #f4faf7;
}

.task-choice-picker button.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.task-choice-picker button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.task-edit-form textarea {
  min-height: 92px;
}

.task-edit-form :disabled {
  background: #f6f8f7;
  color: #73817d;
}

.schedule-action-card {
  width: min(620px, 100%);
}

.schedule-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fbfcfb;
}

.schedule-modal-header > * {
  min-width: 0;
}

.schedule-modal-header h3 {
  overflow-wrap: anywhere;
}

.schedule-modal-close {
  width: auto;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 14px;
  white-space: nowrap;
}

.schedule-action-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.schedule-action-body.is-saving {
  cursor: progress;
}

.schedule-action-body.is-saving [data-schedule-action]:disabled {
  opacity: 0.72;
}

.schedule-action-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

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

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

.schedule-action-list {
  display: grid;
  gap: 10px;
}

.schedule-leave-note {
  display: grid;
  gap: 7px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fffaf3;
  padding: 13px 14px;
}

.schedule-leave-note span {
  color: #9a5a12;
  font-size: 13px;
  font-weight: 900;
}

.schedule-leave-note-text {
  display: block;
  justify-self: stretch;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  color: #563b1e;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  line-height: 1.55;
  min-height: 42px;
  padding: 9px 10px;
  text-align: left;
  white-space: pre-wrap;
}

.schedule-leave-note-text:hover {
  background: #fff;
  box-shadow: inset 0 0 0 1px #fed7aa;
}

.schedule-leave-note textarea {
  color: #563b1e;
  line-height: 1.55;
  min-height: 82px;
  resize: vertical;
}

.schedule-leave-note button:not(.schedule-leave-note-text) {
  justify-self: end;
  width: auto;
}

.schedule-action-button,
.schedule-action-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.schedule-action-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 70px;
  padding: 13px 14px;
  text-align: center;
}

.schedule-action-button em {
  justify-self: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 8px;
}

.schedule-action-row {
  padding: 13px 14px;
  text-align: center;
}

.schedule-action-button:hover,
.schedule-action-row:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(20, 111, 96, 0.1);
}

.schedule-action-button.is-work,
.schedule-action-row.is-work {
  background: #ecf8f2;
  border-color: #b7dcca;
  color: #1f6b4d;
}

.schedule-action-button.is-work em {
  background: #d8efe4;
  color: #1f6b4d;
}

.schedule-weekday-button:not(.is-work) {
  background: #f8faf9;
  color: var(--muted);
}

.schedule-default-summary {
  border: 1px solid #d8e7e2;
  border-radius: 8px;
  background: #f5faf8;
  color: var(--brand);
  font-weight: 800;
  line-height: 1.55;
  margin: 0;
  padding: 12px 14px;
}

.schedule-default-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.schedule-action-button.is-leave,
.schedule-action-row.is-leave {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a5a12;
}

.schedule-action-button.is-leave em {
  background: #ffedd5;
  color: #9a5a12;
}

.schedule-action-row.danger {
  background: #fff5f5;
  border-color: #f5c2c7;
  color: #a92727;
}

.ai-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}

.messages {
  display: grid;
  gap: 12px;
  padding: 18px;
  min-height: 360px;
  max-height: 560px;
  overflow: auto;
  background: #f9fbfa;
}

.message {
  max-width: 84%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  line-height: 1.65;
}

.message.user {
  justify-self: end;
  background: #0f4f54;
  color: #fff;
}

.message.assistant {
  justify-self: start;
  background: #fff;
}

.message.pending-action {
  border-color: #f2c188;
  background: #fffaf3;
}

.message-content {
  white-space: pre-wrap;
}

.ai-message-meta {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  border-radius: 999px;
  padding: 3px 9px;
  background: #edf5f2;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.ai-message-meta.pending {
  display: grid;
  gap: 6px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #f0cda5;
  background: #fff5e8;
  color: #7a4b10;
}

.ai-message-meta.pending strong,
.ai-message-meta.pending span {
  display: block;
}

.ai-message-meta.pending span {
  color: #9a6a2a;
  font-weight: 700;
}

.ai-message-meta.pending div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-message-meta.pending em {
  border-radius: 999px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #f0d7b8;
  font-style: normal;
  font-size: 12px;
}

.ai-copy {
  margin-top: 10px;
}

.ai-form {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-top: 1px solid var(--line);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.quicks {
  padding: 18px;
  display: grid;
  gap: 12px;
  align-self: start;
}

.assistant-scope {
  border: 1px solid #dce8e3;
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfc;
}

.assistant-scope.pending {
  border-color: #f0d0a9;
  background: #fff8ef;
}

.assistant-scope strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
}

.assistant-scope p {
  margin: 0;
}

.assistant-memory-panel {
  margin-top: 16px;
  display: grid;
  gap: 0;
}

.assistant-memory-panel {
  border: 1px solid #d9e5df;
  border-radius: 8px;
  background: #f8fbfa;
}

.assistant-memory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid #d9e5df;
}

.assistant-memory-head > div {
  min-width: 0;
}

.assistant-memory-head strong,
.assistant-memory-head h3 {
  display: block;
  color: var(--text);
  font-size: 18px;
  margin-bottom: 4px;
}

.assistant-memory-head h3 {
  margin: 0 0 4px;
}

.assistant-memory-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.assistant-memory-head > span,
.admin-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid #d0ded8;
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.assistant-prompt-catalog {
  display: grid;
  gap: 12px;
  padding: 14px 18px 0;
}

.prompt-catalog-loading {
  border: 1px dashed #d0ded8;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  padding: 12px;
}

.prompt-catalog-loading.error {
  border-color: #efb2a6;
  background: #fff5f3;
  color: #9c3b2c;
}

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

.prompt-catalog-summary article,
.prompt-catalog-block {
  border: 1px solid #d9e5df;
  border-radius: 8px;
  background: #fff;
}

.prompt-catalog-summary article {
  padding: 10px 12px;
  min-width: 0;
}

.prompt-catalog-summary span,
.prompt-source-list span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.prompt-catalog-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  line-height: 1.35;
  word-break: break-word;
}

.prompt-catalog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 12px;
}

.prompt-catalog-block {
  padding: 12px;
  min-width: 0;
}

.prompt-catalog-block h4 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 15px;
}

.prompt-catalog-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.prompt-source-list {
  display: grid;
  gap: 8px;
}

.prompt-source-list article {
  display: grid;
  gap: 6px;
  border: 1px solid #edf2ef;
  border-radius: 8px;
  background: #fbfdfc;
  padding: 10px;
}

.prompt-source-list strong {
  color: var(--ink);
}

.prompt-flow-list {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.6;
}

.quick-prompt-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-prompt-list span {
  border: 1px solid #d9e5df;
  border-radius: 999px;
  background: #fbfdfc;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 9px;
}

.structured-output-block pre {
  max-height: 220px;
  overflow: auto;
  margin: 10px 0 0;
  border: 1px solid #e4ece8;
  border-radius: 8px;
  background: #f6f9f8;
  color: #25312f;
  padding: 12px;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.assistant-memory-form {
  padding: 16px 18px 18px;
  gap: 12px;
}

.assistant-memory-form textarea {
  min-height: 420px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.65;
}

.assistant-memory-form textarea.is-readonly {
  background: #f4f7f6;
  color: #334;
}

.assistant-memory-form textarea.is-editing {
  background: #fff;
  border-color: #8fc4b4;
  box-shadow: 0 0 0 3px rgba(20, 111, 96, 0.08);
}

.assistant-memory-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.assistant-memory-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.quicks p {
  color: var(--muted);
  line-height: 1.6;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr);
  gap: 16px;
}

.login-gate {
  position: fixed;
  inset: 0;
  background: rgba(244,246,243,0.94);
  display: grid;
  place-items: center;
  z-index: 20;
}

.login-card {
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  display: grid;
  gap: 16px;
}
.login-checking {
  width: min(360px, calc(100vw - 32px));
  display: none;
  gap: 12px;
  justify-items: center;
  color: var(--muted);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
  padding: 24px;
}

.login-checking strong {
  color: var(--ink);
  font-size: 18px;
}

.login-progress {
  width: 100%;
  max-width: 220px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #d8e1dd;
}

.login-progress::before {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  animation: loginProgress 1s ease-in-out infinite;
}

body.auth-checking .login-card {
  display: none;
}

body.auth-checking .login-checking {
  display: grid;
}

.login-submit {
  position: relative;
  overflow: hidden;
}

@keyframes loginProgress {
  0% { transform: translateX(-120%); }
  55% { transform: translateX(80%); }
  100% { transform: translateX(240%); }
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.error { color: #a53021; min-height: 20px; margin: 0; }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 32px));
  background: #111;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(12px);
  transition: 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  z-index: 50;
}

.toast span {
  min-width: 0;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.toast button {
  border: 1px solid rgba(255,255,255,0.36);
  border-radius: 8px;
  background: #fff;
  color: #111;
  padding: 6px 10px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .toast {
    top: auto;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    left: 12px;
    justify-content: space-between;
    padding: 10px 12px;
    transform: translateY(12px);
  }

  .toast.show {
    transform: translateY(0);
  }

  .toast button {
    padding: 5px 9px;
  }

  .influencer-card-move {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 1320px) {
  .home-owner-accounts,
  .owner-account-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1720px) {
  .home-owner-accounts,
  .owner-account-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body { grid-template-columns: 1fr; height: auto; overflow: auto; }
  body:has(.sidebar:hover),
  body:has(.sidebar:focus-within) { grid-template-columns: 1fr; }
  .sidebar { position: static; width: auto; min-height: auto; height: auto; padding: 20px; overflow: visible; box-shadow: none; }
  .sidebar:hover,
  .sidebar:focus-within { width: auto; padding-inline: 20px; box-shadow: none; }
  .brand > div:last-child { opacity: 1; transform: none; pointer-events: auto; }
  .nav-item { justify-content: flex-start; padding: 10px 12px; font-size: 17px; }
  .slogan { display: block; position: static; margin-top: 24px; opacity: 1; transform: none; pointer-events: auto; }
  main { height: auto; overflow: visible; padding: 22px; }
  .task-board-title { align-items: flex-start; flex-direction: column; }
  .task-owner-filter { justify-content: flex-start; }
  .stats, .account-summary, .influencer-summary, .home-account-grid, .home-owner-accounts, .owner-account-grid, .priority-list.compact, .hub-today-layout, .hub-status-strip, .hub-schedule-columns, .account-grid, .account-detail-head, .account-detail-layout, .account-detail-primary, .account-edit-grid, .account-log-form, .account-log-item, .account-trend-platform-row, .kanban, .schedule-tool-grid, .schedule-action-grid, .schedule-weekday-grid, .ai-layout, .prompt-catalog-summary, .prompt-catalog-grid, .admin-grid, .review-dashboard-grid, .review-visual-grid, .review-summary-grid, .review-input-grid, .review-input-form.compact .review-input-grid, .review-input-textareas, .review-input-card, .review-gap-board, .doc-picker-sources, .doc-picker-search, .doc-manual-add, .doc-candidate, .doc-toolbar, .doc-layout, .doc-edit-grid, .influencer-task-form, .influencer-entry, .influencer-form, .influencer-layout, .influencer-board, .influencer-pool-list, .metric-layout, .metric-card, .metric-edit-grid, .leave-card { grid-template-columns: 1fr; }
  .account-home-panel .home-account-grid,
  .ai-suggestion-panel .priority-list.compact { grid-template-columns: 1fr; }
  .account-detail-head { justify-items: start; }
  .account-basic-panel, .account-log-panel { overflow: visible; }
  .account-log-form { grid-template-areas: none; }
  .account-log-form label,
  .account-log-title,
  .account-log-url,
  .account-log-add { grid-column: auto; grid-area: auto; }
  .account-log-item .copy-button { grid-column: auto; grid-row: auto; justify-self: start; }
  .metric-layout .metric-form { position: static; }
  .owner-group-header { align-items: flex-start; flex-direction: column; }
  .review-history-item { display: grid; }
  .review-history-item time { flex-basis: auto; }
  .account-card-main { grid-template-columns: 46px minmax(0, 1fr); align-items: start; }
  .doc-editor { position: static; max-height: none; }
  .doc-manual-add .ghost { width: 100%; justify-self: stretch; }
  .influencer-detail { position: static; }
  .influencer-form .link-fetch-field { grid-column: auto; }
  .influencer-form textarea,
  .influencer-task-form textarea { grid-column: auto; }
  .task-form,
  .task-form.employee-task-form,
  .metric-form, .leave-form, .user-form, .password-form, .user-card.editing { grid-template-columns: 1fr; }
  .task-form > *,
  .task-form .select-shell,
  .task-form .custom-select-button { min-width: 0; width: 100%; }

  #view-tasks .kanban {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  #view-tasks .kanban-col h3 {
    min-height: 48px;
    padding: 10px 8px;
    font-size: 14px;
  }

  #view-tasks .kanban-list {
    gap: 8px;
    padding: 8px;
  }

  #view-tasks .kanban .task-card {
    padding: 9px;
  }

  #view-tasks .kanban .task-heading strong {
    font-size: 13px;
  }

  #view-tasks .kanban .card-actions .small {
    flex-basis: 100%;
  }
}

@media (max-width: 760px) {
  body {
    display: block;
    min-height: 100vh;
  }

  .sidebar,
  .sidebar:hover,
  .sidebar:focus-within {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 12px;
    overflow: visible;
    box-shadow: 0 10px 24px rgba(7, 17, 20, 0.18);
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 9px;
  }

  .brand > div:last-child {
    min-width: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .brand strong {
    font-size: 18px;
  }

  .brand span {
    font-size: 13px;
  }

  nav {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item,
  .sidebar:hover .nav-item,
  .sidebar:focus-within .nav-item {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
    gap: 6px;
  }

  .nav-item::before {
    width: 30px;
    height: 26px;
    flex-basis: 30px;
    border-radius: 7px;
    font-size: 13px;
  }

  .slogan,
  .sidebar:hover .slogan,
  .sidebar:focus-within .slogan {
    display: none;
  }

  main {
    padding: 16px;
  }

  .modal {
    padding: 12px;
  }

  .modal-card,
  .influencer-task-modal-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }

  .topbar {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
  }

  .topbar .actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .topbar h1 {
    font-size: 22px;
    line-height: 1.18;
  }

  .topbar .eyebrow {
    font-size: 12px;
  }

  .section-title {
    margin-bottom: 12px;
  }

  .section-title h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  .eyebrow {
    margin-bottom: 5px;
  }

  .badge,
  .ghost,
  .small,
  button.primary {
    min-height: 36px;
    padding-block: 7px;
  }

  .panel {
    margin-bottom: 12px;
  }

  .panel-header {
    align-items: flex-start;
    padding: 14px;
  }

  .stats,
  .account-summary,
  .influencer-summary {
    gap: 10px;
    margin-bottom: 12px;
  }

  .stats article,
  .account-summary article,
  .influencer-summary article {
    padding: 14px;
  }

  .stats strong,
  .account-summary strong,
  .influencer-summary strong {
    font-size: 26px;
  }

  .task-form,
  .metric-form,
  .leave-form,
  .user-form,
  .password-form,
  .memory-form,
  .influencer-form,
  .influencer-task-form {
    gap: 10px;
    padding: 14px;
  }

  input,
  select,
  textarea,
  .custom-select-button {
    min-height: 40px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .form-actions,
  .password-actions,
  .assistant-memory-actions,
  .account-log-edit-actions,
  .cooperation-record-actions,
  .metric-card-actions,
  .user-card-actions {
    align-items: stretch;
    justify-content: flex-start;
  }

  .form-actions > button,
  .password-actions > button,
  .assistant-memory-actions > button,
  .account-log-edit-actions > button,
  .cooperation-record-actions > button,
  .metric-card-actions > button,
  .user-card-actions > button {
    flex: 1 1 130px;
  }

  .schedule-month-controls,
  .schedule-admin-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .schedule-admin-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-admin-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .schedule-month-controls span {
    min-width: 116px;
    text-align: left;
  }

  .calendar-board {
    padding: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width: 0;
  }

  .calendar-weekdays {
    display: none;
  }

  .calendar-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .calendar-day {
    min-height: auto;
    padding: 8px;
    gap: 6px;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
  }

  .calendar-day.is-empty {
    display: none;
  }

  .calendar-day-head {
    display: grid;
    justify-items: center;
    gap: 4px;
  }

  .calendar-day-head strong {
    font-size: 20px;
  }

  .calendar-day-head span {
    white-space: normal;
    font-size: 12px;
  }

  .calendar-day-body {
    gap: 6px;
  }

  .calendar-chip {
    width: auto;
    min-width: 58px;
    max-width: 100%;
    padding-inline: 8px;
  }

  .calendar-chip {
    padding: 6px 7px;
  }
}