:root {
  --bg: #f6f7fb;
  --panel: rgba(255,255,255,.68);
  --panel-strong: rgba(255,255,255,.88);
  --ink: #101828;
  --muted: #667085;
  --line: rgba(16,24,40,.07);
  --soft: rgba(118,118,128,.12);
  --brand: #ff8a00;
  --brand-2: #ffb340;
  --purple: #f59e0b;
  --warn: #b76b12;
  --warn-bg: rgba(255,248,232,.82);
  --danger: #c4473f;
  --danger-bg: rgba(255,240,239,.82);
  --ok: #228a57;
  --ok-bg: rgba(34,138,87,.12);
  --radius: 26px;
  --radius-xl: 32px;
  --shadow: 0 12px 34px rgba(16,24,40,.075);
  --shadow-float: 0 30px 80px rgba(16,24,40,.14);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "PingFang SC", "Segoe UI", sans-serif;
}

/* Task Demo media and shooting guidance */
.task-editor-modal-card {
  width: min(1120px, calc(100vw - 48px));
}
.task-material-field {
  gap: 10px;
}
.task-demo-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 20px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.task-demo-media-panel,
.task-shooting-guidance-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}
.task-demo-upload-actions,
.task-demo-media-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.task-demo-upload-actions .button-link,
.task-demo-media-actions .button-link {
  cursor: pointer;
}
.task-demo-media-list {
  display: grid;
  gap: 8px;
}
.task-demo-media-row,
.task-demo-upload-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.task-demo-upload-row {
  grid-template-columns: 72px minmax(0, 1fr);
}
.task-demo-upload-row progress {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 7px;
  accent-color: var(--brand);
}
.task-demo-thumb {
  position: relative;
  width: 72px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f3f4f6;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.task-demo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.task-demo-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(17,24,39,.72);
  font-size: 10px;
}
.task-demo-media-meta {
  min-width: 0;
}
.task-demo-media-meta > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.task-demo-media-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}
.task-demo-media-meta small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}
.task-demo-media-meta .status-ready { color: #26734d; }
.task-demo-media-meta .status-failed { color: #b42318; }
.task-shooting-guidance-panel .form-row {
  min-width: 0;
}
.task-shooting-guidance-panel textarea {
  min-height: 76px;
  resize: vertical;
}
.task-shooting-guidance-panel textarea[name="demo_shooting_goal"] {
  min-height: 92px;
}
.task-shooting-guidance-panel .field-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.5;
}

.kos-h5-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 86px;
}
.kos-h5-demo-grid.loading {
  border-radius: 8px;
  background: #f3f4f6;
}
.kos-h5-demo-thumb {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f3f4f6;
  color: #fff;
}
.kos-h5-demo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kos-h5-demo-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #667085;
}
.kos-h5-demo-placeholder svg {
  width: 24px;
  height: 24px;
}
.kos-h5-demo-kind,
.kos-h5-demo-cover {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1;
  background: rgba(17,24,39,.76);
}
.kos-h5-demo-kind { left: 5px; bottom: 5px; }
.kos-h5-demo-cover { right: 5px; top: 5px; background: #e66a21; }
.kos-h5-demo-kind svg {
  width: 11px;
  height: 11px;
}
.kos-h5-guidance {
  display: grid;
  gap: 0;
}
.kos-h5-guidance-block {
  padding: 11px 0;
  border-top: 1px solid #edf0f2;
}
.kos-h5-guidance-block:first-of-type { border-top: 0; }
.kos-h5-guidance-block strong {
  color: #29313d;
  font-size: 14px;
}
.kos-h5-guidance-block ul,
.kos-h5-legacy-material ul {
  margin: 7px 0 0;
  padding-left: 18px;
  color: #596273;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* KOS task detail: scheme 2, execution-oriented */
.kos-h5-task-detail-page-v2 {
  min-height: 100vh;
  margin: -18px -16px -92px;
  padding: 12px 15px 112px;
  background: #fff;
}
.kos-h5-task-detail-header {
  margin-bottom: 12px;
}
.kos-h5-task-detail-bar {
  min-height: 34px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  margin-bottom: 10px;
  text-align: center;
}
.kos-h5-task-detail-bar a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #1f2937;
}
.kos-h5-task-detail-bar a:focus-visible {
  outline: 2px solid rgba(230, 94, 20, .42);
  outline-offset: 2px;
}
.kos-h5-task-detail-bar svg {
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
}
.kos-h5-task-detail-bar strong {
  font-size: 16px;
  font-weight: 700;
}
.kos-h5-task-detail-header h1 {
  margin: 0;
  color: #171a21;
  font-size: 21px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.kos-h5-task-title-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 7px;
  color: #6b7280;
  font-size: 12px;
}
.kos-h5-task-title-meta .tag {
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 4px;
}
.kos-h5-task-detail-v2 {
  min-width: 0;
  padding-bottom: 76px;
}
.kos-h5-task-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 18px 0 16px;
  padding: 0;
  list-style: none;
}
.kos-h5-task-progress::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: #d7dce2;
}
.kos-h5-task-progress li {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #8a93a1;
  text-align: center;
}
.kos-h5-task-progress li span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #cdd3da;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-weight: 650;
}
.kos-h5-task-progress li strong {
  max-width: 72px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}
.kos-h5-task-progress li.done span {
  border-color: #f06a22;
  background: #f06a22;
  color: #fff;
}
.kos-h5-task-progress li.current {
  color: #252b35;
}
.kos-h5-task-progress li.current span {
  border-color: #f06a22;
  color: #e95e16;
}
.kos-h5-current-step {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid #eee8e4;
  border-radius: 8px;
  background: #fffdfa;
}
.kos-h5-current-step > div {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #f0d8c9;
  border-radius: 50%;
  color: #ec651d;
}
.kos-h5-current-step svg {
  width: 17px;
  height: 17px;
}
.kos-h5-current-step p,
.kos-h5-current-step strong,
.kos-h5-current-step span {
  display: block;
  min-width: 0;
}
.kos-h5-current-step strong {
  color: #252b35;
  font-size: 13px;
  line-height: 1.4;
}
.kos-h5-current-step span {
  margin-top: 3px;
  color: #758092;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.kos-h5-task-facts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0 0;
  padding: 12px 0;
  border-top: 1px solid #edf0f2;
  border-bottom: 1px solid #edf0f2;
}
.kos-h5-task-facts div {
  min-width: 0;
  padding: 0 10px;
  border-left: 1px solid #edf0f2;
}
.kos-h5-task-facts div:first-child {
  padding-left: 0;
  border-left: 0;
}
.kos-h5-task-facts div:last-child {
  padding-right: 0;
}
.kos-h5-task-facts span,
.kos-h5-task-facts strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kos-h5-task-facts span {
  color: #8a93a1;
  font-size: 11px;
}
.kos-h5-task-facts strong {
  margin-top: 5px;
  color: #404855;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}
.kos-h5-detail-section {
  min-width: 0;
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid #edf0f2;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.kos-h5-detail-section-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.kos-h5-detail-section h2,
.kos-h5-detail-section-head h2 {
  margin: 0;
  color: #222833;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.4;
}
.kos-h5-detail-section-head > span {
  flex: 0 0 auto;
  color: #8a93a1;
  font-size: 11px;
}
.kos-h5-task-detail-v2 .kos-h5-demo-grid {
  grid-template-columns: repeat(3, minmax(106px, 1fr));
  gap: 7px;
  min-height: 74px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.kos-h5-task-detail-v2 .kos-h5-detail-section {
  padding: 10px 0;
}
.kos-h5-task-detail-v2 .kos-h5-demo-grid::-webkit-scrollbar {
  display: none;
}
.kos-h5-task-detail-v2 .kos-h5-demo-thumb {
  border-radius: 6px;
}
.kos-h5-task-detail-v2 .kos-h5-guidance {
  display: block;
  gap: 0;
}
.kos-h5-task-detail-v2 .kos-h5-guidance-block {
  min-width: 0;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid #edf0f2;
}
.kos-h5-task-detail-v2 .kos-h5-guidance-block:first-of-type {
  border-top: 0;
}
.kos-h5-task-detail-v2 .kos-h5-guidance-block strong {
  color: #303743;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
}
.kos-h5-task-detail-v2 .kos-h5-guidance-block div {
  min-width: 0;
}
.kos-h5-task-detail-v2 .kos-h5-guidance-block p {
  margin: 0;
  color: #697386;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kos-h5-task-detail-v2 .kos-h5-guidance-block p + p {
  margin-top: 4px;
}
.kos-h5-task-detail-v2 .kos-h5-guidance-block.required p {
  color: #4a5362;
  font-weight: 650;
}
.kos-h5-task-requirement p {
  margin-top: 7px;
  color: #697386;
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.kos-h5-task-detail-v2 .kos-h5-sticky-actions {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  bottom: 42px;
  margin: 12px -1px 0;
  padding: 3px 1px 1px;
  background: rgba(255,255,255,.96);
}
.kos-h5-task-detail-v2 .kos-h5-sticky-actions .button-link {
  min-height: 38px;
  border-radius: 7px;
  font-size: 13px;
}
.kos-h5-task-detail-v2 .kos-h5-sticky-actions .secondary {
  min-height: 32px;
}
.kos-h5-task-detail-page-v2 .kos-h5-bottom {
  bottom: 0;
  width: min(100%, 480px);
  padding: 3px 8px 2px;
  border-width: 1px 0 0;
  border-radius: 0;
  background: rgba(255,255,255,.97);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, .05);
}
.kos-h5-task-detail-page-v2 .kos-h5-bottom a {
  border-radius: 7px;
  gap: 1px;
  padding: 4px 2px;
  font-size: 11px;
}
.kos-h5-task-detail-page-v2 .kos-h5-bottom a.active {
  background: #fff5ef;
}

/* Task detail: explicit generation and direct-publish routes */
.kos-task-detail-screen {
  min-height: calc(100vh - 92px);
  margin: -18px -16px 0;
  padding: 0 16px 32px;
  background: #fff;
  color: #18202d;
}
.kos-task-detail-screen svg {
  width: 20px;
  height: 20px;
}
.kos-task-detail-topbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  border-bottom: 1px solid #edf0f4;
}
.kos-task-detail-topbar a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #18202d;
}
.kos-task-detail-topbar a:focus-visible,
.kos-task-view-tabs a:focus-visible,
.kos-task-mode-card a:focus-visible {
  outline: 2px solid rgba(255, 108, 0, .46);
  outline-offset: 2px;
}
.kos-task-detail-topbar h1 {
  margin: 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
}
.kos-task-summary {
  padding: 14px 0 0;
}
.kos-task-summary-heading h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.kos-task-assignment {
  min-height: 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.kos-task-assignment > span:not(.tag) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #667085;
  font-size: 14px;
}
.kos-task-assignment svg {
  width: 16px;
  height: 16px;
}
.kos-task-summary .tag {
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 13px;
}
.kos-task-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  padding: 10px 0;
  border-top: 1px solid #edf0f4;
  border-bottom: 1px solid #edf0f4;
}
.kos-task-meta > div {
  min-width: 0;
  padding: 0 14px;
  border-right: 1px solid #e7eaf0;
}
.kos-task-meta > div:first-child { padding-left: 0; }
.kos-task-meta > div:last-child { padding-right: 0; border-right: 0; }
.kos-task-meta span,
.kos-task-meta strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kos-task-meta span {
  margin-bottom: 6px;
  color: #7b8494;
  font-size: 12px;
}
.kos-task-meta strong {
  color: #18202d;
  font-size: 14px;
  line-height: 1.35;
}
.kos-task-view-tabs {
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
  padding: 3px;
  border-radius: 8px;
  background: #f2f4f7;
}
.kos-task-view-tabs a {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #4b5565;
  font-size: 15px;
  font-weight: 700;
}
.kos-task-view-tabs a.active {
  color: #e95d0b;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .09);
}
.kos-task-execute-view,
.kos-task-resources-view {
  padding-top: 12px;
}
.kos-task-section-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kos-task-section-head h2,
.kos-task-mode-heading h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0;
}
.kos-task-section-head p,
.kos-task-mode-heading p {
  margin: 4px 0 0;
  color: #7b8494;
  font-size: 13px;
  line-height: 1.5;
}
.kos-task-section-head > a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #59667a;
  font-size: 13px;
}
.kos-task-section-head > a svg {
  width: 17px;
  height: 17px;
}
.kos-task-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.kos-task-progress::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 12.5%;
  left: 12.5%;
  height: 1px;
  background: #dfe3e9;
}
.kos-task-progress li {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}
.kos-task-step-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #cfd5de;
  border-radius: 50%;
  color: #5c6676;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
}
.kos-task-progress li.done .kos-task-step-number {
  color: #fff;
  border-color: #169b57;
  background: #169b57;
}
.kos-task-progress li.current .kos-task-step-number {
  color: #fff;
  border-color: #ff6c00;
  background: #ff6c00;
}
.kos-task-progress li.skipped .kos-task-step-number {
  color: #768092;
  border-style: dashed;
  background: #f4f6f8;
}
.kos-task-progress li strong {
  max-width: 80px;
  color: #2f3744;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.kos-task-progress li small {
  color: #8992a2;
  font-size: 11px;
  line-height: 1.2;
}
.kos-task-progress li.done small { color: #148c50; }
.kos-task-progress li.current small { color: #e95d0b; }
.kos-task-mode-heading {
  margin: 16px 0 10px;
  padding-top: 12px;
  border-top: 1px solid #edf0f4;
}
.kos-task-mode-card {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #dfe3e9;
  border-radius: 8px;
  background: #fff;
}
.kos-task-mode-card.selected {
  border-color: #ff8a3d;
  background: #fffaf6;
}
.kos-task-mode-title {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
}
.kos-task-mode-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #f26513;
  background: #fff0e6;
}
.kos-task-mode-card.direct .kos-task-mode-icon {
  color: #49667c;
  background: #edf5f8;
}
.kos-task-mode-title h3 {
  margin: 0;
  color: #18202d;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0;
}
.kos-task-mode-title h3 em {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 6px;
  border: 1px solid #ff8a3d;
  border-radius: 5px;
  color: #e95d0b;
  font-size: 11px;
  font-style: normal;
  vertical-align: 2px;
}
.kos-task-mode-title div > span {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  color: #e95d0b;
  background: #fff0e6;
  font-size: 11px;
}
.kos-task-mode-card.direct .kos-task-mode-title div > span {
  color: #3d6682;
  background: #edf5f8;
}
.kos-task-mode-title > i {
  width: 18px;
  height: 18px;
  border: 2px solid #cfd5de;
  border-radius: 50%;
}
.kos-task-mode-card.selected .kos-task-mode-title > i {
  border: 5px solid #ff6c00;
}
.kos-task-primary-action,
.kos-task-secondary-action {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}
.kos-task-primary-action {
  color: #fff;
  background: #f66a0a;
  box-shadow: 0 6px 14px rgba(242, 101, 19, .2);
}
.kos-task-secondary-action {
  color: #344054;
  border: 1px solid #aeb6c2;
  background: #fff;
}
.kos-task-primary-action svg:last-child,
.kos-task-secondary-action svg {
  width: 17px;
  height: 17px;
}
.kos-task-primary-action:hover { background: #de5900; }
.kos-task-secondary-action:hover { background: #f7f8fa; }
.kos-task-requirement-summary {
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid #edf0f4;
}
.kos-task-requirement-summary p {
  margin: 7px 0 0;
  color: #5f6979;
  font-size: 14px;
  line-height: 1.6;
}
.kos-task-resources-view .public-info-grid {
  gap: 10px;
  margin-top: 4px;
}
.kos-task-resources-view .copy-card,
.kos-task-resources-view .kos-h5-card {
  border-radius: 8px;
  box-shadow: none;
  background: #fafbfc;
}
.kos-task-flow-context {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fafbfc;
}
.kos-task-flow-context > p {
  margin: 0;
  color: #667085;
  font-size: 13px;
}
.kos-task-subflow > .kos-h5-card {
  margin: 14px 0 0;
  border-radius: 8px;
  box-shadow: none;
  backdrop-filter: none;
}
.kos-task-detail-screen + .kos-h5-bottom {
  bottom: 0;
  width: min(100%, 480px);
  padding: 6px 10px max(6px, env(safe-area-inset-bottom));
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: 0 -4px 18px rgba(15, 23, 42, .08);
}
.kos-task-detail-screen + .kos-h5-bottom a {
  min-height: 48px;
  border-radius: 8px;
}

/* Direct publish route: selected Product Design option 1 */
.kos-direct-publish-screen { min-height: calc(100vh - 58px); padding-bottom: 84px; background: #fff; }
.kos-h5-device:has(.kos-direct-publish-screen) { padding-bottom: 0; }
.kos-direct-publish-screen .kos-task-detail-topbar { min-height: 58px; }
.kos-direct-publish-route { min-height: 52px; display: flex; align-items: center; gap: 9px; margin: 0 -16px; padding: 0 20px; border-bottom: 1px solid #edf0f4; color: #475467; background: #fbfcfd; font-size: 13px; line-height: 1.4; }
.kos-direct-publish-route-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #1ca665; box-shadow: 0 0 0 4px rgba(28, 166, 101, .1); }
.kos-direct-publish-route strong { color: #14784b; font-weight: 760; }
.kos-direct-publish-route span:last-child { margin-left: auto; color: #98a2b3; font-size: 12px; }
.kos-direct-publish-panel { width: 100%; max-width: 440px; min-width: 0; margin: 0 auto; }
.kos-direct-publish-context { display: grid; gap: 0; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.kos-direct-publish-context > div { min-height: 38px; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
.kos-direct-publish-context span { color: #7b8494; font-size: 13px; }
.kos-direct-publish-context strong { min-width: 0; color: #18202d; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.kos-direct-publish-context strong.muted { color: #667085; font-weight: 650; }
.kos-direct-publish-form { width: 100%; min-width: 0; display: grid; gap: 17px; padding-top: 16px; }
.kos-direct-publish-form > * { min-width: 0; }
.kos-direct-publish-form .form-row { min-width: 0; gap: 8px; color: #273142; font-size: 14px; font-weight: 760; }
.kos-direct-publish-form .form-row > span:first-child { display: flex; align-items: center; gap: 5px; }
.kos-direct-publish-form .form-row > span em { color: #f04438; font-style: normal; }
.kos-direct-publish-form .form-row > span small { color: #98a2b3; font-size: 12px; font-weight: 500; }
.kos-direct-publish-form .form-row input,
.kos-direct-publish-form .form-row select,
.kos-direct-publish-form .form-row textarea { width: 100%; min-width: 0; border: 1px solid #d9dee7; border-radius: 10px; color: #1d2735; background: #fff; box-shadow: none; font-size: 14px; line-height: 1.45; }
.kos-direct-publish-form .form-row input { height: 50px; padding: 0 14px; }
.kos-direct-publish-form .form-row select { height: 50px; padding: 0 42px; appearance: none; }
.kos-direct-publish-form .form-row textarea { min-height: 116px; height: 116px; padding: 13px 14px 28px; resize: vertical; }
.kos-direct-publish-form input::placeholder,
.kos-direct-publish-form textarea::placeholder { color: #a0a8b5; }
.kos-direct-publish-form input:focus,
.kos-direct-publish-form select:focus,
.kos-direct-publish-form textarea:focus { outline: 2px solid rgba(246, 106, 10, .15); outline-offset: 0; border-color: #f47a2c; }
.kos-publish-input-shell { position: relative; display: block !important; }
.kos-publish-input-shell svg { position: absolute; z-index: 1; top: 15px; left: 14px; width: 19px; height: 19px; color: #7b8494; pointer-events: none; }
.kos-direct-publish-form .kos-publish-input-shell input { padding-left: 43px; }
.kos-publish-select-shell { position: relative; display: block !important; min-width: 0; }
.kos-publish-select-shell svg { position: absolute; z-index: 1; top: 16px; width: 18px; height: 18px; color: #7b8494; pointer-events: none; }
.kos-publish-select-shell svg:first-child { left: 14px; }
.kos-publish-select-shell svg:last-child { right: 14px; }
.kos-publish-field-help { color: #7b8494 !important; font-size: 12px; font-weight: 500 !important; line-height: 1.5; }
.kos-publish-empty-product { display: grid; gap: 8px; min-width: 0; }
.kos-direct-publish-form select:disabled { color: #98a2b3; background: #f7f8fa; cursor: not-allowed; }
.kos-publish-note-field { position: relative; }
.kos-publish-character-count { position: absolute; right: 12px; bottom: 9px; color: #98a2b3 !important; font-size: 11px; font-weight: 500 !important; }
.kos-direct-publish-form .field-error { color: #d92d20 !important; font-size: 12px; line-height: 1.4; }
.kos-publish-product-disclosure { overflow: hidden; border: 1px solid rgba(242, 215, 196, .35); border-radius: 10px; background: #fff6ee; }
.kos-publish-product-disclosure summary { min-height: 68px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 12px 13px; color: #344054; cursor: pointer; list-style: none; }
.kos-publish-product-disclosure summary::-webkit-details-marker { display: none; }
.kos-publish-product-disclosure summary > span:nth-child(2) { min-width: 0; }
.kos-publish-product-disclosure summary strong,
.kos-publish-product-disclosure summary small { display: block; }
.kos-publish-product-disclosure summary strong { font-size: 14px; line-height: 1.4; }
.kos-publish-product-disclosure summary small { margin-top: 4px; color: #8a94a3; font-size: 12px; line-height: 1.35; }
.kos-publish-product-disclosure summary b { color: #e8610c; font-size: 12px; font-weight: 760; white-space: nowrap; }
.kos-publish-product-disclosure summary svg { width: 17px; height: 17px; color: #98a2b3; transition: transform 160ms ease; }
.kos-publish-product-disclosure[open] summary svg { transform: rotate(90deg); }
.kos-publish-product-warning { width: 24px; height: 24px; display: grid !important; place-items: center; border-radius: 50%; color: #e8610c; background: #fff0e4; font-size: 14px; font-weight: 850; }
.kos-publish-product-options summary { grid-template-columns: minmax(0, 1fr) auto 18px; }
.kos-publish-product-options .task-kos-results { margin: 0 12px 12px; }
.candidate-product-box { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; border-top: 1px solid #f0ded0; background: #fff; }
.kos-publish-readonly-brand { min-height: 60px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid #e5e8ee; border-radius: 10px; background: #f8f9fb; }
.kos-publish-readonly-brand span,
.kos-publish-readonly-brand small { color: #7b8494; font-size: 12px; }
.kos-publish-readonly-brand strong { color: #273142; font-size: 14px; }
.kos-publish-readonly-brand small { grid-column: 1 / -1; }
.kos-publish-submit-note { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: start; margin: 0; padding: 8px 2px; border-radius: 9px; color: #667085; background: transparent; font-size: 12px; line-height: 1.55; }
.kos-publish-submit-note svg { width: 17px; height: 17px; margin-top: 1px; color: #7b8494; }
.kos-publish-sticky-action { position: relative; z-index: 1; margin: 0 -1px; padding: 3px 1px 4px; background: #fff; }
.kos-publish-sticky-action .primary { width: 100%; min-height: 50px; border-radius: 9px; color: #fff; background: #f66a0a; box-shadow: 0 8px 18px rgba(242, 101, 19, .2); font-size: 15px; font-weight: 800; }
.kos-publish-sticky-action .primary:hover { background: #df5b05; }
.kos-publish-sticky-action .primary:disabled { color: rgba(255, 255, 255, .88); background: #f6a46c; box-shadow: none; cursor: not-allowed; }
.kos-publish-product-state,
.kos-publish-product-error { margin: 0; border-radius: 10px; }
.kos-direct-publish-screen + .kos-h5-bottom { z-index: 10; padding: 2px 8px max(2px, env(safe-area-inset-bottom)); }
.kos-direct-publish-screen + .kos-h5-bottom a { min-height: 46px; }
@media (max-width: 380px) {
  .kos-task-meta > div { padding: 0 9px; }
  .kos-task-progress li strong { max-width: 68px; font-size: 11px; }
  .kos-task-progress li small { font-size: 10px; }
  .kos-task-mode-card { padding: 13px; }
  .kos-task-mode-title h3 { font-size: 16px; }
  .kos-direct-publish-route { padding: 0 16px; }
  .kos-publish-product-disclosure summary { grid-template-columns: 26px minmax(0, 1fr) auto 16px; gap: 8px; padding: 11px; }
  .kos-publish-product-disclosure summary b { font-size: 11px; }
}
.kos-h5-media-viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 48px;
  background: #111318;
  color: #fff;
  animation: kos-media-in 150ms ease-out;
}
.kos-h5-media-close {
  justify-self: end;
  align-self: center;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  padding: 9px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.12);
}
.kos-h5-media-close svg,
.kos-h5-media-pager svg {
  width: 100%;
  height: 100%;
}
.kos-h5-media-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 12px;
}
.kos-h5-media-stage img,
.kos-h5-media-stage video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.kos-h5-media-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.kos-h5-media-pager button {
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.12);
}
.kos-h5-media-pager button:first-child svg { transform: rotate(90deg); }
.kos-h5-media-pager button:last-child svg { transform: rotate(-90deg); }
@keyframes kos-media-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 760px) {
  .task-editor-modal-card {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .task-demo-editor {
    grid-template-columns: minmax(0, 1fr);
  }
  .task-demo-media-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .task-demo-media-actions {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kos-h5-media-viewer { animation: none; }
}

.kos-h5-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 4%, rgba(255, 138, 0, .12), transparent 28%),
    linear-gradient(180deg, #fffdf9 0%, #f7f8fb 100%);
  display: flex;
  justify-content: center;
  color: #1f2937;
}

.kos-h5-device {
  width: min(100%, 480px);
  min-height: 100vh;
  padding: 18px 16px 92px;
  position: relative;
}

.kos-h5-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 16px;
  text-align: center;
}

.kos-h5-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: rgba(255, 248, 241, .88);
  border: 1px solid rgba(255, 201, 165, .7);
  box-shadow: 0 10px 24px rgba(255, 138, 61, .12), inset 0 1px 0 rgba(255,255,255,.72);
  flex: 0 0 auto;
}

.kos-h5-header-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seedos-mini-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  overflow: hidden;
  flex: 0 0 auto;
}

.seedos-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex: 0 0 auto;
}

.kos-h5-brand-hero {
  width: 128px;
  height: 128px;
  margin: 0 auto 14px;
}

.kos-h5-header p {
  margin: -2px 0 0;
  color: #8a94a6;
  font-size: 12px;
}

.kos-h5-header h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.24;
  letter-spacing: 0;
}

.kos-h5-card,
.kos-h5-task-card,
.kos-h5-metrics article {
  border-radius: 22px;
  border: 1px solid rgba(226, 232, 240, .82);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
  backdrop-filter: blur(16px) saturate(150%);
}

.kos-h5-card {
  padding: 16px;
  margin: 12px 0;
}

.kos-h5-loading-card {
  text-align: center;
  overflow-wrap: anywhere;
}

.kos-h5-login-wait {
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 18px 0 12px;
}

.kos-h5-login-wait-brand {
  width: 124px;
  height: 42px;
  margin: 0 auto 20px;
}

.kos-h5-login-wait-heading {
  margin-bottom: 20px;
  text-align: center;
}

.kos-h5-login-wait-heading h1 {
  margin: 0;
  color: #232a35;
  font-size: 23px;
  line-height: 1.28;
  letter-spacing: 0;
}

.kos-h5-login-wait-heading p {
  margin: 10px auto 0;
  color: #717b89;
  font-size: 13px;
  line-height: 1.55;
}

.kos-h5-login-progress-card,
.kos-h5-login-recovery {
  border: 1px solid #ece8e2;
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 38px rgba(56, 45, 34, .08);
}

.kos-h5-login-progress-card {
  padding: 22px 16px 16px;
  text-align: center;
}

.kos-h5-login-focus-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid #ffd8bb;
  border-radius: 50%;
  color: #ff6f1c;
  background: #fff8f2;
  box-shadow: 0 0 0 10px rgba(255, 127, 48, .07);
}

.kos-h5-login-focus-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kos-h5-login-focus-icon > span {
  width: 20px;
  height: 20px;
  position: absolute;
  right: -2px;
  bottom: 3px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #ff7420;
}

.kos-h5-login-focus-icon > span svg { width: 12px; height: 12px; }

.kos-h5-login-progress-card h2 {
  margin: 0;
  color: #232a35;
  font-size: 19px;
  line-height: 1.35;
}

.kos-h5-login-focus-status {
  margin: 7px 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #707986;
  font-size: 14px;
}

.kos-h5-login-focus-status > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff7a22;
  animation: kos-h5-login-pulse 1.4s ease-in-out infinite;
}

.kos-h5-login-stages {
  margin: 0;
  padding: 13px 3px 11px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #eeeae5;
  border-radius: 14px;
  background: #fffdfa;
  list-style: none;
}

.kos-h5-login-stages li {
  min-width: 0;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #8b929b;
}

.kos-h5-login-stages li + li {
  border-left: 1px solid #ece9e5;
}

.kos-h5-login-stage-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #d9d6d1;
  border-radius: 50%;
  background: #fff;
}

.kos-h5-login-stage-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kos-h5-login-stages strong {
  max-width: 100%;
  color: #4c5562;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 600;
  white-space: nowrap;
}

.kos-h5-login-stages small {
  color: inherit;
  font-size: 11px;
  line-height: 1.25;
}

.kos-h5-login-stages .complete { color: #4cab50; }
.kos-h5-login-stages .complete .kos-h5-login-stage-icon {
  border-color: #78c96d;
  color: #fff;
  background: #72c663;
}
.kos-h5-login-stages .active { color: #f36b16; }
.kos-h5-login-stages .active .kos-h5-login-stage-icon {
  border-color: #ff8a3d;
  color: #f36b16;
  background: #fff8f2;
}

.kos-h5-login-slow {
  min-height: 56px;
  margin-top: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid #ffd3aa;
  border-radius: 14px;
  color: #c55d16;
  background: #fff8ed;
}

.kos-h5-login-slow > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.kos-h5-login-slow svg,
.kos-h5-login-keep-open svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kos-h5-login-slow strong,
.kos-h5-login-slow p {
  margin: 0;
  line-height: 1.45;
}

.kos-h5-login-slow strong { font-size: 15px; }
.kos-h5-login-slow p { color: #7b6c60; font-size: 13px; }

.kos-h5-login-keep-open {
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #687381;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.kos-h5-login-keep-open svg {
  width: 18px;
  height: 18px;
}

.kos-h5-login-recovery {
  margin-top: 16px;
  padding: 20px 16px 18px;
}

.kos-h5-login-recovery h2 {
  margin: 0 0 14px;
  color: #28303b;
  font-size: 18px;
  line-height: 1.4;
}

.kos-h5-login-recovery-error {
  margin: -2px 0 14px;
  color: #d94b22;
  font-size: 13px;
  line-height: 1.5;
}

.kos-h5-login-recovery-actions {
  display: grid;
  gap: 10px;
}

.kos-h5-login-recovery-actions button {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  text-align: left;
}

.kos-h5-login-recovery-actions button span { min-width: 0; }
.kos-h5-login-recovery-actions button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes kos-h5-login-pulse {
  0%, 100% { opacity: .55; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 350px) {
  .kos-h5-device { padding-left: 12px; padding-right: 12px; }
  .kos-h5-login-wait { padding-top: 16px; }
  .kos-h5-login-wait-brand { margin-bottom: 16px; }
  .kos-h5-login-wait-heading { margin-bottom: 18px; }
  .kos-h5-login-wait-heading h1 { font-size: 22px; }
  .kos-h5-login-progress-card { padding: 22px 10px 14px; }
  .kos-h5-login-stages li { padding: 0 4px; }
  .kos-h5-login-stages strong,
  .kos-h5-login-stages small { font-size: 10px; }
  .kos-h5-login-stages strong { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .kos-h5-login-focus-status > span { animation: none; }
}

.kos-h5-card h3,
.kos-h5-task-card strong {
  margin: 0 0 8px;
  font-size: 16px;
}

.kos-h5-card p,
.kos-h5-task-card span,
.kos-h5-task-card small {
  color: #64748b;
  line-height: 1.6;
}

.kos-h5-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kos-h5-metrics article {
  padding: 14px;
}

.kos-h5-metrics span {
  display: block;
  color: #8a94a6;
  font-size: 12px;
  margin-bottom: 6px;
}

.kos-h5-metrics strong {
  font-size: 22px;
}

.kos-h5-list {
  display: grid;
  gap: 12px;
}

.kos-h5-task-list-flat {
  border-top: 1px solid #eadfd4;
}

.kos-h5-list-pagination {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) auto minmax(84px, 1fr);
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
}

.kos-h5-list-pagination button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  white-space: nowrap;
}

.kos-h5-list-pagination span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

.kos-h5-list-pagination button:disabled {
  cursor: default;
  opacity: .42;
}

.kos-h5-task-list-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  min-height: 56px;
  padding: 5px 4px;
  border-bottom: 1px solid #eadfd4;
  color: inherit;
  text-decoration: none;
}

.kos-h5-task-list-meta {
  min-width: 0;
  padding: 0 6px;
  border-right: 1px solid #e8ddd2;
}

.kos-h5-task-list-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.kos-h5-task-list-status.pending {
  color: #d75b0b;
  background: #fff1e5;
  border: 1px solid #ffd8b8;
}

.kos-h5-task-list-status.complete {
  color: #267a3f;
  background: #e8f5e9;
  border: 1px solid #cde8d2;
}

.kos-h5-task-list-meta small {
  display: grid;
  gap: 1px;
  margin-top: 3px;
  color: #64748b;
  font-size: 10.5px;
  line-height: 1.3;
}

.kos-h5-task-list-meta b {
  font-weight: 650;
}

.kos-h5-task-list-content {
  min-width: 0;
  align-self: center;
  padding: 0 10px 0 12px;
}

.kos-h5-task-list-content strong,
.kos-h5-task-list-content span {
  display: block;
  min-width: 0;
}

.kos-h5-task-list-content strong {
  display: -webkit-box;
  overflow: hidden;
  color: #182337;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.kos-h5-task-list-content span {
  overflow: hidden;
  margin-top: 2px;
  color: #5f7896;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kos-h5-task-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.kos-h5-task-card small {
  grid-column: 1 / -1;
}

.kos-h5-bottom a {
  text-decoration: none;
  color: #64748b;
}

.kos-h5-flow-nav {
  margin: 8px 0 12px;
  display: flex;
  justify-content: flex-start;
}

.kos-h5-materials {
  display: grid;
  gap: 10px;
}

.kos-h5-materials article {
  padding: 12px;
  border-radius: 16px;
  background: rgba(248, 250, 252, .9);
  border: 1px solid rgba(226, 232, 240, .9);
}

.kos-h5-materials img,
.kos-h5-materials video {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 14px;
  margin: 8px 0;
  background: #f8fafc;
}

.kos-h5-materials small {
  display: block;
  margin-top: 6px;
  color: #f97316;
}

.kos-h5-form {
  display: grid;
  gap: 12px;
}

.kos-h5-form label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.kos-h5-form input {
  height: 48px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 15px;
  background: #fff;
}

.kos-h5-choice-list {
  display: grid;
  gap: 10px;
}

.kos-h5-choice {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.kos-h5-choice input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  padding: 0;
}

.kos-h5-choice span,
.kos-h5-choice small {
  min-width: 0;
}

.kos-h5-choice strong,
.kos-h5-choice small {
  display: block;
  overflow-wrap: anywhere;
}

.kos-h5-choice strong {
  color: #172033;
  font-size: 14px;
}

.kos-h5-choice small {
  margin-top: 3px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.45;
}

.kos-h5-actions,
.kos-h5-sticky-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.kos-h5-sticky-actions {
  position: sticky;
  bottom: 74px;
  z-index: 5;
  margin: 14px 0;
}

.kos-h5-bottom {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 448px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, .9);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
  backdrop-filter: blur(20px) saturate(160%);
}

.kos-h5-bottom a {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 16px;
  font-size: 12px;
}

.kos-h5-nav-icon {
  position: relative;
  display: grid;
  width: 22px;
  height: 20px;
  place-items: center;
}

.kos-h5-notification-badge {
  position: absolute;
  top: -7px;
  left: 14px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d92d20;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
  line-height: 13px;
  text-align: center;
  white-space: nowrap;
}

.kos-h5-bottom svg {
  width: 18px;
  height: 18px;
}

.kos-h5-bottom a.active {
  color: #dc6218;
  background: rgba(255, 138, 0, .12);
}

.kos-h5-notification-toolbar {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.kos-h5-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f1f5f9;
}

.kos-h5-segmented button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
}

.kos-h5-segmented button.active {
  background: #fff;
  color: #172033;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.kos-h5-notification-read-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kos-h5-notification-read-actions button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
}

.kos-h5-notification-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.kos-h5-notification-meta em {
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
}

.kos-h5-notification-meta em.current {
  background: #fff3e8;
  color: #9a4812;
}

.kos-h5-actions.single {
  grid-template-columns: 1fr;
}

.kos-h5-form .kos-h5-field {
  display: grid;
  gap: 7px;
}

.kos-h5-form .kos-h5-field span {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.kos-h5-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 88px;
  border: 1px solid rgba(203, 213, 225, .95);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #172033;
  background: #fff;
}

.kos-h5-field.invalid textarea {
  border-color: rgba(220, 38, 38, .75);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
}

.kos-h5-field small {
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.4;
}

.kos-h5-submission-links {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.kos-h5-submission-links article {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, .9);
  background: #f8fafc;
}

.kos-h5-submission-links article.matched {
  border-color: rgba(22, 163, 74, .22);
  background: rgba(240, 253, 244, .72);
}

.kos-h5-submission-links article.pending {
  border-color: rgba(217, 119, 6, .22);
  background: rgba(255, 251, 235, .8);
}

.kos-h5-submission-links strong {
  color: #172033;
  font-size: 13px;
}

.kos-h5-submission-links span,
.kos-h5-submission-links small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.kos-h5-notification-card.unread {
  border-color: rgba(22, 163, 74, .28);
  background: rgba(240, 253, 244, .62);
}

.kos-h5-notification-card.read {
  opacity: .86;
}

@media (min-width: 760px) {
  .kos-h5-page {
    padding: 28px 0;
  }
  .kos-h5-device {
    min-height: calc(100vh - 56px);
    border-radius: 34px;
    border: 1px solid rgba(226, 232, 240, .9);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .12);
    overflow: hidden;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(255,138,0,.13), transparent 30%),
    radial-gradient(circle at 76% 0%, rgba(255,179,64,.12), transparent 28%),
    radial-gradient(circle at 90% 68%, rgba(18,161,154,.09), transparent 30%),
    linear-gradient(180deg, #fbfcff, var(--bg));
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .62; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; text-decoration: none; }

.login-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 430px; padding: 20px; gap: 20px; }
.login-visual { border: 1px solid var(--line); border-radius: 34px; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.54)); box-shadow: var(--shadow-float); padding: 56px; display: grid; align-content: space-between; }
.login-visual h1 { font-size: 44px; max-width: 680px; line-height: 1.12; }
.login-visual p { color: var(--muted); max-width: 580px; line-height: 1.7; }
.login-panel { border: 1px solid var(--line); border-radius: 34px; background: var(--panel-strong); backdrop-filter: blur(30px) saturate(1.2); box-shadow: var(--shadow); padding: 56px 38px; display: grid; align-content: center; gap: 24px; }
.sidebar { position: fixed; inset: 20px auto 20px 20px; width: 270px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: rgba(255,255,255,.58); backdrop-filter: blur(30px) saturate(1.2); box-shadow: var(--shadow); color: var(--ink); display: flex; flex-direction: column; z-index: 2; max-height: calc(100vh - 40px); overflow: hidden; }
.brand { display: flex; align-items: center; gap: 12px; padding: 2px 4px 18px; border-bottom: 0; color: inherit; text-decoration: none; border-radius: 8px; }
.brand:focus-visible { outline: 2px solid rgba(193, 74, 0, 0.42); outline-offset: 3px; }
.brand span, .sidebar-foot span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.seedos-shell-logo { width: 168px; height: 84px; display: block; overflow: hidden; flex: 0 0 auto; }
.nav { padding: 10px 0; display: grid; gap: 8px; overflow-y: auto; min-height: 0; flex: 1 1 auto; padding-right: 4px; scrollbar-width: thin; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(102,112,133,.24); border-radius: 999px; }
.nav a { height: 46px; border: 0; background: transparent; color: #344054; display: flex; align-items: center; gap: 11px; padding: 0 12px; border-radius: 18px; text-align: left; }
.nav a:before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(102,112,133,.28); }
.nav a svg { display: none; }
.nav a.active { background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px rgba(16,24,40,.07); color: var(--ink); }
.nav a.active:before { background: var(--brand); box-shadow: 0 0 0 5px rgba(255,138,0,.14); }
.sidebar-foot { margin-top: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.72); display: grid; gap: 5px; flex: 0 0 auto; }
.tenant-switcher { width: 100%; min-height: 46px; margin-top: 2px; border: 0; background: transparent; color: var(--ink); border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; text-align: left; }

.shell { margin-left: 316px; min-height: 100vh; padding: 20px 24px 56px 0; position: relative; z-index: 1; }
.topbar { height: 92px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: rgba(255,255,255,.62); backdrop-filter: blur(28px) saturate(1.2); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; padding: 0 26px; position: sticky; top: 20px; z-index: 5; }
.eyebrow { margin: 0 0 5px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0; }
.topbar .eyebrow { text-transform: none; }
h1, h2, h3, p { margin: 0; letter-spacing: 0; }
h1 { font-size: 30px; font-weight: 780; }
h2 { font-size: 20px; font-weight: 740; }
h3 { font-size: 15px; font-weight: 720; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.user-chip { min-height: 42px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.76); display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 14px; color: var(--ink); line-height: 1.1; }
.user-chip small { color: var(--muted); font-size: 11px; }
.account-chip { width: min(420px, 36vw); align-items: flex-start; }
.account-chip strong, .account-chip small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip-password {
  margin-top: 5px;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,138,0,.12);
  color: #c46300;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 780;
}
.topbar-password-btn {
  flex: 0 0 auto;
  min-height: 42px;
  border-color: rgba(255,138,0,.24);
  background: rgba(255,243,234,.78);
  color: #c46300;
  font-weight: 760;
}
.topbar-password-btn svg {
  width: 17px;
  height: 17px;
}

.canvas { display: grid; gap: 20px; padding-top: 22px; }
.grid { display: grid; gap: 18px; }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel, .card, .brand-card-v2, .kos-card-v2 { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); backdrop-filter: blur(26px) saturate(1.15); box-shadow: var(--shadow); }
.panel { padding: 22px; }
.card { padding: 20px; }
.hero-panel { min-height: 232px; padding: 28px; border-radius: 34px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.54)); box-shadow: var(--shadow-float); display: grid; grid-template-columns: 1.2fr .9fr; gap: 22px; align-items: stretch; }
.hero-panel h2 { font-size: 36px; line-height: 1.16; max-width: 760px; }
.hero-card { border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.64); padding: 18px; display: grid; align-content: space-between; }
.hero-card strong { font-size: 26px; }
.home-dashboard { display: grid; gap: 20px; }
.home-hero p:not(.eyebrow) { color: var(--muted); line-height: 1.7; max-width: 760px; margin-top: 14px; }
.home-context { display: flex; flex-wrap: wrap; gap: 10px; }
.trend-panel { overflow: hidden; }
.trend-switches { display: grid; gap: 8px; justify-items: end; }
.segmented { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.66); }
.segmented a { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 12px; color: var(--muted); font-size: 13px; }
.segmented a.active { color: var(--ink); background: rgba(255,138,0,.12); box-shadow: inset 0 0 0 1px rgba(255,138,0,.18); }
.trend-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 16px; }
.trend-summary { border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.64); padding: 16px; display: grid; gap: 8px; }
.trend-summary span, .trend-summary small { color: var(--muted); }
.trend-summary strong { font-size: 28px; }
.trend-chart { width: 100%; height: 220px; display: block; }
.trend-chart .trend-grid line { stroke: rgba(16,24,40,.07); stroke-width: 1; }
.trend-chart polyline { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 8px 16px rgba(255,138,0,.18)); }
.trend-chart circle { fill: #fff; stroke: var(--brand); stroke-width: 3; }
.trend-labels { grid-column: 2; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: -8px; }
.publish-status-panel { display: grid; gap: 14px; }
.home-context span { min-height: 36px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.68); color: var(--muted); padding: 0 12px; font-size: 13px; }
.home-link-card { color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.home-link-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.home-link-card.disabled { opacity: .72; cursor: default; }
.home-link-card.disabled:hover { transform: none; box-shadow: var(--shadow); }
.home-list { display: grid; gap: 10px; }
.home-list-item { min-height: 58px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.58); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; }
.home-list-item div { display: grid; gap: 4px; min-width: 0; }
.home-list-item strong, .home-list-item span { overflow-wrap: anywhere; }
.home-list-item div span { color: var(--muted); font-size: 12px; }
.home-quick-links { display: flex; flex-wrap: wrap; gap: 10px; }
.button-link { min-height: 42px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid var(--line); white-space: nowrap; }
.home-quota { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.home-quota div { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.62); padding: 14px; display: grid; gap: 6px; }
.home-quota span { color: var(--muted); font-size: 12px; }
.home-quota strong { font-size: 22px; }
.metric { min-height: 150px; display: grid; align-content: space-between; position: relative; overflow: hidden; }
.metric span { color: var(--muted); font-size: 13px; }
.metric strong { font-size: 32px; font-weight: 780; }
.metric small { color: var(--ok); }
.usage-ring { height: 8px; background: var(--soft); border-radius: 99px; overflow: hidden; }
.usage-ring i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }

.brand-card-v2, .kos-card-v2 { min-height: 242px; padding: 18px; display: grid; gap: 14px; }
.brand-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.brand-logo { width: 54px; height: 54px; border-radius: 20px; display: grid; place-items: center; color: #fff; font-weight: 820; background: linear-gradient(145deg, #141b2d, #68758a); }
.micro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.micro { border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.62); padding: 13px; min-width: 0; }
.micro span { color: var(--muted); font-size: 12px; }
.micro strong { display: block; margin-top: 6px; font-size: 16px; overflow-wrap: anywhere; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.54); }
table { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: 14px; background: transparent; }
th { text-align: left; color: var(--muted); font-size: 12px; font-weight: 650; background: rgba(255,255,255,.46); }
th, td { padding: 18px 16px; border-bottom: 1px solid rgba(16,24,40,.055); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(255,255,255,.54); }
.row-action { color: #c46300; background: transparent; border: 0; padding: 0; font-weight: 650; }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; width: fit-content; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 680; white-space: nowrap; }
.green { background: rgba(34,138,87,.12); color: var(--ok); }
.blue { background: rgba(255,138,0,.13); color: #c46300; }
.amber, .orange { background: rgba(183,107,18,.13); color: var(--warn); }
.red { background: rgba(196,71,63,.12); color: var(--danger); }
.purple { background: rgba(245,158,11,.13); color: var(--purple); }
.gray { background: var(--soft); color: var(--muted); }

.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 0; }
.filters input, .filters select, .form-row input, .form-row select, textarea { height: 44px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); padding: 0 14px; min-width: 170px; color: var(--ink); }
.form-row select[multiple] { height: auto; min-height: 128px; padding: 10px 12px; }
textarea { height: 92px; padding: 13px 14px; resize: vertical; }
.primary, .secondary, .ghost, .danger-btn { min-height: 42px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid var(--line); white-space: nowrap; }
.primary { border: 0; color: #fff; background: linear-gradient(180deg, #ff9d2e, #e36f00); box-shadow: 0 16px 30px rgba(255,138,0,.23); }
.secondary { background: rgba(255,255,255,.76); color: var(--ink); }
.ghost { background: transparent; color: var(--ink); }
.danger-btn { background: var(--danger-bg); color: var(--danger); }
.icon-btn { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.76); display: grid; place-items: center; color: var(--ink); }
.segmented { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.5); }
.segmented button { height: 36px; border: 0; background: transparent; border-radius: 14px; padding: 0 14px; color: var(--muted); }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

.task-row { padding: 15px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.58); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-row div { display: grid; gap: 4px; }
.task-row span, .field span, .version-card span { color: var(--muted); font-size: 12px; }
.field, .version-card { border: 1px solid var(--line); border-radius: 24px; padding: 16px; display: grid; gap: 8px; background: rgba(255,255,255,.62); }
.version-card.current { border-color: rgba(255,138,0,.28); box-shadow: inset 4px 0 0 var(--brand); }
.alert { border-radius: 22px; padding: 16px; font-size: 13px; border: 1px solid var(--line); line-height: 1.55; background: rgba(255,255,255,.68); }
.warning { color: #87500d; background: var(--warn-bg); }
.error { color: #94322d; background: var(--danger-bg); }
.ok { color: var(--ok); background: var(--ok-bg); }

.empty, .loading, .permission, .quota, .failed, .validation { min-height: 520px; display: grid; place-items: center; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.empty-inline { border: 1px dashed var(--line); border-radius: 20px; color: var(--muted); padding: 16px; text-align: center; background: rgba(255,255,255,.58); }
.state-box { width: 460px; display: grid; gap: 14px; justify-items: center; }
.state-logo { width: 112px; height: 112px; margin-bottom: 2px; }
.state-icon { width: 58px; height: 58px; border-radius: 21px; background: linear-gradient(145deg, rgba(255,138,0,.18), rgba(255,179,64,.14)); border: 1px solid var(--line); display: grid; place-items: center; color: var(--brand); }
.state-box p { margin: 0; color: var(--muted); line-height: 1.6; }
.skeleton { width: 100%; height: 14px; border-radius: 99px; background: linear-gradient(90deg, #edf0f5, #f8fafc, #edf0f5); background-size: 180% 100%; animation: shimmer 1.2s infinite; }
.skeleton-card { width: 100%; height: 116px; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 14px; background: var(--panel); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.drawer, .modal { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: .18s ease; z-index: 20; background: rgba(16,24,40,.20); backdrop-filter: blur(10px); }
.drawer.open, .modal.open { pointer-events: auto; opacity: 1; }
.drawer-panel { position: absolute; right: 20px; top: 20px; bottom: 20px; width: 620px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: rgba(255,255,255,.90); backdrop-filter: blur(34px) saturate(1.2); box-shadow: var(--shadow-float); padding: 24px; display: grid; align-content: start; gap: 18px; overflow: auto; transform: translateX(24px); transition: .18s ease; }
.drawer-panel.wide { width: min(760px, calc(100vw - 40px)); }
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-panel header, .modal-panel header { display: flex; justify-content: space-between; gap: 18px; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.timeline { display: grid; gap: 12px; }
.timeline div { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; color: var(--muted); }
.timeline i { width: 10px; height: 10px; background: var(--brand); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,138,0,.12); }
.modal { display: grid; place-items: center; }
.modal-panel { width: min(940px, calc(100vw - 48px)); max-height: 86vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-xl); background: rgba(255,255,255,.92); backdrop-filter: blur(34px) saturate(1.2); box-shadow: var(--shadow-float); padding: 26px; display: grid; gap: 20px; }
.form-row { display: grid; gap: 8px; font-size: 13px; font-weight: 650; text-align: left; }
.form-row small { color: var(--danger); font-weight: 500; }
.form-row.invalid input, .form-row.invalid select, .form-row.invalid textarea { border-color: var(--danger); background: #fffafa; }
.form-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.form-level-error { border: 1px solid rgba(180,35,24,.18); border-radius: 8px; background: var(--danger-bg); color: var(--danger); padding: 10px 12px; font-size: 13px; font-weight: 650; line-height: 1.55; }
.mode-panel[hidden], .check-row[hidden] { display: none; }
.mode-panel { border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.58); padding: 18px; display: grid; gap: 14px; }
.readonly { min-height: 44px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.54); padding: 12px 14px; color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); padding: 5px 11px; font-size: 13px; color: var(--ink); }
.chip b { color: var(--muted); font-weight: 700; }
.task-kos-selector { gap: 10px; }
.task-kos-trigger,
.task-kos-panel {
  border: 1px solid rgba(16,24,40,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.66);
}
.task-kos-trigger {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
}
.task-kos-placeholder { color: var(--muted); font-weight: 520; }
.task-kos-chip-row,
.task-kos-actions,
.task-kos-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.task-kos-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(255,138,0,.18);
  border-radius: 999px;
  background: rgba(255,138,0,.1);
  color: #bc5b00;
  font-size: 12px;
  font-weight: 720;
}
.task-kos-chip em {
  color: var(--danger);
  font-style: normal;
  font-weight: 760;
}
.task-kos-chip.invalid {
  border-color: rgba(148,50,45,.18);
  background: rgba(148,50,45,.08);
  color: var(--danger);
}
.task-kos-panel {
  padding: 12px;
  display: grid;
  gap: 10px;
}
.task-kos-filters input,
.task-kos-filters select {
  height: 40px;
  min-width: min(180px, 100%);
  border-radius: 14px;
}
.task-kos-actions {
  justify-content: space-between;
  border-top: 1px solid rgba(16,24,40,.06);
  padding-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}
.task-kos-results {
  max-height: 300px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}
.task-kos-option {
  min-height: 58px;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.76);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-weight: 600;
}
.task-kos-option:hover { border-color: rgba(255,138,0,.28); background: rgba(255,248,241,.88); }
.task-kos-option.disabled { opacity: .6; }
.task-kos-option input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  accent-color: var(--brand);
}
.task-kos-option strong,
.task-kos-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-kos-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 520;
}
.task-deadline-field .segmented { width: fit-content; }
.task-deadline-field input[type="date"] { max-width: 260px; }
.task-product-selector .task-kos-actions { align-items: center; }
.kos-submit-product .task-kos-results.compact { max-height: 220px; }
.candidate-product-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.candidate-product-box .wide,
.candidate-product-box .alert {
  grid-column: 1 / -1;
}
.check-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 500; margin-top: 8px; }
.check-row input { width: auto; min-width: 0; height: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.56); }
.form-grid .wide { grid-column: 1 / -1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.row-actions.compact { gap: 8px; align-items: center; }
.row-actions.compact button { min-height: 34px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.8); color: var(--ink); padding: 0 10px; }
.quota-btn { height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; font-weight: 760; border: 1px solid transparent; white-space: nowrap; }
.quota-btn-primary { color: #fff; background: linear-gradient(180deg, #ff9f2f, #ff7018); box-shadow: 0 14px 26px rgba(255,112,24,.22); }
.quota-btn-secondary { color: var(--ink); background: rgba(255,255,255,.86); border-color: rgba(16,24,40,.12); box-shadow: 0 8px 18px rgba(16,24,40,.04); }
.quota-btn-risk { color: #c46300; background: rgba(255,138,0,.1); border-color: rgba(255,138,0,.18); }
.quota-modal-card { width: min(920px, calc(100vw - 48px)); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 34px 88px rgba(16,24,40,.16); }
.quota-form-grid .form-row input,
.quota-form-grid .form-row select,
.quota-form-grid textarea,
.quota-combobox-input input { height: 48px; border-radius: 12px; border: 1px solid rgba(16,24,40,.12); background: rgba(255,255,255,.82); }
.quota-form-grid input:focus,
.quota-form-grid textarea:focus,
.quota-combobox-input input:focus { outline: 2px solid rgba(255,138,0,.22); border-color: rgba(255,138,0,.48); }
.quota-combobox { display: grid; gap: 10px; }
.quota-combobox-input { position: relative; }
.quota-combobox-input input { width: 100%; padding: 0 44px 0 14px; min-width: 0; }
.quota-combobox-input button { position: absolute; right: 7px; top: 7px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(16,24,40,.05); color: var(--muted); display: grid; place-items: center; }
.quota-combobox-menu { max-height: 280px; overflow: auto; display: grid; gap: 8px; border: 1px solid rgba(16,24,40,.08); border-radius: 16px; background: rgba(248,250,252,.76); padding: 8px; }
.quota-option { width: 100%; border: 1px solid rgba(16,24,40,.08); border-radius: 14px; background: rgba(255,255,255,.84); display: grid; gap: 4px; padding: 10px 12px; text-align: left; color: var(--ink); }
.quota-option.active { border-color: rgba(255,138,0,.36); box-shadow: inset 3px 0 0 var(--brand); }
.quota-option span { color: var(--muted); font-size: 12px; }
.quota-option em { color: #c46300; font-size: 12px; font-style: normal; }
.temp-password-box { border: 1px solid rgba(255,138,0,.2); border-radius: 18px; background: rgba(255,248,232,.72); padding: 16px; display: grid; gap: 10px; }
.temp-password-box strong { font-size: 22px; letter-spacing: .04em; }
.temp-password-box .temp-password-value { overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
.one-time-password-modal {
  width: min(620px, calc(100vw - 48px));
}
.checkbox-row {
  align-content: start;
}
.inline-check {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 650;
}
.inline-check input {
  min-width: 0;
  width: 16px;
  height: 16px;
  accent-color: #ff8a00;
}
.brand-binding-panel { align-items: stretch; }
.brand-binding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.brand-binding-grid label { display: grid; gap: 6px; }
.brand-binding-grid label.wide { grid-column: 1 / -1; }
.brand-binding-grid small { color: var(--muted); font-weight: 700; }
.brand-binding-grid textarea { min-height: 78px; resize: vertical; }
.public-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.public-info-card img { width: 100%; max-height: 120px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(16,24,40,.08); background: rgba(248,250,252,.72); }

.toast-root { position: fixed; right: 22px; bottom: 22px; display: grid; gap: 10px; z-index: 40; }
.toast { width: 340px; background: var(--panel-strong); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 20px; box-shadow: var(--shadow-float); padding: 12px 14px; font-size: 13px; }
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--ok); }
@media (max-width: 520px) {
  .toast-root { right: 12px; bottom: calc(62px + env(safe-area-inset-bottom)); left: 12px; }
  .toast { width: 100%; }
}
.hidden { display: none !important; }

.v3-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 508px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0 82px;
  padding: 112px 106px 70px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 29% 20%, rgba(16,24,40,.07) 0 2px, transparent 3px),
    radial-gradient(circle at 36% 63%, rgba(255,138,0,.33) 0 3px, transparent 4px),
    radial-gradient(circle at 63% 47%, rgba(16,24,40,.16) 0 3px, transparent 4px),
    linear-gradient(90deg, rgba(16,24,40,.038) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16,24,40,.032) 1px, transparent 1px),
    linear-gradient(180deg, #fbfcff 0%, #f7f8fb 100%);
  background-size: auto, auto, auto, 102px 102px, 102px 102px, auto;
}
.v3-login::before,
.v3-login::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.v3-login::before {
  width: 100%;
  height: 100%;
  inset: 0;
  opacity: .72;
  background:
    radial-gradient(circle at 31% 12%, rgba(16,24,40,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 51% 22%, rgba(255,138,0,.33) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 45%, rgba(16,24,40,.15) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 77%, rgba(255,138,0,.24) 0 2px, transparent 3px);
}
.v3-login::after {
  width: 432px;
  height: 394px;
  left: 31.5%;
  top: 210px;
  border: 1px solid rgba(16,24,40,.12);
  border-left-color: rgba(255,138,0,.28);
  border-bottom-color: rgba(255,138,0,.22);
  border-radius: 104px;
  box-shadow:
    272px 188px 0 -230px rgba(16,24,40,.12),
    -318px 386px 0 -268px rgba(16,24,40,.12);
}
.login-circuit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.login-circuit::before,
.login-circuit::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 118px;
  opacity: .46;
  background-image: radial-gradient(circle, rgba(16,24,40,.13) 1.7px, transparent 2px);
  background-size: 13px 13px;
}
.login-circuit::before {
  left: 338px;
  top: 120px;
}
.login-circuit::after {
  right: 382px;
  top: 210px;
  height: 150px;
}
.login-circuit svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke-width: 0;
}
.login-circuit .line {
  fill: none;
  stroke: rgba(16,24,40,.11);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.login-circuit .line.orange {
  stroke: rgba(255,138,0,.33);
}
.login-circuit .line.thin {
  stroke-width: 1;
}
.login-circuit .line.dash {
  stroke-dasharray: 6 8;
}
.login-circuit .node {
  fill: rgba(16,24,40,.08);
  stroke: rgba(16,24,40,.18);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.login-circuit .node.orange {
  fill: #ff8a00;
  stroke: rgba(255,138,0,.28);
}
.login-circuit .node.hollow {
  fill: #fff;
  stroke: #ff8a00;
  stroke-width: 1.6;
}
.login-circuit .node.pale {
  fill: #fbfcff;
}
.v3-login-hero {
  grid-column: 1;
  grid-row: 1;
  padding: 0;
  display: grid;
  align-content: start;
  gap: 78px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.v3-login-hero h1 {
  max-width: 690px;
  font-size: 54px;
  line-height: 1.28;
  letter-spacing: 0;
  font-weight: 820;
}
.v3-login-hero h1 span {
  display: block;
  white-space: nowrap;
}
.v3-login-hero p {
  max-width: 590px;
  margin-top: 26px;
  color: #475467;
  line-height: 1.8;
  font-size: 19px;
  font-weight: 420;
}
.v3-login-hero p span {
  display: block;
}
.v3-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.seedos-login-logo { width: min(420px, 42vw); height: 210px; display: block; }
.v3-brand small,
.v3-help span,
.nav a small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.v3-login-card {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-height: 508px;
  margin-top: 24px;
  padding: 64px 48px 62px;
  display: grid;
  align-content: center;
  gap: 34px;
  border: 1px solid rgba(16,24,40,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 34px 76px rgba(16,24,40,.15);
  backdrop-filter: blur(30px) saturate(1.08);
  position: relative;
  z-index: 1;
}
.v3-login-card .primary {
  min-height: 66px;
  width: 100%;
  border-radius: 11px;
  font-size: 22px;
  font-weight: 760;
  background: linear-gradient(180deg, #ff9f2f 0%, #ff6a13 100%);
  box-shadow: 0 18px 28px rgba(255,106,19,.2);
}
.v3-login-card h2 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 650;
  color: #111827;
}
.login-page {
  grid-template-columns: minmax(0, 580px) 422px;
  grid-template-rows: minmax(0, 1fr);
  justify-content: center;
  align-items: center;
  gap: 0 112px;
  padding: 64px 92px;
}
.login-page .v3-login-hero {
  align-content: center;
  gap: 58px;
}
.login-page .v3-login-hero h1 {
  max-width: 540px;
  font-size: 40px;
  line-height: 1.26;
  font-weight: 800;
}
.login-page .v3-login-hero p {
  max-width: 500px;
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.75;
}
.login-page .seedos-login-logo {
  width: 286px;
  height: 142px;
}
.login-page .v3-login-card {
  align-self: center;
  min-height: 410px;
  margin-top: 0;
  padding: 54px 38px 48px;
  gap: 25px;
  border-color: rgba(16,24,40,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 30px 84px rgba(16,24,40,.14);
  backdrop-filter: blur(34px) saturate(1.12);
}
.login-page .v3-login-card h2 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}
.login-page .v3-login-form {
  gap: 21px;
}
.login-page .login-input input {
  height: 54px;
  padding: 0 48px;
  font-size: 14px;
  border-color: rgba(113,139,178,.22);
  background: rgba(230,238,250,.72);
  box-shadow: 0 1px 0 rgba(255,255,255,.88) inset, 0 8px 24px rgba(16,24,40,.035);
}
.login-page .login-field-icon {
  left: 20px;
  width: 18px;
  height: 18px;
}
.login-page .login-eye {
  right: 14px;
  width: 34px;
  height: 34px;
}
.login-page .login-form-actions {
  margin-top: -8px;
}
.login-page .login-text-action {
  font-size: 13px;
}
.login-page .v3-login-card .primary {
  min-height: 55px;
  font-size: 16px;
  border-radius: 9px;
  box-shadow: 0 18px 28px rgba(255,106,19,.22);
}
.password-change-card {
  align-content: start;
}
.password-reset-card {
  align-content: start;
}
.password-change-card .login-card-brand {
  gap: 8px;
}
.password-reset-card .login-card-brand {
  gap: 8px;
}
.password-change-card .login-card-brand p {
  margin: 0;
  color: #667085;
  line-height: 1.65;
  font-size: 14px;
}
.password-reset-card .login-card-brand p {
  margin: 0;
  color: #667085;
  line-height: 1.65;
  font-size: 14px;
}
.password-change-card .secondary {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border-color: rgba(255,138,0,.22);
  background: rgba(255,255,255,.72);
  color: #a94f16;
  font-weight: 700;
}
.password-reset-card .secondary {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border-color: rgba(255,138,0,.22);
  background: rgba(255,255,255,.72);
  color: #a94f16;
  font-weight: 700;
}
.password-change-card .alert {
  border-radius: 14px;
  padding: 12px 14px;
}
.password-reset-card .alert {
  border-radius: 14px;
  padding: 12px 14px;
}
.login-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: -14px;
}
.login-text-action {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #a94f16;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
}
.login-text-action:hover,
.login-text-action:focus-visible {
  color: #ff6a13;
}
.login-card-brand {
  display: grid;
  justify-items: start;
  gap: 0;
}
.login-card-brand .seedos-logo-img {
  width: 82px;
  height: 82px;
}
.v3-login-form {
  gap: 28px;
}
.login-input {
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 520;
}
.login-input > span:not(.login-field-icon):not(.login-eye) {
  display: none;
}
.login-input input {
  width: 100%;
  height: 62px;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(16,24,40,.13);
  background: rgba(255,255,255,.72);
  padding: 0 58px 0 58px;
  color: #111827;
  font-size: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.88) inset, 0 8px 22px rgba(16,24,40,.025);
}
.login-input input:focus {
  outline: 2px solid rgba(255,138,0,.28);
  border-color: rgba(255,138,0,.48);
  background: rgba(255,255,255,.9);
}
.login-input input::placeholder {
  color: #8c94a3;
}
.login-field-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #8b94a5;
  z-index: 1;
  width: 22px;
  height: 22px;
}
.login-icon-svg {
  width: 100%;
  height: 100%;
  display: block;
  color: #8f98a8;
  stroke: currentColor;
}
.login-eye {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  display: grid;
  place-items: center;
  color: #8f98a8;
}
.login-eye .login-icon-svg {
  width: 24px;
  height: 24px;
}
.login-eye.active {
  color: #ff7a1a;
}
.v3-help {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  padding: 14px;
  display: grid;
  gap: 5px;
  line-height: 1.5;
}
.v3-sidebar .nav a {
  height: 52px;
  align-items: center;
  justify-content: flex-start;
}
.v3-sidebar .nav a span {
  font-weight: 680;
}
.shell.no-sidebar {
  margin-left: 0;
  padding-left: 24px;
}
.v3-home-panel {
  min-height: 420px;
  align-content: start;
}
.v3-permission-card {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}
.v3-permission-card h3 {
  font-size: 18px;
  margin: 0;
}
.meta-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.meta-list span {
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.58);
  padding: 12px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.meta-list strong {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.permission-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.permission-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  padding: 5px 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}
.resource-page {
  display: grid;
  gap: 18px;
}
.resource-actions,
.row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.resource-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.resource-toolbar span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  padding: 6px 10px;
}
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d92d20;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 760;
}
.todo-toolbar,
.download-filter-bar,
.work-export-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  padding: 12px;
}
.todo-center-page {
  gap: 16px;
}
.todo-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 2px;
}
.todo-page-head h2 {
  margin: 0;
  color: #20242b;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0;
}
.todo-page-head p {
  margin: 7px 0 0;
  color: #667085;
  font-size: 14px;
}
.todo-pending-total {
  flex: 0 0 auto;
  color: #a84c00;
  font-size: 13px;
  font-weight: 700;
  line-height: 30px;
}
.todo-tabs {
  display: flex;
  gap: 28px;
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid rgba(16,24,40,.1);
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.todo-tabs button {
  min-width: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 8px 2px 10px;
  color: #667085;
  font-size: 14px;
  font-weight: 650;
}
.todo-tabs button.active {
  border-bottom-color: #f97316;
  background: transparent;
  color: #b45309;
}
.todo-toolbar {
  flex-wrap: nowrap;
  align-items: end;
  border-color: rgba(16,24,40,.09);
  background: #fff;
  padding: 10px 12px;
}
.todo-toolbar .todo-search {
  flex: 1 1 320px;
}
.todo-toolbar .todo-search input {
  width: 100%;
}
.todo-toolbar .filter-apply,
.todo-toolbar .todo-filter-clear {
  flex: 0 0 auto;
  height: 36px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  padding: 0 14px;
  color: #475467;
}
.todo-toolbar .filter-apply {
  border-color: #fb923c;
  color: #c2410c;
}
.todo-toolbar input,
.todo-toolbar select {
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  padding: 0 11px;
  color: #344054;
  font-size: 13px;
}
.todo-toolbar label,
.download-filter-bar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.todo-toolbar input,
.todo-toolbar select,
.download-filter-bar input {
  min-width: 160px;
  height: 36px;
}
.todo-layout {
  display: grid;
  grid-template-columns: minmax(460px, 1.08fr) minmax(430px, .92fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.todo-list {
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid rgba(16,24,40,.09);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.todo-row {
  width: 100%;
  min-height: 106px;
  border: 0;
  border-bottom: 1px solid rgba(16,24,40,.08);
  border-radius: 0;
  background: #fff;
  padding: 14px 16px 14px 14px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  text-align: left;
  position: relative;
}
.todo-row:last-child {
  border-bottom: 0;
}
.todo-row.active {
  background: #fff8f1;
}
.todo-row.active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #f97316;
}
.todo-row:hover {
  background: #fafafa;
}
.todo-row.active:hover {
  background: #fff8f1;
}
.todo-index {
  color: #98a2b3;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
}
.todo-row-content {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.todo-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.todo-row-title strong {
  color: #252a32;
  font-size: 15px;
  line-height: 22px;
}
.todo-row-title i {
  flex: 0 0 auto;
  border-radius: 4px;
  background: #f2f4f7;
  padding: 2px 6px;
  color: #667085;
  font-size: 11px;
  font-style: normal;
  line-height: 18px;
}
.todo-row-summary {
  color: #667085;
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.todo-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #98a2b3;
  font-size: 12px;
}
.todo-row-meta em {
  color: #667085;
  font-style: normal;
}
.todo-row time {
  color: var(--muted);
  font-size: 12px;
}
.todo-drawer {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 8px;
  background: #fff;
  padding: 22px;
  position: sticky;
  top: 16px;
  box-shadow: 0 4px 14px rgba(16,24,40,.04);
}
.todo-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(16,24,40,.08);
}
.todo-drawer-head p {
  margin: 0 0 6px;
  color: #667085;
  font-size: 12px;
}
.todo-drawer-head h3 {
  margin: 0;
  color: #252a32;
  font-size: 19px;
  line-height: 1.4;
}
.todo-drawer-summary {
  margin: 18px 0;
  color: #475467;
  font-size: 14px;
  line-height: 1.7;
}
.todo-detail-facts {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(16,24,40,.08);
}
.todo-detail-facts dt,
.todo-detail-facts dd {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(16,24,40,.08);
  font-size: 13px;
  line-height: 20px;
}
.todo-detail-facts dt {
  color: #98a2b3;
}
.todo-detail-facts dd {
  color: #344054;
}
.todo-drawer-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.todo-drawer-action .primary,
.todo-drawer-action button {
  min-width: 132px;
  justify-content: center;
}
.work-export-bar {
  justify-content: space-between;
}
.work-export-bar > div:first-child {
  display: grid;
  gap: 4px;
}
.work-export-bar span {
  color: var(--muted);
  font-size: 13px;
}
.work-overview-table table {
  min-width: 1760px;
}
.xhs-public-metrics.compact {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
}
.xhs-public-metrics.compact strong {
  color: #344054;
  font-size: 13px;
}
.xhs-public-metrics.detail-block {
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
}
.xhs-metrics-error {
  color: #b42318;
}

.published-works-page {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.published-works-page .brand-filter-bar {
  margin: 0;
}
.brand-filter-bar[data-kind="publishedWorks"] {
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 16px 18px;
}
.brand-filter-bar[data-kind="publishedWorks"] .filter-control,
.brand-filter-bar[data-kind="publishedWorks"] .brand-filter-select {
  width: auto;
  min-width: 0;
}
.brand-filter-bar[data-kind="publishedWorks"] .brand-filter-actions {
  flex-wrap: nowrap;
  margin: 0;
}
.brand-filter-bar[data-kind="publishedWorks"] .brand-filter-actions button,
.brand-filter-bar[data-kind="publishedWorks"] .brand-filter-select summary {
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
}
.published-works-stats {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 8px;
  background: rgba(248,250,252,.74);
  color: #667085;
  font-size: 13px;
}
.published-works-stats span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.published-works-stats strong {
  color: #111827;
  font-size: 14px;
}
.published-works-stats i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #98a2b3;
}
.published-works-stats i.danger {
  background: #d92d20;
}
.published-works-table {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.published-works-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.published-works-table col:nth-child(1) { width: 22%; }
.published-works-table col:nth-child(2) { width: 17%; }
.published-works-table col:nth-child(3) { width: 14%; }
.published-works-table col:nth-child(4) { width: 16%; }
.published-works-table col:nth-child(5) { width: 17%; }
.published-works-table col:nth-child(6) { width: 14%; }
.published-works-table th,
.published-works-table td {
  min-width: 0;
  padding: 12px 10px;
  word-break: normal;
  overflow-wrap: normal;
  vertical-align: middle;
}
.published-works-table tbody tr {
  height: 82px;
}
.published-work-title-cell,
.published-work-stack,
.published-work-collection,
.published-work-publication {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.published-work-title-cell > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.published-work-title-cell > span,
.published-work-publication > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.published-work-title-cell .tag,
.published-work-publication .tag,
.published-work-collection .tag {
  min-height: 22px;
  padding: 0 7px;
  font-size: 11px;
  font-style: normal;
}
.published-work-title-cell > a {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: #596a7b;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.published-work-title-cell > a svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.published-work-stack span {
  min-width: 0;
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.published-work-stack b {
  margin-right: 6px;
  color: #98a2b3;
  font-size: 11px;
  font-weight: 600;
}
.published-work-collection time,
.published-work-publication time {
  color: #667085;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.published-work-failure {
  overflow: hidden;
  color: #b42318;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.published-work-metric-empty {
  color: #98a2b3;
}
.published-work-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  white-space: normal;
}
.published-work-actions > button,
.published-work-more > summary {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(17,24,39,.1);
  border-radius: 7px;
  background: #fff;
  color: #344054;
  padding: 0 8px;
  font-size: 12px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.published-work-more {
  position: relative;
}
.published-work-more > summary::-webkit-details-marker {
  display: none;
}
.published-work-more > summary svg {
  width: 13px;
  height: 13px;
}
.published-work-more[open] > summary svg {
  transform: rotate(180deg);
}
.published-work-more > div {
  position: absolute;
  z-index: 14;
  top: calc(100% + 6px);
  right: 0;
  width: 132px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(17,24,39,.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(16,24,40,.14);
}
.published-work-more > div button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #344054;
  text-align: left;
  padding: 0 8px;
  font-size: 12px;
}
.published-work-more > div button:hover {
  background: #f5f7fa;
}

@media (max-width: 1359px) and (min-width: 769px) {
  .brand-filter-bar[data-kind="publishedWorks"] {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
  .brand-filter-bar[data-kind="publishedWorks"] .brand-filter-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
  }
  .published-works-table col:nth-child(1) { width: 21%; }
  .published-works-table col:nth-child(2) { width: 17%; }
  .published-works-table col:nth-child(3) { width: 14%; }
  .published-works-table col:nth-child(4) { width: 17%; }
  .published-works-table col:nth-child(5) { width: 17%; }
  .published-works-table col:nth-child(6) { width: 14%; }
}
.work-export-modal .work-export-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(160px, 220px);
  gap: 10px;
  align-items: center;
}
.work-export-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.work-export-fields fieldset {
  min-width: 0;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.work-export-fields legend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}
.work-export-fields label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
}
@media (max-width: 1320px) {
  .todo-layout {
    grid-template-columns: minmax(430px, 1fr) minmax(390px, .86fr);
  }
  .todo-drawer {
    padding: 18px;
  }
}
@media (max-width: 1080px) {
  .todo-layout {
    grid-template-columns: 1fr;
  }
  .todo-drawer {
    position: static;
  }
}
@media (max-width: 900px) {
  .work-export-fields {
    grid-template-columns: 1fr;
  }
  .work-export-modal .work-export-summary {
    grid-template-columns: 1fr;
  }
  .todo-toolbar input,
  .todo-toolbar select,
  .download-filter-bar input {
    min-width: 0;
    width: 100%;
  }
  .todo-toolbar {
    flex-wrap: wrap;
  }
  .todo-toolbar label,
  .todo-toolbar .todo-search {
    flex: 1 1 100%;
  }
  .todo-page-head {
    align-items: flex-start;
  }
  .todo-row {
    grid-template-columns: 26px minmax(0, 1fr);
  }
  .todo-row > .tag {
    grid-column: 2;
    justify-self: start;
  }
}
.content-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}
.content-filters label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.content-filters select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.84);
  color: var(--ink);
  padding: 0 12px;
}
.inline-form {
  width: min(860px, 100%);
  margin: 0;
}
.resource-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.resource-list-panel,
.resource-layout > *,
.resource-detail,
.resource-subsection,
.project-control-card {
  min-width: 0;
}
.resource-detail,
.resource-subsection,
.project-control-card,
.alert,
.empty,
.state-box,
.resource-table th,
.resource-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.resource-stack {
  display: grid;
  gap: 16px;
}
.resource-stack .resource-table {
  margin-top: 10px;
}
.resource-table {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.7);
}
.resource-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
.resource-table th,
.resource-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}
.resource-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  background: rgba(248,250,252,.82);
}
.resource-table tr:last-child td {
  border-bottom: 0;
}
.tenant-table-row {
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.tenant-table-row:hover td {
  background: rgba(255, 138, 0, .05);
}
.tenant-table-row.selected td {
  background: rgba(255, 138, 0, .09);
  box-shadow: inset 0 1px 0 rgba(255, 138, 0, .16), inset 0 -1px 0 rgba(255, 138, 0, .16);
}
.tenant-table-row.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--primary), inset 0 1px 0 rgba(255, 138, 0, .16), inset 0 -1px 0 rgba(255, 138, 0, .16);
}
.resource-detail,
.resource-subsection {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  padding: 16px;
}
.content-learning-detail {
  max-width: 100%;
  overflow: hidden;
}
.content-learning-detail .state-box,
.resource-page .state-box {
  width: min(460px, 100%);
  max-width: 100%;
}
.content-learning-detail .resource-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.content-learning-detail .resource-subsection {
  padding: 14px;
}
.content-learning-detail .empty.mini .state-box {
  min-height: auto;
}
.resource-detail dl {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px 12px;
  margin: 14px 0;
}
.resource-detail dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}
.resource-detail dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}
.detail-block {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
  font-size: 13px;
}
.launch-detail {
  display: grid;
  gap: 14px;
}
.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.52);
}
.tabbar a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 680;
}
.tabbar a.active {
  color: #c46300;
  background: #fff;
  box-shadow: var(--shadow);
}
.launch-panel,
.project-control-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.66);
  padding: 14px;
}
.copy-card {
  border: 1px solid rgba(255,138,0,.18);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.92));
  box-shadow: 0 16px 36px rgba(255,138,0,.08);
  padding: 20px;
  display: grid;
  gap: 12px;
}
.copy-card.compact {
  padding: 16px;
}
.copy-card p {
  color: var(--muted);
  line-height: 1.7;
}
.copy-meta,
.ai-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.copy-meta span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  color: var(--muted);
  padding: 0 10px;
  font-size: 12px;
}
.ai-result-card h2 {
  font-size: 24px;
}
.ai-result-card.previous-result {
  border-color: rgba(245, 158, 11, .24);
  background: linear-gradient(180deg, rgba(255,251,235,.96), rgba(255,255,255,.9));
}
.ai-generation-failure-card {
  border-color: rgba(220,38,38,.18);
  background: rgba(255, 247, 247, .78);
}
.ai-generation-failure-card h3 {
  color: #b42318;
}
.ai-generation-failure-card small {
  color: #8a94a6;
}
.ai-generation-result-skeleton {
  min-height: 190px;
  align-content: center;
  gap: 18px;
}
.ai-generation-result-skeleton .skeleton {
  display: block;
  height: 14px;
}
.ai-generation-result-skeleton .skeleton.wide { width: 100%; }
.ai-generation-result-skeleton .skeleton.medium { width: 72%; }
.ai-generation-result-skeleton .skeleton.short { width: 42%; }
.ai-generation-progress-sheet {
  position: fixed;
  z-index: 16;
  left: 50%;
  bottom: 72px;
  width: min(calc(100% - 24px), 448px);
  max-height: min(66vh, 520px);
  overflow-y: auto;
  transform: translateX(-50%);
  padding: 18px;
  border: 1px solid rgba(255, 138, 0, .22);
  border-radius: 18px;
  background: rgba(255, 252, 247, .98);
  box-shadow: 0 -8px 30px rgba(55, 36, 18, .14);
  color: #2c3440;
  animation: ai-generation-sheet-in 160ms ease-out;
}
.ai-generation-progress-sheet.success { border-color: rgba(38, 122, 63, .22); }
.ai-generation-progress-sheet.failure { border-color: rgba(180, 35, 24, .2); }
.ai-generation-progress-sheet.collapsed {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 7px 14px;
}
.ai-generation-progress-sheet.collapsed > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 720;
}
.ai-generation-progress-sheet.collapsed span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-generation-progress-sheet.collapsed button,
.ai-generation-sheet-actions button,
.ai-generation-sheet-actions .button-link,
.ai-generation-sheet-head .icon-button {
  min-height: 44px;
}
.ai-generation-sheet-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.ai-generation-sheet-head h3 {
  margin-top: 2px;
  color: #202733;
  font-size: 18px;
  line-height: 1.4;
}
.ai-generation-progress-sheet > p {
  margin-top: 8px;
  color: #657080;
  font-size: 13px;
  line-height: 1.6;
}
.ai-generation-stages {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.ai-generation-stages li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #8a93a1;
  font-size: 13px;
}
.ai-generation-stages i,
.ai-generation-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d7dce3;
}
.ai-generation-stages li.done { color: #4c5969; }
.ai-generation-stages li.done i { background: #5f8f6d; }
.ai-generation-stages li.active { color: #b8500b; font-weight: 720; }
.ai-generation-stages li.active i,
.ai-generation-pulse {
  background: #e56f1f;
  box-shadow: 0 0 0 0 rgba(229, 111, 31, .28);
  animation: ai-generation-pulse 1.6s ease-out infinite;
}
.ai-generation-sheet-note,
.ai-generation-charge-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 24, 39, .08);
  color: #6b7280;
  font-size: 12px;
  line-height: 1.55;
}
.ai-generation-charge-note { color: #267a3f !important; font-weight: 700; }
.ai-generation-sheet-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ai-generation-sheet-actions .button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@keyframes ai-generation-sheet-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes ai-generation-pulse {
  70% { box-shadow: 0 0 0 8px rgba(229, 111, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 111, 31, 0); }
}
.ai-copy {
  color: var(--ink) !important;
  font-size: 16px;
  line-height: 1.85 !important;
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  .ai-generation-progress-sheet,
  .ai-generation-stages li.active i,
  .ai-generation-pulse,
  .ai-generation-result-skeleton .skeleton {
    animation: none !important;
  }
}
.ai-copy-sections {
  display: grid;
  gap: 12px;
}
.ai-copy-section {
  display: grid;
  gap: 8px;
}
.ai-copy-section .section-head {
  margin: 0;
}
.ai-copy-title {
  font-weight: 800;
}
.ai-copy-placeholder {
  border: 1px dashed rgba(220,38,38,.22);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: #b42318;
  padding: 18px;
  font-weight: 800;
}
.ai-copy-placeholder.neutral {
  border-color: rgba(148,163,184,.24);
  color: var(--muted);
}
.current-ai-provider-card .section-head {
  align-items: flex-start;
}
.ai-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ai-status-row {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  padding: 12px 14px;
}
.ai-status-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.ai-status-row strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-config-page .resource-layout {
  align-items: start;
}
.ai-prompt-template-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.ai-prompt-segmented {
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(17, 24, 39, .05);
  overflow: auto;
}
.ai-prompt-segmented button {
  appearance: none;
  border: 0;
  min-height: 28px;
  border-radius: 9px;
  background: transparent;
  color: #6b7280;
  padding: 0 14px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: none;
}
.ai-prompt-segmented button:hover {
  color: #dc6218;
  background: rgba(249, 115, 22, .06);
}
.ai-prompt-segmented button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .18);
}
.ai-prompt-segmented button.active {
  color: #f97316;
  background: #fff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, .08);
}
.ai-prompt-template-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.ai-prompt-template-list-panel,
.ai-prompt-detail-panel {
  min-width: 0;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
}
.ai-prompt-template-list-panel {
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding: 12px;
}
.ai-prompt-scene-list {
  display: grid;
  gap: 8px;
}
.ai-prompt-list-head {
  display: grid;
  gap: 4px;
  padding: 4px 4px 8px;
}
.ai-prompt-list-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 22px;
}
.ai-prompt-list-head span {
  max-width: 100%;
  color: #6b7280;
  font-size: 13px;
  line-height: 19px;
}
.ai-prompt-template-row {
  appearance: none;
  border: 0;
  width: 100%;
  min-height: 84px;
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.ai-prompt-template-row:hover {
  background: rgba(249, 115, 22, .06);
}
.ai-prompt-template-row:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .18);
}
.ai-prompt-template-row.selected {
  background: rgba(249, 115, 22, .10);
}
.ai-prompt-template-row.disabled {
  opacity: .62;
}
.ai-prompt-row-marker {
  width: 3px;
  height: 38px;
  border-radius: 999px;
  background: transparent;
}
.ai-prompt-template-row.selected .ai-prompt-row-marker {
  background: #f97316;
}
.ai-prompt-row-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.ai-prompt-row-main strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-prompt-template-row.selected .ai-prompt-row-main strong {
  color: #dc6218;
}
.ai-prompt-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-prompt-row-tags .tag {
  height: 22px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 650;
}
.ai-prompt-row-main small {
  min-width: 0;
  overflow: hidden;
  color: #6b7280;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-prompt-row-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}
.ai-prompt-row-icon svg {
  width: 16px;
  height: 16px;
}
.ai-prompt-detail-panel {
  width: 100%;
  max-height: calc(100vh - 220px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.ai-prompt-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(17, 24, 39, .08);
}
.ai-prompt-detail-head h3 {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  line-height: 26px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-prompt-detail-head > div {
  min-width: 0;
}
.ai-prompt-detail-head > button {
  min-height: 40px;
  border-radius: 12px;
  flex: 0 0 auto;
}
.ai-prompt-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  color: #6b7280;
  font-size: 12px;
}
.ai-prompt-detail-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
}
.ai-prompt-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 14px;
}
.ai-prompt-form-grid .form-row input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border-radius: 12px;
}
.ai-prompt-form-grid .form-row input[readonly] {
  color: #6b7280;
  background: rgba(244, 246, 249, .82);
}
.brand-ai-scope-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid rgba(255, 201, 165, .72);
  border-radius: 14px;
  background: rgba(255, 250, 246, .72);
}
.brand-ai-scope-bar .form-row {
  flex: 1 1 260px;
  margin: 0;
}
.alert.soft {
  background: rgba(255, 250, 246, .84);
  border-color: rgba(255, 201, 165, .52);
  color: #7c3a15;
}
.ai-prompt-detail-actions {
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid rgba(17, 24, 39, .08);
  background: rgba(255, 255, 255, .78);
}
.ai-provider-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.ai-provider-card dl,
.ai-config-page dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  margin: 0;
}
.ai-provider-card dt,
.ai-config-page dt {
  color: var(--muted);
  font-size: 12px;
}
.ai-provider-card dd,
.ai-config-page dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ai-segment-list {
  display: grid;
  gap: 12px;
}
.ai-segment-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  padding: 14px;
}
.ai-segment-card.locked {
  background: rgba(247,248,250,.76);
}
.ai-segment-card textarea {
  width: 100%;
  min-width: 0;
  min-height: 116px;
  max-height: 220px;
  overflow: auto;
  border-radius: 12px;
}
.ai-segment-card textarea[readonly] {
  color: var(--muted);
  background: rgba(244,246,249,.82);
}
@media (max-width: 960px) {
  .ai-prompt-template-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-prompt-template-list-panel,
  .ai-prompt-detail-panel {
    width: 100%;
    max-height: none;
  }
  .ai-prompt-form-grid {
    grid-template-columns: 1fr;
  }
  .ai-prompt-detail-head {
    flex-direction: column;
  }
  .ai-prompt-detail-head > button,
  .ai-prompt-detail-actions > button {
    width: 100%;
  }
  .ai-prompt-detail-actions {
    justify-content: stretch;
    flex-wrap: wrap;
  }
}
.ai-sensitive-card {
  border-color: rgba(255,138,0,.24);
}
.ai-sensitive-list {
  display: grid;
  gap: 12px;
}
.ai-sensitive-section {
  display: grid;
  gap: 8px;
}
.ai-sensitive-section h4 {
  margin: 0;
  font-size: 14px;
}
.ai-sensitive-item {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  padding: 12px;
}
.ai-sensitive-item span,
.ai-sensitive-item small {
  color: var(--muted);
}
.muted-line {
  color: var(--muted);
  font-size: 13px;
}
.kos-h5-account-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 14px;
}
.kos-h5-account-actions button {
  min-width: 132px;
}
.kos-h5-identity-switch {
  margin-top: 12px;
}
.kos-h5-choice.current {
  background: var(--surface-muted, #f5f5f4);
}
@media (max-width: 420px) {
  .kos-h5-account-actions button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15,23,42,.28);
}
.modal-card {
  width: min(760px, 100%);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel-strong);
  box-shadow: var(--shadow-float);
  padding: 20px;
  display: grid;
  gap: 16px;
}
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.62);
  padding: 8px 10px;
  color: var(--ink);
  font-size: 13px;
}
.check-grid input {
  width: auto;
  min-width: 0;
  height: auto;
}
.readonly-field,
.resource-multi-trigger {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  padding: 0 12px;
  color: var(--ink);
}
.readonly-field {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-weight: 600;
}
.resource-multi-select {
  position: relative;
  min-width: 0;
  height: 44px;
  z-index: 1;
}
.resource-multi-select.open {
  z-index: 45;
}
.resource-multi-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 650;
}
.resource-multi-trigger span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.resource-multi-trigger svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform .18s ease-out;
}
.resource-multi-select.open .resource-multi-trigger svg {
  transform: rotate(180deg);
}
.resource-multi-menu {
  position: fixed;
  z-index: 40;
  top: var(--resource-multi-menu-top, 0);
  left: var(--resource-multi-menu-left, 0);
  width: var(--resource-multi-menu-width, 280px);
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  box-shadow: var(--shadow-float);
  max-height: var(--resource-multi-menu-max-height, 280px);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px) scale(.985);
  transform-origin: top center;
  transition: opacity .14s ease-out, transform .14s ease-out, visibility 0s linear .14s;
}
.resource-multi-select.open .resource-multi-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.resource-multi-search {
  width: 100%;
  min-width: 0;
  height: 38px;
  border-radius: 8px;
}
.resource-multi-options {
  display: grid;
  gap: 6px;
  max-height: min(220px, calc(var(--resource-multi-menu-max-height, 280px) - 58px));
  overflow: auto;
}
.resource-multi-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.resource-multi-options label:hover {
  background: rgba(15,23,42,.04);
}
.resource-multi-options input {
  width: auto;
  min-width: 0;
  height: auto;
}
.resource-multi-options span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  .resource-multi-trigger svg,
  .resource-multi-menu {
    transition: none;
  }
}
.mini .state-box {
  min-height: 160px;
}
.state-box .eyebrow {
  text-transform: none;
}
.studio-entry-block {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.studio-entry-block p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.studio-entry-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.studio-config-grid {
  align-items: stretch;
}
.studio-config-card {
  min-width: 0;
}
.studio-config-card textarea {
  min-height: 86px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.studio-feature-form {
  width: 100%;
  max-width: none;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
}
.check-row.wide {
  grid-column: 1 / -1;
}
.check-row input {
  width: auto;
  height: auto;
  min-width: 0;
}

.nav-group {
  display: grid;
  gap: 6px;
}
.nav-group-toggle {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: #344054;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  text-align: left;
  font-weight: 720;
}
.nav-group-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-group-toggle > span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(102,112,133,.24);
}
.nav-group-toggle .chevron {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform .16s ease;
}
.nav-group.collapsed .chevron {
  transform: rotate(0deg);
}
.nav-group.active .nav-group-toggle {
  background: rgba(255,255,255,.78);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.nav-group.active .nav-group-toggle > span::before {
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(255,138,0,.13);
}
.nav-submenu {
  display: grid;
  gap: 5px;
  padding-left: 13px;
}
.nav-group.collapsed .nav-submenu {
  display: none;
}
.nav-submenu a {
  height: 40px;
  border-radius: 15px;
  padding-left: 16px;
  font-size: 13px;
}
.nav-submenu a::before {
  width: 6px;
  height: 6px;
}

.trend-panel {
  scroll-margin-top: 124px;
}
.trend-panel .section-head {
  align-items: flex-start;
}
.trend-switches {
  min-width: min(440px, 100%);
}
.trend-metric-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.trend-metric-row .segmented {
  max-width: 100%;
  overflow-x: auto;
}
.segmented button {
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 13px;
}
.segmented button.active {
  color: var(--ink);
  background: rgba(255,138,0,.12);
  box-shadow: inset 0 0 0 1px rgba(255,138,0,.18);
}
.trend-project-filter {
  position: relative;
  width: min(360px, 100%);
  justify-self: end;
}
.trend-project-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  padding: 0 42px 0 13px;
  color: var(--ink);
}
.trend-project-clear {
  position: absolute;
  right: 8px;
  top: 7px;
  width: 26px;
  height: 26px;
  min-height: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255,138,0,.1);
  color: #c46300;
}
.trend-project-menu {
  position: absolute;
  z-index: 8;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-float);
  padding: 8px;
  display: none;
}
.trend-project-filter:focus-within .trend-project-menu {
  display: grid;
  gap: 6px;
}
.trend-project-option {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 8px 10px;
  display: grid;
  gap: 2px;
}
.trend-project-option small {
  color: var(--muted);
}
.trend-project-option.active,
.trend-project-option:hover {
  background: rgba(255,138,0,.1);
}

.store-filter-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) repeat(3, minmax(150px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.58);
}
.filter-control {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.filter-control input,
.filter-control select {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: var(--ink);
  padding: 0 12px;
}
.filter-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.brand-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 10px 26px rgba(16,24,40,.05);
}
.brand-filter-bar .filter-control {
  min-width: min(220px, 100%);
}
.brand-filter-bar .brand-search {
  flex: 1 1 240px;
}
.brand-filter-bar input {
  height: 36px;
  border-radius: 12px;
}
.brand-filter-select {
  position: relative;
  flex: 0 1 220px;
}
.brand-filter-select details {
  position: relative;
}
.brand-filter-select summary {
  height: 36px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.84);
  color: var(--ink);
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}
.brand-filter-select summary::-webkit-details-marker {
  display: none;
}
.brand-filter-select summary svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
}
.brand-filter-select details[open] summary,
.brand-filter-bar input:focus {
  outline: 2px solid rgba(255,138,0,.18);
  border-color: rgba(255,138,0,.45);
  background: #fff;
}
.brand-filter-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 0;
  width: min(280px, calc(100vw - 48px));
  max-height: 280px;
  overflow: auto;
  border: 1px solid rgba(255,138,0,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 48px rgba(16,24,40,.14);
  padding: 8px;
}
.filter-menu-search {
  width: 100%;
  height: 34px;
  min-height: 34px;
  margin-bottom: 6px;
  border-radius: 10px;
  font-size: 13px;
}
.filter-option {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 0 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 640;
}
.filter-option span {
  display: grid;
  gap: 2px;
}
.filter-option small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.filter-error {
  color: #b54708;
  font-size: 12px;
  font-weight: 700;
  padding: 0 4px 8px;
}
.link-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.link-actions button,
.link-actions a {
  min-height: 30px;
  border: 1px solid rgba(255,138,0,.22);
  border-radius: 999px;
  background: rgba(255,138,0,.08);
  color: #c46300;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}
.link-actions button:hover,
.link-actions a:hover {
  background: rgba(255,138,0,.13);
}
.filter-option:hover {
  background: rgba(255,138,0,.08);
}
.filter-option input {
  flex: 0 0 auto;
  width: 15px;
  min-width: 15px;
  height: 15px;
  accent-color: var(--brand);
}
.brand-filter-actions {
  margin-left: auto;
}
.brand-filter-actions button {
  min-height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,138,0,.22);
  background: rgba(255,138,0,.08);
  color: #c46300;
  padding: 0 14px;
  font-weight: 750;
}
.brand-filter-actions .filter-apply {
  border-color: rgba(255,138,0,.42);
  background: linear-gradient(180deg, #ff9b26, #ff8200);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255,138,0,.18);
}
.export-filtered {
  min-height: 36px;
  border-radius: 12px;
  border-color: rgba(255,138,0,.28);
  background: rgba(255,138,0,.08);
  color: #c46300;
  box-shadow: 0 8px 18px rgba(255,138,0,.08);
}
.export-filtered:hover {
  background: rgba(255,138,0,.12);
}
.brand-filter-actions .batch-crawl-btn {
  border-color: transparent;
  background: linear-gradient(180deg, #ff9b26, #ff8200);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255,138,0,.18);
}
.batch-crawl-btn svg {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
}
.batch-crawl-btn:hover {
  background: linear-gradient(180deg, #ff9b26, #f57828);
}
.batch-crawl-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,138,0,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 14px 34px rgba(16,24,40,.06);
}
.batch-crawl-progress {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255,138,0,.12);
  appearance: none;
}
.batch-crawl-progress::-webkit-progress-bar {
  border-radius: inherit;
  background: rgba(255,138,0,.12);
}
.batch-crawl-progress::-webkit-progress-value,
.batch-crawl-progress::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8a00, #ffb15c);
  transition: inline-size .24s ease;
}
.batch-crawl-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.batch-crawl-stats span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid rgba(229,229,234,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.batch-crawl-stats b {
  color: var(--ink);
}
.batch-crawl-stats.compact {
  margin-bottom: 10px;
}
.batch-crawl-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.batch-crawl-summary > div,
.batch-crawl-reasons {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid rgba(229,229,234,.9);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.batch-crawl-summary span,
.batch-crawl-reasons span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.batch-crawl-summary strong,
.batch-crawl-reasons strong {
  color: var(--ink);
  font-size: 13px;
}
.batch-crawl-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.batch-crawl-reasons {
  min-height: auto;
}
.batch-crawl-tabs {
  justify-content: flex-start;
  margin: 2px 0 10px;
}
.batch-crawl-tabs button {
  min-height: 34px;
  border: 1px solid rgba(255,138,0,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #7a4a18;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 760;
}
.batch-crawl-tabs button.active {
  border-color: rgba(255,138,0,.38);
  background: rgba(255,138,0,.14);
  color: #c46300;
}
.batch-crawl-modal {
  width: min(760px, calc(100vw - 48px));
}
.batch-crawl-detail-modal {
  width: min(980px, calc(100vw - 48px));
}
.account-summary-filter {
  box-shadow: none;
}
.publishing-account-summary-modal .grid.cols-4 {
  gap: 12px;
}
.manual-note-modal {
  width: min(920px, calc(100vw - 48px));
}
.manual-note-modal textarea {
  min-height: 92px;
  padding-top: 12px;
}

.row-actions button,
.resource-table td > button,
.table-wrap td > button {
  min-height: 34px;
  border-radius: 13px;
  border: 1px solid rgba(255,138,0,.18);
  background: rgba(255,138,0,.08);
  color: #c46300;
  padding: 0 11px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(255,138,0,.06);
}
.row-actions button:hover,
.resource-table td > button:hover,
.table-wrap td > button:hover {
  background: rgba(255,138,0,.14);
  border-color: rgba(255,138,0,.28);
}
.row-actions button:disabled,
.resource-table td > button:disabled,
.table-wrap td > button:disabled {
  color: var(--muted);
  background: rgba(255,255,255,.62);
  border-color: var(--line);
  box-shadow: none;
}

.modal-backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(15,23,42,.32);
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.panel:has(.modal-backdrop) {
  backdrop-filter: none;
}
.modal-card {
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  border-radius: 24px;
  background: rgba(255,255,255,.94);
}
.kos-resource-modal-card {
  align-self: flex-start;
  margin-top: 32px;
}
.modal {
  place-items: center;
}
.modal-panel {
  max-height: calc(100vh - 64px);
  overflow: auto;
}

.brand-sidebar-foot {
  min-height: 52px;
  padding: 12px 14px;
  align-content: center;
}
.brand-sidebar-foot strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.compact-account-chip {
  width: min(360px, 32vw);
  min-height: 50px;
  padding: 7px 14px;
  gap: 4px;
}
.compact-account-chip strong {
  font-size: 13px;
}
.compact-account-chip small {
  font-size: 12px;
}
.v3-sidebar .nav {
  gap: 8px;
  align-content: start;
  justify-content: stretch;
  grid-auto-rows: min-content;
  scrollbar-width: thin;
  scrollbar-color: rgba(152,152,157,.42) transparent;
}
.v3-sidebar .nav a,
.v3-sidebar .nav-group-toggle {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  border-radius: 12px;
  padding: 0 12px;
  line-height: 1;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.v3-sidebar .nav a {
  position: relative;
  color: #6e6e73;
  font-size: 14px;
  font-weight: 700;
}
.v3-sidebar .nav a span {
  font-weight: inherit;
}
.v3-sidebar .nav a:focus-visible,
.v3-sidebar .nav-group-toggle:focus-visible {
  outline: 2px solid rgba(255,138,61,.24);
  outline-offset: 2px;
}
.v3-sidebar .nav a:hover,
.v3-sidebar .nav-group-toggle:hover {
  background: rgba(255,243,234,.72);
  color: var(--ink);
}
.v3-sidebar .nav a::before,
.v3-sidebar .nav-group-toggle > span::before {
  flex: 0 0 3px;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: #ff8a3d;
  box-shadow: none;
  opacity: 0;
}
.v3-sidebar .nav a.active {
  background: #fff3ea;
  color: #dc6218;
  box-shadow: none;
  font-weight: 700;
}
.v3-sidebar .nav a.active::before {
  opacity: 1;
}
.v3-sidebar .nav-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: currentColor;
}
.v3-sidebar .nav-item-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
}
.v3-sidebar .nav-group {
  display: grid;
  gap: 4px;
  margin: 0;
  align-items: start;
}
.v3-sidebar .nav-group.collapsed {
  gap: 0;
}
.v3-sidebar .nav-group.expanded .nav-group-toggle {
  background: rgba(255,243,234,.42);
  color: var(--ink);
  box-shadow: none;
}
.v3-sidebar .nav-group.current-parent.collapsed .nav-group-toggle {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.v3-sidebar .nav-group.current-parent.collapsed .nav-group-toggle > span::before {
  opacity: 1;
  flex-basis: 2px;
  width: 2px;
  height: 16px;
  background: rgba(255,138,61,.55);
}
.v3-sidebar .nav-group.expanded.current-parent .nav-group-toggle > span::before {
  opacity: 0;
}
.v3-sidebar .nav-group-toggle {
  color: #6e6e73;
  font-size: 14px;
  font-weight: 650;
}
.v3-sidebar .nav-group-toggle .chevron {
  flex: 0 0 24px;
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  transition: transform 210ms cubic-bezier(.2, 0, .2, 1);
}
.v3-sidebar .nav-group.expanded .nav-group-toggle .chevron {
  transform: rotate(180deg);
}
.v3-sidebar .nav-submenu {
  display: grid;
  grid-template-rows: 1fr;
  gap: 2px;
  margin-left: 16px;
  padding-left: 0;
  border-left: 1px solid #e5e5ea;
  overflow: hidden;
  max-height: 420px;
  opacity: 1;
  transition: max-height 210ms cubic-bezier(.2, 0, .2, 1), opacity 180ms ease-out, margin-top 210ms cubic-bezier(.2, 0, .2, 1), padding-top 210ms cubic-bezier(.2, 0, .2, 1), padding-bottom 210ms cubic-bezier(.2, 0, .2, 1);
}
.v3-sidebar .nav-group.collapsed .nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
.v3-sidebar .nav-submenu > * {
  min-height: 0;
}
.v3-sidebar .nav-submenu a {
  height: 36px;
  min-height: 36px;
  border-radius: 10px;
  padding: 0 10px 0 28px;
  font-size: 13px;
  font-weight: 600;
}
.v3-sidebar .nav-submenu a.active {
  color: #dc6218;
  background: #fff3ea;
  box-shadow: none;
  font-weight: 700;
}
.v3-sidebar .nav-submenu a::before {
  position: absolute;
  left: 10px;
  top: 50%;
  flex-basis: 0;
  width: 12px;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  opacity: 0;
}
.v3-sidebar .nav-submenu a.active::before {
  opacity: 1;
}

.v3-sidebar.platform-operator-nav .nav {
  padding: 6px 4px 6px 0;
  gap: 8px;
  align-content: start;
  justify-content: stretch;
  grid-auto-rows: min-content;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.v3-sidebar.platform-operator-nav:hover .nav {
  scrollbar-color: rgba(152,152,157,.35) transparent;
}
.v3-sidebar.platform-operator-nav .nav::-webkit-scrollbar {
  width: 4px;
}
.v3-sidebar.platform-operator-nav .nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}
.v3-sidebar.platform-operator-nav:hover .nav::-webkit-scrollbar-thumb {
  background: rgba(152,152,157,.35);
}
.v3-sidebar.platform-operator-nav .nav a,
.v3-sidebar.platform-operator-nav .nav-group-toggle {
  height: 40px;
  min-height: 40px;
  line-height: 20px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
}
.v3-sidebar.platform-operator-nav .nav a {
  border: 1px solid transparent;
  color: #6e6e73;
  font-weight: 650;
}
.v3-sidebar.platform-operator-nav .nav a:hover,
.v3-sidebar.platform-operator-nav .nav-group-toggle:hover {
  background: rgba(255,243,234,.62);
  color: #1d1d1f;
}
.v3-sidebar.platform-operator-nav .nav a.active {
  background: #fff3ea;
  border-color: transparent;
  color: #dc6218;
  box-shadow: none;
  font-weight: 700;
}
.v3-sidebar.platform-operator-nav .nav a[href="/internal/home"].active {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,243,234,.72));
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,201,165,.88);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(255,138,61,.16), inset 0 1px 0 rgba(255,255,255,.72);
  color: #dc6218;
}
.v3-sidebar.platform-operator-nav .nav a[href="/internal/home"].active:hover {
  box-shadow: 0 12px 26px rgba(255,138,61,.18), inset 0 1px 0 rgba(255,255,255,.72);
}
.v3-sidebar.platform-operator-nav .nav a[href="/internal/home"].active:focus-visible {
  outline: none;
  box-shadow: 0 10px 24px rgba(255,138,61,.16), inset 0 1px 0 rgba(255,255,255,.72), 0 0 0 3px rgba(255,138,61,.22);
}
.v3-sidebar.platform-operator-nav .nav a[href="/internal/home"].active::before {
  width: 3px;
  height: 20px;
  background: #ff8a3d;
  opacity: 1;
}
.v3-sidebar.platform-operator-nav .nav-group {
  display: grid;
  gap: 4px;
  margin: 0;
  align-items: start;
}
.v3-sidebar.platform-operator-nav .nav-group-toggle {
  color: #6e6e73;
  font-weight: 650;
}
.v3-sidebar.platform-operator-nav .nav-group-toggle > span::before {
  width: 2px;
  height: 16px;
  background: rgba(255,138,61,.55);
  opacity: 0;
  box-shadow: none;
}
.v3-sidebar.platform-operator-nav .nav-group.expanded .nav-group-toggle {
  background: rgba(255,243,234,.44);
  color: #1d1d1f;
  box-shadow: none;
}
.v3-sidebar.platform-operator-nav .nav-group.current-parent.collapsed .nav-group-toggle {
  background: transparent;
  color: #1d1d1f;
  box-shadow: none;
}
.v3-sidebar.platform-operator-nav .nav-group.current-parent.collapsed .nav-group-toggle > span::before {
  opacity: 1;
}
.v3-sidebar.platform-operator-nav .nav-group.current-parent.expanded .nav-group-toggle {
  background: rgba(255,243,234,.44);
  color: #1d1d1f;
}
.v3-sidebar.platform-operator-nav .nav-group.current-parent.expanded .nav-group-toggle > span::before {
  opacity: 1;
  background: rgba(255,138,61,.45);
}
.v3-sidebar.platform-operator-nav .nav-group-toggle .chevron {
  flex: 0 0 24px;
  width: 16px;
  height: 16px;
}
.v3-sidebar.platform-operator-nav .nav-submenu {
  gap: 2px;
  margin: 4px 0 0 16px;
  padding: 2px 0;
  border-left: 1px solid #e5e5ea;
}
.v3-sidebar.platform-operator-nav .nav-submenu a {
  height: 34px;
  min-height: 34px;
  line-height: 18px;
  border-radius: 10px;
  padding: 0 10px 0 26px;
  font-size: 13px;
  font-weight: 600;
}
.v3-sidebar.platform-operator-nav .nav-submenu a.active {
  background: #fff3ea;
  color: #dc6218;
  border-color: transparent;
  box-shadow: none;
  font-weight: 700;
}
.v3-sidebar.platform-operator-nav .nav-submenu a.active::before {
  width: 12px;
  height: 2px;
  background: #ff8a3d;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .v3-sidebar .nav-submenu,
  .v3-sidebar .nav-group-toggle .chevron {
    transition: none;
  }
}

.trend-panel .section-head {
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}
.shell:has(.trend-panel) {
  width: calc(100vw - 340px);
  max-width: calc(100vw - 340px);
  min-width: 0;
}
.shell:has(.trend-panel) .canvas {
  min-width: 0;
}
.home-dashboard:has(.trend-panel) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.home-dashboard:has(.trend-panel) > * {
  min-width: 0;
}
.canvas > .trend-panel,
.trend-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.trend-panel .section-head > div:first-child {
  flex: 1 1 280px;
  min-width: 0;
}
.trend-switches {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex: 1 1 360px;
  max-width: 100%;
  min-width: 0;
}
.trend-switches .segmented {
  height: 36px;
  padding: 3px;
  border-radius: 12px;
  background: #f5f5f7;
  border: 1px solid rgba(229,229,234,.72);
  box-shadow: none;
}
.trend-switches .segmented button {
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6e6e73;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}
.trend-switches .segmented button:hover {
  color: var(--ink);
  background: rgba(255,255,255,.62);
}
.trend-switches .segmented button.active {
  color: #dc6218;
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 16px rgba(16,24,40,.08), inset 0 0 0 1px rgba(255,138,61,.18);
  font-weight: 760;
}
.trend-metric-row {
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}
.trend-metric-row button {
  height: 32px;
  min-height: 32px;
  border: 1px solid #e5e5ea;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #6e6e73;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}
.trend-metric-row button:hover {
  border-color: rgba(255,138,61,.35);
  color: var(--ink);
  background: rgba(255,243,234,.48);
}
.trend-metric-row button.active {
  border-color: rgba(255,138,61,.72);
  background: #fff3ea;
  color: #dc6218;
  box-shadow: inset 0 0 0 1px rgba(255,138,61,.1);
}
.trend-project-filter {
  width: min(220px, 100%);
  min-width: min(180px, 100%);
}
.trend-project-input {
  height: 36px;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #6e6e73;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.trend-project-input:hover,
.trend-project-filter:focus-within .trend-project-input {
  border-color: rgba(255,138,61,.58);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,138,61,.12);
}
.trend-project-input svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}
.trend-project-input input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  outline: none;
}
.trend-project-input input::placeholder {
  color: #98989d;
  font-weight: 560;
}
.trend-project-input [data-action="trend-project-clear"] {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  border: 0;
  border-radius: 9px;
  background: rgba(255,138,61,.1);
  color: #dc6218;
  display: grid;
  place-items: center;
  padding: 0;
}
.trend-project-input > span {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: #98989d;
}

.shell {
  color: #111827;
}
.shell .topbar,
.shell .panel,
.shell .card,
.shell .resource-detail,
.shell .resource-subsection,
.shell .project-control-card,
.shell .resource-table,
.shell .table-wrap,
.shell .field,
.shell .version-card,
.shell .task-row {
  border-radius: 8px;
  border-color: rgba(17,24,39,.08);
  background: rgba(255,255,255,.76);
  box-shadow: none;
}
.shell .topbar {
  height: 82px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(22px) saturate(1.08);
}
.shell .topbar h1 {
  font-size: 24px;
  line-height: 1.18;
  font-weight: 760;
}
.shell .canvas {
  gap: 16px;
}
.shell .panel {
  padding: 18px;
}
.shell h2 {
  font-size: 19px;
  line-height: 1.28;
  font-weight: 740;
}
.shell h3 {
  font-size: 15px;
  line-height: 1.35;
}
.shell p,
.shell td,
.shell input,
.shell select,
.shell textarea,
.shell button,
.shell .button-link {
  font-size: 14px;
}
.shell .eyebrow,
.shell small,
.shell .muted-line,
.shell .tag,
.shell th,
.shell .resource-detail dt,
.shell .resource-detail dd {
  font-size: 12px;
}
.shell .section-head {
  margin-bottom: 14px;
}
.shell .section-head.compact {
  margin-bottom: 12px;
}
.shell .grid {
  gap: 14px;
}
.shell .metric {
  min-height: 104px;
  padding: 16px;
}
.shell .metric strong {
  font-size: 24px;
}
.shell .metric small,
.home-status-copy small,
.home-quick-links .button-link,
.row-action {
  color: #16845a;
}
.shell .blue {
  background: rgba(91,111,132,.12);
  color: #4b647b;
}
.shell .green {
  background: rgba(34,138,87,.10);
  color: #1f7a50;
}
.shell .amber,
.shell .orange,
.shell .purple {
  background: rgba(91,111,132,.10);
  color: #596a7b;
}
.shell .primary {
  border: 0;
  background: #f57c00;
  color: #fff;
  box-shadow: none;
}
.shell .secondary,
.shell .button-link,
.shell .ghost,
.shell .icon-btn,
.shell .filters input,
.shell .filters select,
.shell .form-row input,
.shell .form-row select,
.shell textarea {
  border-radius: 8px;
  border-color: rgba(17,24,39,.10);
  background: rgba(255,255,255,.84);
  box-shadow: none;
}
.shell .button-link {
  min-height: 36px;
  padding: 0 12px;
}
.shell .resource-table th,
.shell .resource-table td,
.shell th,
.shell td {
  padding: 12px 14px;
  font-size: 13px;
}
.shell th {
  background: rgba(246,248,251,.82);
  color: #667085;
}
.shell .row-actions button,
.shell .resource-table td > button,
.shell .table-wrap td > button {
  min-height: 32px;
  border-radius: 8px;
  border-color: rgba(17,24,39,.10);
  background: rgba(255,255,255,.78);
  color: #374151;
  box-shadow: none;
}
.shell .row-actions button:hover,
.shell .resource-table td > button:hover,
.shell .table-wrap td > button:hover {
  border-color: rgba(22,132,90,.24);
  background: rgba(22,132,90,.06);
  color: #16845a;
}
.shell .tabbar {
  border-radius: 8px;
  background: rgba(246,248,251,.68);
}
.shell .tabbar a,
.shell .segmented button,
.shell .segmented a {
  border-radius: 6px;
}
.home-dashboard {
  gap: 16px;
}
.home-status-panel {
  min-height: 170px;
}
.home-status-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}
.home-status-item {
  min-width: 0;
  min-height: 86px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-right: 1px solid rgba(17,24,39,.08);
}
.home-status-item:last-child {
  border-right: 0;
}
.home-status-item.disabled {
  opacity: .72;
}
.home-status-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #5f6b7a;
}
.home-status-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}
.home-status-icon.success {
  color: #3f6f5a;
}
.home-status-icon.info {
  color: #546f86;
}
.home-status-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.home-status-copy > span {
  color: #667085;
  font-size: 13px;
}
.home-status-copy strong {
  color: #111827;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 760;
}
.home-status-copy small {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.home-quick-panel {
  min-height: 142px;
}
.home-quick-links {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
.home-quick-links .button-link {
  min-width: 0;
  justify-content: space-between;
  border: 0;
  border-right: 1px solid rgba(17,24,39,.08);
  border-radius: 0;
  background: transparent;
  color: #4b5563;
  padding: 0 16px;
}
.home-quick-links .button-link:last-child {
  border-right: 0;
}
.home-quick-links .button-link::after {
  content: "›";
  color: #4b5563;
  font-size: 20px;
  line-height: 1;
}
.trend-panel {
  min-height: 430px;
}
.trend-panel .section-head {
  align-items: flex-start;
}
.trend-body {
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 30px;
  margin-top: 18px;
}
.trend-summary {
  border-radius: 8px;
  background: rgba(255,255,255,.66);
}
.trend-summary strong {
  font-size: 26px;
}
.trend-chart polyline {
  stroke-width: 2.5;
  filter: none;
}
.trend-chart circle {
  stroke-width: 2.5;
}
.trend-metric-row button.active {
  border-color: rgba(245,124,0,.52);
  background: rgba(255,255,255,.94);
  color: #e66d00;
}
.trend-switches .segmented button.active {
  color: #e66d00;
  box-shadow: inset 0 0 0 1px rgba(245,124,0,.16), 0 5px 12px rgba(17,24,39,.06);
}
.trend-project-input [data-action="trend-project-clear"] {
  background: rgba(91,111,132,.10);
  color: #4b647b;
}
.modal-card .section-head .icon-btn {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  background: rgba(245,245,247,.86);
  color: #6e6e73;
  box-shadow: inset 0 0 0 1px rgba(229,229,234,.82);
}
.modal-card .section-head .icon-btn:hover {
  background: #fff3ea;
  color: #dc6218;
  box-shadow: inset 0 0 0 1px rgba(255,138,61,.22);
}
.modal-card .modal-actions {
  align-items: center;
  gap: 10px;
}
.modal-card .modal-actions > button:not(.quota-btn) {
  height: 40px;
  min-height: 40px;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 760;
  border: 1px solid #e5e5ea;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  box-shadow: none;
}
.modal-card .modal-actions > button:not(.quota-btn):hover {
  border-color: rgba(255,138,61,.32);
  background: #fff3ea;
  color: #dc6218;
}
.modal-card .modal-actions > button.primary:not(.quota-btn) {
  min-width: 96px;
  border-color: transparent;
  background: #ff8a3d;
  color: #fff;
  box-shadow: 0 12px 24px rgba(255,138,61,.22);
}
.modal-card .modal-actions > button.primary:not(.quota-btn):hover {
  background: #f57828;
  color: #fff;
}
.modal-card .modal-actions > button.primary:not(.quota-btn):active {
  background: #dc6218;
}
.modal-card .modal-actions > button:disabled {
  cursor: not-allowed;
  opacity: .58;
  box-shadow: none;
}
.route-loading {
  min-height: 420px;
  align-content: start;
}
.detail-modal-backdrop {
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: rgba(17,24,39,.42);
}
.detail-modal-card {
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  overflow: hidden;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(16,24,40,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 28px 80px rgba(16,24,40,.18);
}
.detail-modal-card.wide {
  width: min(920px, calc(100vw - 48px));
}
.detail-modal-head,
.detail-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
}
.detail-modal-head {
  border-bottom: 1px solid var(--line);
}
.detail-modal-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}
.detail-modal-body {
  overflow: auto;
  padding: 18px 22px;
  display: grid;
  gap: 16px;
}
.detail-modal-body .resource-detail,
.detail-modal-body .resource-subsection {
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}
.detail-modal-body .resource-detail {
  padding: 16px;
}
.detail-modal-body .resource-detail > button {
  min-height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,138,0,.22);
  background: rgba(255,138,0,.10);
  color: #c46300;
  font-weight: 720;
  padding: 0 13px;
}
.row-actions button.danger,
.resource-table td > button.danger,
.table-wrap td > button.danger {
  border-color: rgba(217,45,32,.22);
  background: rgba(254,243,242,.92);
  color: #b42318;
  box-shadow: none;
}
.row-actions button.danger:hover,
.resource-table td > button.danger:hover,
.table-wrap td > button.danger:hover {
  border-color: rgba(217,45,32,.36);
  background: rgba(254,228,226,.92);
}

@media (max-width: 900px) {
  body {
    min-width: 0;
  }
  .v3-login {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 28px;
    padding: 42px 18px 30px;
    overflow-y: auto;
  }
  .login-circuit {
    inset: 0;
    opacity: .58;
  }
  .login-circuit::before {
    left: 18px;
    top: 40px;
  }
  .login-circuit::after {
    right: 28px;
    top: 260px;
  }
  .v3-login-hero {
    grid-row: 1;
    min-height: 0;
    padding: 10px 0 0;
    gap: 34px;
  }
  .v3-login-hero h1 {
    font-size: clamp(29px, 8vw, 36px);
    line-height: 1.28;
  }
  .v3-login-hero p {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.75;
  }
  .seedos-login-logo {
    width: 128px;
    height: 128px;
  }
  .login-card-brand .seedos-logo-img {
    width: 72px;
    height: 72px;
  }
  .v3-login-card {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    padding: 30px 22px;
    border-radius: 18px;
  }
  .v3-login-card h2 {
    font-size: 26px;
  }
  .login-input input {
    height: 56px;
  }
  .v3-login-card .primary {
    min-height: 58px;
    font-size: 18px;
  }
  .login-page {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 16px 24px;
    align-items: start;
  }
  .login-page .v3-login-hero {
    gap: 20px;
    padding-top: 0;
  }
  .login-page .v3-login-hero h1 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.24;
  }
  .login-page .v3-login-hero p {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.62;
  }
  .login-page .seedos-login-logo {
    width: 104px;
    height: 104px;
  }
  .login-page .v3-login-card {
    padding: 24px 20px;
    gap: 18px;
    border-radius: 16px;
  }
  .login-page .v3-login-card h2 {
    font-size: 20px;
    line-height: 26px;
  }
  .login-page .v3-login-form {
    gap: 16px;
  }
  .login-page .login-input input {
    height: 48px;
    padding: 0 46px;
    font-size: 14px;
  }
  .login-page .v3-login-card .primary {
    min-height: 50px;
    font-size: 16px;
  }
  .sidebar {
    position: static;
    width: auto;
    margin: 12px;
  }
  .shell {
    margin-left: 0;
    width: 100%;
    padding: 0 12px 32px;
  }
  .topbar {
    position: static;
    height: auto;
    min-height: 84px;
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }
  .top-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-width: 0;
  }
  .account-chip {
    width: 100%;
    min-width: 0;
  }
  .trend-switches {
    justify-items: start;
  }
  .trend-metric-row {
    justify-content: flex-start;
  }
  .trend-project-filter {
    justify-self: stretch;
    width: 100%;
  }
  .trend-body {
    grid-template-columns: 1fr;
  }
  .trend-labels {
    grid-column: 1;
  }
  .cols-3,
  .cols-4,
  .cols-2 {
    grid-template-columns: 1fr;
  }
  .meta-list {
    grid-template-columns: 1fr;
  }
  .resource-layout,
  .content-filters,
  .check-grid,
  .store-filter-bar {
    grid-template-columns: 1fr;
  }
  .panel {
    max-width: 100%;
    overflow: hidden;
  }
  .resource-table table {
    min-width: 620px;
  }
  .filter-actions {
    justify-content: stretch;
  }
  .filter-actions button {
    flex: 1;
  }
  .studio-entry-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .studio-entry-actions .button-link,
  .studio-entry-actions button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .shell {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .panel {
    padding: 14px;
    border-radius: 22px;
  }
  .resource-detail,
  .resource-subsection,
  .project-control-card {
    padding: 12px;
    border-radius: 16px;
  }
  .inline-form {
    width: 100%;
  }
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-head {
    min-width: 0;
  }
  .section-head > div {
    min-width: 0;
  }
  .tag {
    white-space: normal;
    max-width: 100%;
  }
  .top-actions > button {
    flex: 0 1 auto;
  }
  .resource-table table {
    min-width: 560px;
  }
}

@media (min-width: 769px) {
  .shell .brand-filter-bar[data-kind="publishedWorks"] {
    display: grid;
    grid-template-columns: repeat(5, minmax(112px, 1fr)) auto;
    gap: 12px;
    align-items: end;
  }
  .shell .brand-filter-bar[data-kind="publishedWorks"] .filter-control,
  .shell .brand-filter-bar[data-kind="publishedWorks"] .brand-filter-select {
    min-width: 0;
  }
  .shell .published-works-table {
    overflow: visible;
  }
  .shell .published-works-table table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  .shell .published-works-table th,
  .shell .published-works-table td {
    min-width: 0;
    padding: 12px 10px;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 1359px) and (min-width: 769px) {
  .shell .brand-filter-bar[data-kind="publishedWorks"] {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}