:root {
  font-family:
    Inter,
    "Noto Sans SC",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #222a2d;
  background: #f4f5f5;
  font-size: 14px;
  --ink: #171d20;
  --muted: #7b8589;
  --line: #e6e9e8;
  --lime: #d0ed7a;
  --green: #4b6631;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

button,
a,
select {
  touch-action: manipulation;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #93b748;
  outline-offset: 3px;
}

button {
  border: 1px solid #dce0de;
  border-radius: 7px;
  padding: 10px 16px;
  background: white;
  color: var(--ink);
  font-weight: 500;
  transition: background 0.15s;
}

button:hover:not(:disabled) {
  background: #eff2ed;
}

.primary {
  background: var(--lime);
  border-color: var(--lime);
  color: #253019;
}

.primary:hover:not(:disabled) {
  background: #c1df6b;
}

.dark {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}

.dark:hover:not(:disabled) {
  background: #354046;
}

.secondary {
  background: #f7f8f7;
  border-color: #d9dfdc;
  color: #566062;
}

.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.small {
  padding: 7px 11px;
  font-size: 13px;
}

.danger {
  color: #a34332;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid #dfe4e1;
  background: white;
  border-radius: 6px;
  padding: 11px 12px;
  color: var(--ink);
}

textarea {
  resize: vertical;
  line-height: 1.85;
  font-size: 15px;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
}

.sop-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

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

h1 {
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -0.6px;
}

h2 {
  font-size: 18px;
  font-weight: 600;
}

h3 {
  font-size: 15px;
  font-weight: 600;
}

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

.meta {
  font-size: 12px;
  letter-spacing: 0.5px;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.between {
  justify-content: space-between;
}

.wrap {
  flex-wrap: wrap;
}

.grow {
  flex: 1;
}

.gap24 {
  gap: 24px;
}

.mt {
  margin-top: 22px;
}

.mt12 {
  margin-top: 12px;
}

.stack {
  display: grid;
  gap: 18px;
}

.right {
  text-align: right;
}

.boot {
  padding: 80px;
  text-align: center;
}

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

.sidebar {
  background: #171d20;
  color: #a4aeb0;
  position: fixed;
  width: 236px;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  padding: 0 8px 30px;
}

.brand img {
  width: 35px;
  height: 35px;
}

.brand-name {
  font-size: 23px;
  letter-spacing: 3px;
  font-weight: 650;
}

.brand .meta {
  font-size: 10px;
  letter-spacing: 2px;
  margin-top: 4px;
  color: #83908e;
}

.project-switch {
  border: 1px solid #394244;
  border-radius: 7px;
  padding: 13px;
  color: #e6e9e8;
  background: #232b2e;
  display: flex;
  justify-content: space-between;
  margin: 3px 0 30px;
}

.side-label {
  font-size: 11px;
  letter-spacing: 2px;
  padding: 0 12px;
  margin-bottom: 12px;
  color: #647275;
}

.side-item {
  width: 100%;
  text-align: left;
  color: #98a5a6;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  margin: 3px 0;
  font-size: 14px;
}

.side-item:hover:not(:disabled) {
  background: #293235;
}

.side-item.active {
  background: #d0ed7a;
  color: #263219;
}

.side-num {
  font-size: 12px;
  font-family: monospace;
  opacity: 0.6;
}

.side-item small {
  margin-left: auto;
  font-size: 10px;
}

.side-bottom {
  margin-top: auto;
  padding: 24px 8px 0;
  border-top: 1px solid #313a3d;
}

.side-bottom p {
  font-size: 12px;
  line-height: 1.8;
  color: #798889;
}

.main {
  grid-column: 2;
  min-width: 0;
}

.topbar {
  height: 77px;
  background: white;
  border-bottom: 1px solid var(--line);
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.breadcrumb {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #929a9d;
  font-size: 13px;
}

.breadcrumb strong {
  color: #333d40;
  font-weight: 500;
}

.avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8edde;
  color: #586845;
  font-size: 12px;
}

.topnav {
  display: flex;
  gap: 26px;
  background: white;
  border-bottom: 1px solid var(--line);
  padding: 0 36px;
  overflow-x: auto;
}

.topnav a {
  white-space: nowrap;
  padding: 19px 0 16px;
  font-size: 13px;
  color: #848c8f;
  border-bottom: 3px solid transparent;
}

.topnav a.active {
  border-bottom-color: #8ba541;
  color: #263420;
  font-weight: 650;
}

.content {
  padding: 30px 36px 50px;
  max-width: 1680px;
  margin: auto;
}

.eyebrow {
  color: #7f898c;
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 9px;
}

.subtitle {
  color: #818b8e;
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.7;
}

.badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 4px;
  background: #edf0ef;
  color: #7e8988;
}

.badge.ready,
.badge.succeeded,
.badge.published {
  background: #edf4df;
  color: #63763b;
}

.badge.stale,
.badge.draft,
.badge.candidate,
.badge.partial {
  background: #fbf2dd;
  color: #9c7836;
}

.badge.failed {
  background: #fbeae5;
  color: #b76553;
}

.badge.running,
.badge.queued,
.badge.submitted {
  background: #e9effb;
  color: #5d7cad;
}

.notice {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0f3e8;
  border: 1px solid #e0e6d5;
  border-radius: 7px;
  padding: 13px 17px;
  color: #72824f;
  font-size: 13px;
  line-height: 1.65;
  margin: 23px 0;
}

.notice .symbol {
  font-size: 17px;
}

.notice button {
  margin-left: auto;
  color: #647546;
  white-space: nowrap;
}

.notice.error {
  background: #fff0eb;
  color: #a15640;
  border-color: #efdbd2;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.metric {
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  padding: 18px 21px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric strong {
  font-size: 26px;
  font-weight: 600;
  display: block;
  margin-top: 9px;
}

.metric span {
  color: #90998f;
  font-size: 23px;
  font-weight: 300;
}

.metric p {
  font-size: 12px;
  color: #828d8b;
}

.panel {
  border: 1px solid var(--line);
  background: white;
  border-radius: 9px;
  overflow: hidden;
}

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

.panel-body {
  padding: 22px;
}

.style-picker-panel .panel-head p {
  margin: 5px 0 0;
}

.style-gallery {
  display: grid;
  gap: 42px;
  margin: 8px 0 24px;
}

.style-kind {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.style-kind + .style-kind {
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.style-kind-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.style-kind-head h2 {
  margin: 5px 0 0;
  font-size: 24px;
}

.style-kind-head > span {
  color: var(--muted);
  font-size: 12px;
}

.style-family {
  min-width: 0;
}

.style-family-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.style-family-head h3 {
  margin: 0;
  font-size: 15px;
}

.style-family-head span {
  color: var(--muted);
  font-size: 12px;
}

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

.style-card {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  background: #f6f7f6;
  border: 1px solid #e2e5e3;
  border-radius: 12px;
  box-shadow: none;
}

.style-card:hover {
  border-color: #b9c3bc;
  transform: translateY(-1px);
}

.style-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.style-card img,
.style-card-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #ecefed;
}

.style-card-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}

.style-card-label {
  padding: 11px 12px 12px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.style-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  width: 24px;
  height: 24px;
  color: #15230f;
  text-align: center;
  line-height: 24px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 2px 7px #0003;
}

.style-card.selected .style-card-check {
  display: block;
}

.style-picker-footer {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  background: rgb(255 255 255 / 94%);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(24 32 28 / 10%);
  backdrop-filter: blur(12px);
}

.style-picker-footer select {
  min-width: 190px;
}

.preset-style-preview {
  display: block;
  width: 100%;
  max-height: 360px;
  margin-bottom: 16px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

@media (max-width: 920px) {
  .style-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .style-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .style-picker-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .style-picker-footer select,
  .style-picker-footer button {
    width: 100%;
  }
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0;
  gap: 15px;
  flex-wrap: wrap;
}

.workflow-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 22px 0;
  padding: 16px 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.image-model-picker {
  display: grid;
  gap: 6px;
  min-width: min(100%, 340px);
}

.image-model-picker > span {
  font-weight: 700;
  color: var(--ink);
}

.image-model-picker select {
  min-width: min(100%, 340px);
}

.image-model-picker small {
  max-width: 560px;
  color: var(--muted);
}

.model-choice-group {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
}

.model-choice-group .image-model-picker {
  min-width: min(100%, 260px);
}

.action-pair {
  display: inline-flex;
  align-items: stretch;
}

.action-pair button:first-child {
  border-radius: 7px 0 0 7px;
}

.action-pair button:last-child {
  border-radius: 0 7px 7px 0;
  margin-left: -1px;
}

.auto-flow {
  margin-left: 8px;
  background: #edf5d6;
  color: #607636;
}

.tabs {
  display: flex;
  gap: 6px;
  background: #e9edeb;
  padding: 4px;
  border-radius: 7px;
}

.tabs button {
  border: 0;
  background: transparent;
  color: #78827f;
  padding: 8px 17px;
  font-size: 13px;
}

.tabs button.active {
  background: white;
  color: #263321;
  box-shadow: 0 1px 4px #00000009;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
}

.two-even {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.editor {
  border: none;
  border-radius: 0;
  min-height: 360px;
  padding: 26px 28px;
  line-height: 2;
  font-size: 15px;
  outline: none;
  background: #fff;
}

.editor:focus-visible {
  outline: 0;
}

.editor-footer {
  border-top: 1px solid var(--line);
  padding: 13px 22px;
  font-size: 12px;
  color: #97a09c;
}

.empty {
  padding: 58px 24px;
  text-align: center;
  color: #919a97;
}

.empty .empty-icon {
  font-size: 28px;
  color: #a4b583;
  margin-bottom: 18px;
  display: block;
}

.empty h3 {
  color: #54615e;
  margin-bottom: 10px;
}

.empty p {
  font-size: 13px;
  line-height: 1.9;
  max-width: 390px;
  margin: auto auto 20px;
}

.guide-item {
  display: flex;
  gap: 13px;
  padding: 17px 0;
  border-bottom: 1px solid #eef0ef;
}

.guide-item:last-child {
  border-bottom: 0;
}

.guide-item b {
  font-size: 11px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf1e7;
  color: #829467;
  flex: none;
}

.guide-item p {
  font-size: 12px;
  color: #909995;
  line-height: 1.8;
  margin-top: 7px;
}

.list-row {
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.list-row:last-child {
  border: 0;
}

.list-row p {
  font-size: 12px;
  color: #8a9590;
  margin-top: 5px;
}

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

.asset-card {
  padding: 18px;
}

.asset-image {
  height: 160px;
  background: #f0f2ed;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #9ca58f;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}

.asset-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-image > .image-preview-trigger {
  width: 100%;
  height: 100%;
}

.asset-image > .badge {
  position: absolute;
  top: 10px;
  right: 10px;
  pointer-events: none;
}

.asset-image .initial {
  font-size: 44px;
  font-weight: 300;
}

.asset-card p {
  font-size: 13px;
  color: #8c9690;
  line-height: 1.7;
  margin: 12px 0;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

th {
  background: #f7f8f7;
  color: #85908a;
  font-weight: 500;
  white-space: nowrap;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 18px;
  border-bottom: 1px solid var(--line);
  line-height: 1.8;
  min-width: 70px;
  vertical-align: top;
}

td.description {
  min-width: 230px;
}

tr:last-child td {
  border: 0;
}

.package {
  padding: 23px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 15px;
  margin-bottom: 17px;
}

.package-num {
  font-size: 28px;
  font-weight: 300;
  color: #8a9774;
  padding-top: 2px;
}

.binding {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  background: #f2f4ef;
  border: 1px solid #e5e9de;
  border-radius: 5px;
  padding: 7px 10px;
  margin: 7px 5px 7px 0;
}

.binding button {
  padding: 1px 4px;
  border: 0;
  background: transparent;
  font-size: 12px;
}

.prompt-text {
  white-space: pre-wrap;
  line-height: 1.85;
  background: #f8f9f7;
  border: 1px solid #e9ede6;
  padding: 16px;
  border-radius: 6px;
  margin: 14px 0;
  color: #6b776b;
  font-size: 13px;
}

.project-list {
  max-width: 1180px;
  margin: auto;
  padding: 40px 30px;
}

.project-card {
  padding: 25px;
  transition: transform 0.15s;
}

.project-card:hover {
  transform: translateY(-3px);
}

.project-card h2 {
  margin: 18px 0 9px;
}

.project-icon {
  height: 48px;
  width: 48px;
  background: #edf3dc;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 23px;
  color: #79934d;
}

.project-progress {
  display: flex;
  gap: 5px;
  margin: 24px 0 14px;
}

.project-progress i {
  height: 4px;
  flex: 1;
  background: #edf0ed;
  border-radius: 2px;
}

.project-progress i.done {
  background: #abc767;
}

.search {
  max-width: 290px;
}

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.login-art {
  background: #171d20;
  color: white;
  padding: 12vh 9vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login-art .brand {
  padding: 0;
}

.login-art h1 {
  font-size: 48px;
  line-height: 1.5;
  letter-spacing: 2px;
}

.login-art p {
  color: #8f9c9b;
  line-height: 2;
  margin-top: 25px;
}

.login-art .accent {
  color: var(--lime);
}

.login-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-form form {
  max-width: 360px;
  width: 100%;
}

.login-form h1 {
  margin-bottom: 15px;
}

.login-form label {
  margin-top: 32px;
}

.login-form button {
  width: 100%;
  margin-top: 22px;
}

.login-form p {
  font-size: 13px;
  color: #839087;
  line-height: 1.9;
}

.login-steps {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.login-steps span {
  border: 1px solid #46504b;
  border-radius: 4px;
  padding: 9px;
  font-size: 12px;
  color: #b1bcb0;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

fieldset.settings-grid {
  border: 0;
  margin: 0;
  min-inline-size: 0;
}

fieldset.settings-grid:disabled {
  opacity: 0.72;
}

.field {
  margin-bottom: 18px;
}

.field small {
  display: block;
  line-height: 1.7;
  margin-top: 7px;
  color: #8d9790;
}

.video {
  width: 100%;
  max-height: 480px;
  background: #141919;
  border-radius: 8px;
}

.timeline {
  display: flex;
  gap: 5px;
  overflow: auto;
  padding: 22px;
  background: #20282a;
  border-radius: 8px;
  margin-top: 20px;
}

.clip {
  min-width: 110px;
  flex: 1;
  background: #516240;
  color: #d7e2bf;
  padding: 17px;
  border-radius: 4px;
  font-size: 12px;
}

.clip.missing {
  background: #403e39;
  color: #a89881;
}

.footnote {
  font-size: 12px;
  color: #969f99;
  line-height: 1.8;
  margin-top: 18px;
}

.pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  line-height: 1.9;
  color: #5f6b62;
}

dialog {
  width: min(830px, calc(100vw - 32px));
  border: 1px solid #d9e0d7;
  border-radius: 12px;
  padding: 0;
  max-height: 88vh;
  box-shadow: 0 30px 100px #0004;
}

dialog::backdrop {
  background: #18231a88;
  backdrop-filter: blur(3px);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.modal-body {
  padding: 24px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
}

.code {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  max-width: 450px;
  padding: 15px 22px;
  background: #263528;
  color: white;
  border-radius: 8px;
  box-shadow: 0 8px 30px #0002;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

#toast.show {
  opacity: 1;
}

.error-text {
  color: #b6533f;
  font-size: 13px;
  margin-top: 12px;
}

.hide {
  display: none !important;
}

.read-box {
  white-space: pre-wrap;
  max-height: 400px;
  overflow: auto;
  font-size: 14px;
  line-height: 1.9;
}

.grid-preview {
  width: min(400px, 100%);
  border-radius: 6px;
}

.image-preview-trigger {
  position: relative;
  display: inline-grid;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
  vertical-align: top;
  white-space: normal;
}

.image-preview-trigger:hover:not(:disabled) {
  background: transparent;
}

.image-preview-trigger img {
  display: block;
}

.image-preview-hint {
  position: absolute;
  inset: auto 8px 8px auto;
  padding: 5px 8px;
  border-radius: 5px;
  background: #17201dcc;
  color: white;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.15s;
}

.image-preview-trigger:hover .image-preview-hint,
.image-preview-trigger:focus-visible .image-preview-hint {
  opacity: 1;
}

dialog.image-modal {
  width: min(1200px, calc(100vw - 24px));
}

.image-preview-modal {
  display: grid;
  place-items: center;
  min-height: 240px;
  background: #eef0ed;
  border-radius: 8px;
  overflow: hidden;
}

.image-preview-modal img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 190px);
  object-fit: contain;
}

.image-modal .modal-actions a {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
}

.checks {
  display: flex;
  gap: 16px;
  align-items: center;
}

.checks label {
  margin: 0;
  font-size: 12px;
}

.sop-version {
  color: #73855d;
  font-size: 12px;
}

.mobile-brand {
  display: none;
}

@media (min-width: 1600px) {
  .content {
    padding-top: 42px;
  }

  .editor {
    min-height: 440px;
  }
}

@media (max-width: 1150px) {
  .shell {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .sidebar {
    width: 200px;
    padding: 24px 14px;
  }

  .content {
    padding: 26px 22px;
  }

  .topbar,
  .topnav {
    padding-left: 22px;
    padding-right: 22px;
  }

  .topnav {
    gap: 20px;
  }

  .two-col {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .guide-panel {
    display: none;
  }

  .metric {
    padding: 15px;
  }

  .metric span {
    display: none;
  }
}

@media (max-width: 760px) {
  .shell {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .main {
    width: 100%;
  }

  .topbar {
    height: 65px;
    padding: 0 18px;
  }

  .breadcrumb {
    font-size: 12px;
  }

  .topnav {
    padding: 0 18px;
    gap: 22px;
  }

  .content {
    padding: 24px 16px;
  }

  .content > .row.between {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  h1 {
    font-size: 24px;
  }

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

  .metric strong {
    font-size: 23px;
  }

  .two-even,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .asset-grid {
    grid-template-columns: 1fr;
  }

  .notice {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .notice button {
    margin-left: 0;
  }

  .login {
    grid-template-columns: 1fr;
  }

  .login-art {
    padding: 35px 30px;
  }

  .login-art h1 {
    font-size: 30px;
    margin-top: 35px;
  }

  .login-art p,
  .login-steps {
    display: none;
  }

  .login-form {
    padding: 35px 25px;
  }

  .project-list {
    padding: 26px 18px;
  }

  .panel-head {
    padding: 16px;
    flex-wrap: wrap;
  }

  .panel-body {
    padding: 16px;
  }

  .package {
    grid-template-columns: 35px minmax(0, 1fr);
    padding: 17px;
    gap: 9px;
  }

  .package-num {
    font-size: 23px;
  }

  .tabs {
    overflow-x: auto;
    width: 100%;
  }

  .tabs button {
    white-space: nowrap;
    flex: 1;
    padding: 9px;
  }

  .editor {
    padding: 20px;
    min-height: 320px;
  }

  .toolbar .row {
    flex-wrap: wrap;
  }

  .search {
    max-width: 100%;
  }

  .panel-head .row {
    flex-wrap: wrap;
  }
}

button {
  white-space: nowrap;
}

.content > .row.between > .row {
  flex-shrink: 0;
}

.content > .row.between > .row > select {
  width: auto;
  max-width: 250px;
}

.brand .meta {
  font-size: 9px;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.badge.empty {
  padding: 5px 9px;
  text-align: initial;
}

.breadcrumb {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.breadcrumb strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar > .row {
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .breadcrumb {
    gap: 8px;
  }

  .breadcrumb > span:last-child,
  .breadcrumb > span:nth-last-child(2) {
    display: none;
  }

  .breadcrumb a {
    flex-shrink: 0;
  }

  .content > .row.between > .row {
    max-width: 100%;
  }

  .content > .row.between > .row > select {
    max-width: 240px;
  }

  .row.between > .meta {
    line-height: 1.7;
  }

  .settings-grid {
    min-width: 0;
  }

  .panel-head > .meta {
    max-width: 100%;
  }
}

.topbar {
  height: auto;
  min-height: 77px;
  padding-top: 16px;
  padding-bottom: 16px;
  flex-wrap: wrap;
}

.login-form .tabs button {
  margin-top: 0;
}

.login-form label {
  margin-top: 20px;
}

.login-form form {
  max-width: 410px;
}

.login-form .tabs {
  margin-top: 24px;
}

.login-form [data-action="login-mode"].ghost {
  margin-top: 10px;
}

.project-list > .metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .topbar {
    min-height: 65px;
    gap: 10px;
  }

  .topbar > .row {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .topbar .breadcrumb {
    max-width: 100%;
  }

  .project-list > .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-list > .metrics .metric {
    padding: 13px;
  }

  .login-form {
    padding: 28px 22px;
  }

  .project-list .panel-head {
    align-items: flex-start;
  }

  .project-list .panel-head .meta {
    line-height: 1.9;
  }

  .main .topbar {
    padding: 12px 16px;
  }
}

/* Readable production forms and long AI results. */
.panel,
.panel-body,
.panel-head,
.package > div,
.asset-card,
.grow,
.modal-body {
  min-width: 0;
}

.read-text,
.prompt-text,
.read-box {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.85;
}

.detail-fields {
  margin: 16px 0;
}

.detail-fields > div {
  padding: 12px 0;
  border-bottom: 1px solid #e8ece8;
}

.detail-fields dt {
  font-size: 12px;
  color: #738071;
  margin-bottom: 7px;
}

.detail-fields dd {
  margin: 0;
  min-width: 0;
}

.read-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.read-item > div {
  min-width: 0;
  flex: 1;
}

.prompt-block {
  padding: 16px 0;
}

.copyable-prompt {
  margin-top: 12px;
  line-height: 1.8;
  font-family: inherit;
  resize: vertical;
  min-height: 140px;
}

.modal-body textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.modal-body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.panel-head .row,
.toolbar > .row {
  flex-wrap: wrap;
}

.package h2 {
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.package .row.between h2 {
  flex: 1;
  min-width: 0;
}

.asset-card p {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .modal-actions {
    flex-wrap: wrap;
  }

  .modal-actions button {
    flex: 1;
  }

  .read-item {
    flex-wrap: wrap;
  }

  .toolbar {
    gap: 12px;
  }

  .topbar > .row {
    flex-shrink: 1;
  }

  .content > .row.between > .row {
    flex-shrink: 1;
  }

  .package .row {
    flex-wrap: wrap;
  }
}

.binding-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.binding-label {
  width: 62px;
  flex: none;
  color: #8a9490;
  font-size: 12px;
}

.binding-row .binding {
  margin: 5px 0;
}

.audio-binding {
  background: #f1f5fa;
  border-color: #dfe7ef;
}

dialog[open] {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.modal-head,
.modal-actions {
  flex-shrink: 0;
}

.modal-body {
  overflow-y: auto;
  min-height: 0;
}

.package h2 {
  font-size: 16px;
}

.prompt-text {
  max-height: 280px;
  overflow: auto;
}

audio {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 12px 0;
}

.voice-sample {
  min-width: 0;
}

.voice-sample p {
  overflow-wrap: anywhere;
}

.script-flow-nav {
  margin-bottom: 20px;
  padding: 10px 18px;
}
.script-flow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 0;
}
.script-flow-row + .script-flow-row {
  border-top: 1px solid #e4e8e6;
}
.script-flow-row > .meta {
  min-width: 84px;
}
.script-flow-row .tabs {
  display: flex;
  flex-wrap: wrap;
}
.script-flow-steps {
  flex: 1;
}
.script-flow-steps button {
  flex: 1;
  white-space: normal;
  min-width: 130px;
}
.compact-script-flow .script-flow-steps {
  width: 100%;
}
.optimization-progress-card {
  overflow: hidden;
}
.optimization-percent {
  color: var(--accent, #789b21);
  font-size: 32px;
  font-variant-numeric: tabular-nums;
}
.optimization-progress {
  height: 10px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebe6;
}
.optimization-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a9ce45, #789b21);
  transition: width 0.35s ease;
}
.episode-result-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.episode-result-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  text-align: left;
  border-color: #dfe5dd;
  background: #f8faf7;
}
.episode-result-item.active {
  border-color: #9fc13e;
  background: #f2f8e5;
}
.episode-result-item span,
.episode-result-item small {
  color: #778078;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .script-flow-row > .meta {
    width: 100%;
  }
  .script-flow-row .tabs {
    width: 100%;
  }
}
.media-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  max-height: min(62vh, 680px);
  overflow: auto;
}
.media-library-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e0e5df;
  border-radius: 10px;
  background: #fafbf9;
}
.media-library-preview {
  display: grid;
  place-items: center;
  height: 150px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef1ed;
}
.media-library-preview img,
.media-library-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.media-library-preview audio { width: calc(100% - 16px); }
.media-library-item .button,
.media-library-item button { margin-top: auto; text-align: center; }
.preset-health {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #dfe8ce;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fceb, #f3f8ed);
}
.preset-health strong { display: block; margin: 3px 0 7px; font-size: 17px; }

/* 2026 interface system: calmer hierarchy, clearer workflow, denser production data. */
:root {
  --ink: #17211f;
  --muted: #74807d;
  --line: #dfe5e1;
  --line-strong: #cfd8d2;
  --lime: #c8ea69;
  --lime-soft: #edf7d6;
  --green: #365541;
  --green-deep: #182b25;
  --paper: #ffffff;
  --canvas: #f3f6f3;
  --shadow-sm: 0 1px 2px rgba(24, 43, 37, 0.04), 0 8px 24px rgba(24, 43, 37, 0.035);
  --shadow-md: 0 2px 4px rgba(24, 43, 37, 0.05), 0 16px 40px rgba(24, 43, 37, 0.07);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 78% -10%, rgba(200, 234, 105, 0.13), transparent 27rem),
    var(--canvas);
}

.shell { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar {
  width: 248px;
  padding: 27px 18px;
  background: linear-gradient(180deg, #15221f 0%, #111a19 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.brand { padding: 0 10px 25px; }
.brand img { width: 38px; height: 38px; filter: drop-shadow(0 5px 12px rgba(200, 234, 105, 0.16)); }
.project-switch {
  border-color: #33443f;
  border-radius: 11px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}
.side-item {
  min-height: 46px;
  border-radius: 10px;
  padding: 12px 13px;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.side-item:hover:not(:disabled) { transform: translateX(2px); background: rgba(255,255,255,.055); }
.side-item.active {
  color: #1d2b21;
  background: linear-gradient(135deg, #d5f081, #bfdf61);
  box-shadow: 0 8px 22px rgba(166, 202, 75, .18);
}
.side-item.status-ready:not(.active) .stage-dot { color: #bddb6a; }
.side-item.status-stale:not(.active) .stage-dot { color: #e6b56f; }
.stage-dot { font-size: 13px !important; opacity: 1 !important; }
.side-bottom { border-color: #2a3935; }

.topbar {
  min-height: 70px;
  padding: 13px 34px;
  border-color: rgba(207, 216, 210, .8);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
}
.topbar button { background: #f7f9f7; }
.topnav {
  gap: 8px;
  padding: 8px 34px;
  background: rgba(255,255,255,.76);
  border-color: rgba(207,216,210,.8);
}
.topnav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  color: #77827f;
}
.topnav a small { color: #8aa055; }
.topnav a:hover { background: #f1f4f1; color: var(--ink); }
.topnav a.active {
  border: 0;
  color: #223428;
  background: var(--lime-soft);
  box-shadow: inset 0 0 0 1px #dceabf;
}

.content { max-width: 1540px; padding: 28px 34px 56px; }
.stage-header {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 25px 27px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,250,244,.95));
  box-shadow: var(--shadow-sm);
}
.stage-header::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -92px;
  top: -118px;
  border-radius: 50%;
  background: rgba(200, 234, 105, .22);
  pointer-events: none;
}
.stage-header > * { position: relative; z-index: 1; }
.stage-header h1 { font-size: clamp(25px, 2.1vw, 32px); letter-spacing: -.8px; }
.stage-header .subtitle { max-width: 680px; }
.eyebrow { color: #82906f; font-weight: 700; letter-spacing: 2.2px; }

button, .button {
  border-radius: 9px;
  border-color: var(--line-strong);
  padding: 9px 14px;
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(24,43,37,.025);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
button:hover:not(:disabled), .button:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(24,43,37,.07); }
button:active:not(:disabled), .button:active { transform: translateY(0); }
.primary { color: #24351f; background: linear-gradient(180deg, #d3f17c, #c4e666); border-color: #bddc60; }
.dark { background: linear-gradient(180deg, #253a33, #172822); border-color: #172822; }
.danger { border-color: #ead8d2; background: #fffafa; }
.small { padding: 7px 11px; }
.button { display: inline-flex; align-items: center; justify-content: center; background: white; }

input, textarea, select {
  border-color: var(--line-strong);
  border-radius: 9px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: #9ebd55;
  box-shadow: 0 0 0 3px rgba(175, 209, 91, .16);
  outline: none;
}
.panel {
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  background: rgba(255,255,255,.98);
}
.panel-head { padding: 18px 21px; background: linear-gradient(180deg, #fff, #fcfdfc); }
.panel-body { padding: 21px; }
.workflow-toolbar {
  border-radius: 13px;
  padding: 17px 19px;
  box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, #fff, #f8faf5);
}
.toolbar { margin: 19px 0; }
.tabs { padding: 4px; border: 1px solid #e1e6e2; border-radius: 10px; background: #edf1ee; }
.tabs button { border-radius: 7px; }
.tabs button.active { color: #263b2d; box-shadow: 0 2px 8px rgba(24,43,37,.08); }
.badge { border-radius: 999px; padding: 5px 10px; font-weight: 650; }
.notice { border-radius: 11px; }
.metrics { gap: 13px; margin: 20px 0; }
.metric { border-radius: 12px; padding: 17px 19px; box-shadow: var(--shadow-sm); }
.metric strong { letter-spacing: -.7px; }
.asset-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.asset-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.asset-card:hover { transform: translateY(-2px); border-color: #cedbcf; box-shadow: var(--shadow-md); }
.asset-image { height: 205px; border-radius: 10px; background: linear-gradient(145deg, #f3f6f1, #e9eeea); }
.asset-preview-image { object-fit: contain; }
.package { border-left: 3px solid #d0e68b; }
.package-num { color: #829755; }
.table-wrap { scrollbar-color: #bdc7c1 transparent; }
table th { color: #63716d; background: #f6f8f6; font-size: 11px; letter-spacing: .6px; }
table tr:hover td { background: #fbfcfa; }
.list-row { padding: 15px 19px; }
.list-row:hover { background: #fbfcfa; }

.script-flow-nav { padding: 7px; border-radius: 13px; }
.script-flow-steps { background: #edf1ee; }
.script-flow-steps button { min-height: 41px; }
.optimization-progress { height: 8px; }
.optimization-progress i { background: linear-gradient(90deg, #97bb42, #c7e967); }

.media-library { gap: 13px; }
.media-library-item { border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.media-library-preview { height: 172px; border-radius: 9px; }

dialog {
  border: 1px solid rgba(215,223,218,.9);
  border-radius: 17px;
  box-shadow: 0 28px 90px rgba(15, 28, 24, .22);
}
dialog::backdrop { background: rgba(12, 24, 20, .48); backdrop-filter: blur(3px); }
.modal-head, .modal-actions { background: #fbfcfb; }
.modal-head { padding: 19px 22px; }
.modal-body { padding: 21px 22px; }
.modal-actions { padding: 14px 22px; }

@media (max-width: 1150px) {
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar { width: 210px; }
  .content { padding: 24px 22px 48px; }
  .topbar, .topnav { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 760px) {
  .content { padding: 18px 13px 38px; }
  .stage-header { padding: 20px 18px; border-radius: 13px; }
  .topnav { padding: 7px 12px; gap: 5px; }
  .topnav a { padding: 8px 10px; }
  .topnav a small { display: none; }
  .workflow-toolbar { align-items: flex-start; padding: 15px; }
  .workflow-toolbar > .row, .workflow-toolbar > div { width: 100%; }
  .workflow-toolbar > .row button { flex: 1; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-image { height: 220px; }
  dialog { width: calc(100vw - 20px); border-radius: 14px; }
}

/* FrameFlow studio UI: a focused production workspace. */
:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
  --ink: #202124;
  --muted: #71717a;
  --line: #e3e3e7;
  --line-strong: #d2d2d8;
  --lime: #c7f36b;
  --lime-soft: #effbd9;
  --green: #536d27;
  --green-deep: #171719;
  --paper: #ffffff;
  --canvas: #f6f6f7;
  --shadow-sm: 0 1px 2px rgba(16, 16, 20, .035);
  --shadow-md: 0 12px 32px rgba(16, 16, 20, .09);
}

body {
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(155, 205, 62, .34);
  outline-offset: 2px;
}

.shell { grid-template-columns: 238px minmax(0, 1fr); }
.sidebar {
  width: 238px;
  padding: 20px 14px;
  color: #9a9aa2;
  background: #19191b;
  border-right: 1px solid #29292d;
  box-shadow: none;
}
.brand {
  min-height: 50px;
  padding: 7px 10px 18px;
  color: #f5f5f7;
  border-radius: 10px;
}
.brand-link { transition: background .14s ease; }
.brand-link:hover { background: #242427; }
.brand img { width: 34px; height: 34px; filter: none; }
.brand-name { font-size: 20px; font-weight: 720; letter-spacing: .6px; }
.brand .meta { margin-top: 2px; color: #73737c; font-size: 9px; letter-spacing: 1.35px; }
.project-switch {
  margin: 2px 2px 24px;
  padding: 11px 12px;
  color: #d5d5d9;
  background: #222225;
  border: 1px solid #303035;
  border-radius: 9px;
  box-shadow: none;
}
.project-switch:hover { color: #fff; background: #28282c; }
.side-label { margin-bottom: 8px; padding: 0 11px; color: #62626a; font-size: 10px; letter-spacing: 1.45px; }
.side-item {
  min-height: 42px;
  margin: 1px 0;
  padding: 10px 11px;
  gap: 10px;
  color: #9b9ba3;
  border-radius: 8px;
  font-size: 13px;
  transition: color .14s ease, background .14s ease;
}
.side-item:hover:not(:disabled) { color: #efeff1; background: #232326; transform: none; }
.side-item.active { color: #f7f7f8; background: #2a2a2e; box-shadow: inset 3px 0 #b9e95c; }
.side-num { color: #686870; font-size: 10px; }
.side-item.active .side-num { color: #b9e95c; }
.side-item.status-ready:not(.active) .stage-dot { color: #9bca49; }
.side-item.status-stale:not(.active) .stage-dot { color: #e2a650; }
.stage-dot { opacity: 1 !important; }
.side-bottom { border-color: #2b2b2f; }
.side-bottom p { color: #66666f; }

.main { background: var(--canvas); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 58px;
  padding: 9px 28px;
  background: rgba(250, 250, 251, .9);
  border-color: var(--line);
  backdrop-filter: saturate(140%) blur(16px);
}
.topbar button { min-height: 34px; background: transparent; }
.breadcrumb { color: #919198; font-size: 12px; }
.breadcrumb strong { color: #3f3f44; font-weight: 590; }
.topnav { display: none; }
.content { max-width: 1440px; padding: 34px 36px 64px; }
.stage-header {
  overflow: visible;
  margin: 0 0 26px;
  padding: 0 0 22px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.stage-header::after { display: none; }
.stage-header h1 { color: #202124; font-size: clamp(27px, 2vw, 34px); font-weight: 720; letter-spacing: -.85px; }
.stage-header .subtitle { max-width: 720px; margin-top: 7px; color: #77777f; }
.eyebrow { margin-bottom: 8px; color: #8b8b93; font-size: 10px; font-weight: 650; letter-spacing: 1.7px; }

button, .button {
  min-height: 36px;
  padding: 8px 13px;
  color: #333338;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: none;
  font-weight: 610;
  transition: color .13s ease, background .13s ease, border-color .13s ease;
}
button:hover:not(:disabled), .button:hover { color: #171719; background: #f3f3f5; border-color: #bdbdc5; box-shadow: none; transform: none; }
button:active:not(:disabled), .button:active { background: #e9e9ec; transform: none; }
.primary { color: #17200b; background: #c7f36b; border-color: #b6df5c; }
.primary:hover:not(:disabled) { color: #101608; background: #bdec5b; border-color: #aed653; }
.dark { color: #fff; background: #252529; border-color: #252529; }
.dark:hover:not(:disabled) { color: #fff; background: #343439; border-color: #343439; }
.secondary { color: #4c4c52; background: #f1f1f3; border-color: transparent; }
.ghost { color: #6f6f77; background: transparent; border-color: transparent; }
.danger { color: #c6382d; background: #fff; border-color: #efd1ce; }
.small { min-height: 32px; padding: 6px 10px; font-size: 12px; }

input, textarea, select {
  color: #26262a;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(20,20,24,.02);
}
input:focus, textarea:focus, select:focus { border-color: #8eaf4d; box-shadow: 0 0 0 3px rgba(158, 201, 76, .16); outline: none; }
textarea { line-height: 1.75; }

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.panel-head { padding: 16px 19px; background: #fff; }
.panel-body { padding: 19px; }
.workflow-toolbar {
  margin: 16px 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
}
.toolbar { margin: 18px 0; }
.tabs { gap: 2px; padding: 3px; background: #ebebee; border: 0; border-radius: 8px; }
.tabs button { min-height: 33px; padding: 7px 13px; color: #6e6e76; border: 0; border-radius: 6px; }
.tabs button.active { color: #242428; background: #fff; box-shadow: 0 1px 3px rgba(20,20,24,.1); }
.notice { margin: 18px 0; padding: 12px 15px; color: #616168; background: #f2f4ef; border: 1px solid #e0e5d8; border-radius: 9px; }
.notice.error { color: #ad3e35; background: #fff3f1; border-color: #f1d8d4; }
.badge { padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 680; }
.badge.ready, .badge.succeeded, .badge.published { color: #4b762d; background: #edf7e5; }
.badge.stale, .badge.draft, .badge.candidate, .badge.partial { color: #926725; background: #fff4de; }
.badge.failed { color: #b43e35; background: #ffebe9; }
.badge.running, .badge.queued, .badge.submitted { color: #496d9b; background: #eaf2fd; }
.metrics { gap: 12px; margin: 18px 0; }
.metric { padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: none; }
.metric strong { font-size: 24px; }

.package {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  padding: 20px;
  border-left: 1px solid var(--line);
}
.package-num { padding-top: 0; color: #a0a0a7; font-size: 20px; font-weight: 520; }
.binding { margin: 4px 3px 4px 0; padding: 5px 8px; color: #54545b; background: #f5f5f6; border-color: #e6e6e9; border-radius: 6px; }
.binding-label { color: #929299; }
.audio-binding { background: #f1f5fa; border-color: #e0e8f1; }
.prompt-text { max-height: 300px; margin: 13px 0; padding: 15px; color: #505057; background: #f7f7f8; border: 1px solid #ebebed; border-radius: 8px; line-height: 1.75; }
.asset-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.asset-card { transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.asset-card:hover, .project-card:hover { border-color: #cfcfd5; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.asset-image { height: 198px; background: #f1f1f3; border-radius: 8px; }
.project-icon { color: #536d27; background: #edf8d8; }
.project-progress i.done { background: #a8d44f; }
.list-row { padding: 14px 18px; }
.list-row:hover { background: #fafafa; }
table th { padding: 13px 16px; color: #73737b; background: #f6f6f7; font-size: 10px; letter-spacing: .55px; }
table td { padding: 16px; }
table tr:hover td { background: #fbfbfc; }
.editor { background: #fff; }
.media-library-item { background: #fff; border-color: var(--line); border-radius: 10px; box-shadow: none; }
.media-library-preview { background: #f1f1f3; }
.preset-health { background: #f5f8ef; border-color: #e0e8d2; }
.optimization-progress { background: #e8e8eb; }
.optimization-progress i { background: #a8d44f; }

.project-list { max-width: 1180px; padding-top: 46px; }
.project-card { box-shadow: none; }
.login-art { background: #19191b; }
.login-art .accent { color: #c7f36b; }
.login-steps span { color: #b7b7bd; border-color: #3b3b40; }
dialog { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 80px rgba(12,12,15,.22); }
dialog::backdrop { background: rgba(15,15,18,.48); backdrop-filter: blur(5px); }
.modal-head, .modal-actions { background: #f7f7f8; }

@media (max-width: 1150px) {
  .shell { grid-template-columns: 205px minmax(0, 1fr); }
  .sidebar { width: 205px; }
  .content { padding: 28px 24px 54px; }
  .topbar { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 760px) {
  .topnav {
    display: flex;
    gap: 4px;
    padding: 7px 12px;
    background: rgba(250,250,251,.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
  }
  .topnav a { padding: 7px 10px; color: #77777f; border: 0; border-radius: 7px; }
  .topnav a.active { color: #303034; background: #e9e9ec; border: 0; box-shadow: none; }
  .content { padding: 20px 14px 42px; }
  .stage-header { padding-bottom: 18px; }
  .workflow-toolbar { padding: 13px; }
  .package { grid-template-columns: 34px minmax(0, 1fr); padding: 16px; }
  .asset-image { height: 220px; }
}

/* Ruhua — editorial production studio */
:root {
  --ink: #272722;
  --muted: #78776e;
  --line: #e2ded4;
  --lime: #ae3e30;
  --green: #56654d;
  --shadow-sm: 0 2px 8px rgba(47,39,26,.025);
  --shadow-md: 0 12px 30px rgba(47,39,26,.08);
  color: var(--ink);
  background: #f5f2eb;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans SC", "Segoe UI", sans-serif;
}
body { background: #f5f2eb; }
h1, .brand-name, .project-card h2 { letter-spacing: -.035em; }
h1 { font-family: "Noto Serif SC", "Songti SC", STSong, serif; font-weight: 600; }
button, select, input, textarea { border-radius: 6px; }
button { border-color: #ddd7cb; background: #fffcf7; }
button:hover:not(:disabled) { background: #eee9df; }
button.primary, .primary { background: #ae3e30; border-color: #ae3e30; color: #fffaf2; box-shadow: none; }
button.primary:hover:not(:disabled) { background: #923226; border-color: #923226; }
button.dark, .dark { background: #292b27; color: #fffaf2; border-color: #292b27; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #c77762; outline-offset: 3px; }
input:focus, textarea:focus, select:focus { border-color: #b96752; box-shadow: 0 0 0 3px #ae3e3015; }
input, textarea, select { background: #fffdf9; color: #292b27; border-color: #ddd7cb; }
.shell { grid-template-columns: 224px minmax(0,1fr); }
.sidebar { width: 224px; background: #272b27; border: 0; color: #f4efe4; padding: 30px 18px; }
.sidebar .brand-name { color: #fff7eb; font-size: 24px; }
.sidebar .brand .meta { color: #b0b3a5; font-size: 9px; letter-spacing: 1.8px; }
.sidebar .brand img { width: 39px; height: 39px; }
.sidebar .side-label { color: #a4a99c; letter-spacing: 2px; margin-top: 34px; }
.sidebar .side-item { color: #bec2b6; border: 0; border-radius: 5px; margin: 5px 0; padding: 13px 12px; }
.sidebar .side-item.active { color: #fff7e9; background: #ffffff0d; box-shadow: inset 3px 0 #d38669; }
.sidebar .side-item:hover { background: #ffffff0a; color: #fff7e9; }
.sidebar .side-num { color: #9ca594; font-size: 11px; }
.sidebar .side-item.active .side-num { color: #e6a18a; }
.sidebar .project-switch { color: #e6e7db; background: #ffffff08; border-color: #ffffff19; }
.sidebar .side-bottom { color: #a5ac9e; border-color: #ffffff18; }
.topbar { background: #fbf9f3; border-color: var(--line); box-shadow: none; }
.content { max-width: 1560px; padding: 36px 40px 56px; }
.stage-header { border-bottom: 1px solid #dcd6c9; padding-bottom: 24px; margin-bottom: 26px; }
.stage-header h1 { font-size: 34px; }
.eyebrow { color: #9a6551; letter-spacing: 2px; font-size: 10px; }
.subtitle { color: #7b786d; line-height: 1.8; }
.panel, .workflow-toolbar, .metric { background: #fffcf7; border-color: var(--line); border-radius: 8px; box-shadow: none; }
.panel-head { background: #fffcf7; border-color: var(--line); }
.workflow-toolbar { padding: 17px 20px; }
.badge { border-radius: 4px; font-size: 11px; }
.badge.ready, .badge.succeeded, .badge.published { background: #e9eee3; color: #4e6244; }
.tabs { background: #eae5db; border-radius: 6px; }
.tabs button.active { background: #fffcf7; color: #923e30; box-shadow: 0 1px 4px #332b1510; }
.notice { background: #f0eee4; border-color: #dedbcb; color: #666758; }
.notice.error { background: #fff0e9; color: #9f3628; border-color: #efd3c5; }
.project-list { max-width: 1320px; padding: 42px 44px; }
.project-hero { padding: 22px 0 44px; border-bottom: 1px solid #dcd6c9; gap: 24px; }
.project-hero h1 { font-size: clamp(30px, 3.7vw, 49px); line-height: 1.4; margin-top: 14px; }
.project-hero .subtitle { margin-top: 14px; }
.project-card { position: relative; overflow: hidden; padding: 26px; border-radius: 8px; min-height: 250px; border-top: 3px solid #ae3e30; }
.project-card h2 { font-size: 23px; margin: 26px 0 10px; }
.project-icon { width: 44px; height: 44px; color: #aa4635; background: #f1e5d8; font: 25px "Songti SC", serif; border-radius: 3px; }
.project-progress { gap: 5px; }
.project-progress i { background: #e9e4d9; height: 3px; }
.project-progress i.done { background: #737f61; }
.asset-grid { gap: 22px; grid-template-columns: repeat(auto-fill,minmax(275px,1fr)); }
.asset-card { overflow: hidden; border-radius: 8px; }
.asset-image { height: 260px; background: #eae6dc; border-radius: 5px; }
.asset-image img { object-fit: contain; }
.asset-family { color: #9d654c; font-size: 11px; letter-spacing: .5px; margin: 14px 0 7px; }
.asset-card h2 { font-size: 18px; }
.asset-card p { color: #777469; line-height: 1.7; }
.package { grid-template-columns: 45px minmax(0,1fr); padding: 26px; gap: 18px; }
.package-num { color: #ae3e30; font-family: Georgia,serif; font-size: 30px; }
.binding { color: #5b6154; background: #f0eee5; border-color: #e0ddcf; }
.prompt-disclosure { border-top: 1px solid #e7e1d5; border-bottom: 1px solid #e7e1d5; margin: 18px 0; }
.prompt-disclosure summary { padding: 13px 0; color: #595b50; cursor: pointer; font-size: 12px; }
.prompt-disclosure summary span { float: right; color: #8b877c; font-size: 11px; }
.prompt-text { color: #5e5b53; background: #f5f1e8; border-color: #e8e1d4; line-height: 1.9; }
.video, video.video { background: #20231f; border-radius: 8px; }
.editor { background: #fffdf8; line-height: 1.95; }
table th { background: #eeeae0; color: #777365; font-size: 11px; letter-spacing: .3px; }
table td { border-color: #e7e1d5; }
table tr:hover td { background: #f8f4ec; }
.metric strong { color: #393d32; font-family: Georgia,serif; font-size: 30px; }
.optimization-progress { background: #e5dfd2; }
.optimization-progress i { background: #ae3e30; }
.login-art { background: #272b27; position: relative; }
.login-art::after { content: ''; position: absolute; inset: 28px; border: 1px solid #ffffff15; pointer-events: none; }
.login-art h1 { font-size: clamp(38px,4.5vw,68px); line-height: 1.4; }
.login-art .accent { color: #dc987e; }
.login-art p, .login-steps span { color: #b9beb0; }
.login-form { background: #f7f3eb; }
dialog { background: #fffcf7; border-color: #dcd6c9; border-radius: 10px; }
.modal-head, .modal-actions { background: #f5f0e6; }
.preset-health { background: #edf0e5; border-color: #dce0d0; }
@media(max-width:1150px) { .shell { grid-template-columns:200px minmax(0,1fr); } .sidebar { width:200px; } .content { padding:28px 24px; } }
@media(max-width:760px) {
 .shell { display:block; } .sidebar { display:none; }
 .project-list { padding:24px 16px; } .project-hero { padding:12px 0 26px; }
 .content { padding:22px 15px 40px; } .stage-header h1 { font-size:29px; }
 .topnav { background:#f5f0e6; } .topnav a.active { background:#ae3e30; color:#fffaf2; }
 .asset-grid { grid-template-columns:minmax(0,1fr); } .package { padding:18px 14px; gap:10px; grid-template-columns:30px minmax(0,1fr); }
 .package-num { font-size:23px; } .workflow-toolbar { padding:14px; } .login-art::after { inset:14px; }
 .project-hero button { width:100%; } .asset-image { height:280px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.main { background: #f5f2eb; }
.empty-icon { color: #b36d55; }
.sidebar .side-bottom p { color: #a5ac9e; }
.reference-filmstrip { display:flex; gap:12px; overflow-x:auto; padding:14px 0 4px; }
.reference-filmstrip:empty { display:none; }
.reference-frame { flex:0 0 142px; min-width:0; }
.reference-frame .image-preview-trigger { width:142px; height:96px; display:block; background:#e9e3d7; border:1px solid #dcd6c9; border-radius:5px; overflow:hidden; padding:0; }
.reference-thumb { width:100%; height:100%; object-fit:contain; }
.reference-frame > span { display:block; font-size:11px; color:#767265; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.continuity-frame .image-preview-trigger { border:1px dashed #b5523a; }
.continuity-frame > span { color:#b5523a; }

/* ---------- 镜纪创作平台：工作台 ---------- */
.portal-modules {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.portal-module h2 {
  margin: 10px 0 6px;
}
.portal-module.is-muted {
  opacity: 0.62;
}
.portal-wallet {
  padding: 14px 18px;
  min-width: 0;
  max-width: 360px;
}
.portal-wallet strong {
  display: block;
  margin-top: 4px;
}
.portal-recent {
  text-decoration: none;
  color: inherit;
}
.optimization-version-picker { border:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.optimization-version-picker legend { font-size:12px; font-weight:700; color:#666258; margin-bottom:8px; }
.optimization-version-picker label { display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-items:start; padding:14px; border:1px solid #ddd7ca; border-radius:8px; background:#faf7f0; cursor:pointer; }
.optimization-version-picker input { grid-row:1 / span 2; margin-top:3px; accent-color:#a94232; }
.optimization-version-picker strong { font-size:14px; color:#34362f; }
.optimization-version-picker small { display:block; margin-top:5px; color:#777369; line-height:1.55; }
@media(max-width:760px) { .optimization-version-picker { grid-template-columns:1fr; } }

/* Poster-led portal. Business views keep their existing component styles. */
.portal-page{--portal-paper:#f4f3ee;--portal-ink:#242720;--portal-red:#ed4b32;--portal-line:#b9bbb4;min-height:calc(100vh - 40px);background:var(--portal-paper);color:var(--portal-ink);font-family:Inter,"Noto Sans SC","PingFang SC",sans-serif}
.portal-page *{box-sizing:border-box}.portal-header,.portal-page>main,.portal-footer{width:min(1320px,calc(100% - 64px));margin-inline:auto}.portal-header{min-height:104px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:54px;border-bottom:1px solid var(--portal-line)}
.portal-brand{display:inline-flex;align-items:center;gap:13px;width:max-content}.portal-brand>b{font:40px/1 Georgia,serif;color:var(--portal-red)}.portal-brand>span{font-size:21px;font-weight:800;letter-spacing:.02em}.portal-brand small{display:block;margin-top:3px;font:10px/1.1 ui-monospace,monospace;letter-spacing:.15em}.portal-header>p{font-size:11px;line-height:1.7;color:#777a73}.portal-header .row{justify-content:flex-end}.portal-login{padding:9px 15px;border:1px solid var(--portal-ink);font-size:12px;font-weight:700}.portal-login.solid{background:var(--portal-ink);color:#fff}
.portal-hero{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;padding:58px 0 34px}.portal-hero-copy{padding:21px 0 0}.portal-overline,.portal-section-head>div>span{font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.18em;color:var(--portal-red)}.portal-hero-copy h1{font-size:clamp(64px,7vw,106px);line-height:1.05;letter-spacing:-.07em;margin:26px 0 25px;font-weight:800}.portal-hero-copy h1>span{font-family:Georgia,"Noto Serif SC",serif;font-weight:400}.portal-hero-copy h1>em{font-style:normal;color:var(--portal-red)}.portal-hero-copy>p{font-size:16px;line-height:1.9;color:#656961}.portal-hero-copy>a{display:flex;align-items:center;justify-content:space-between;width:205px;margin-top:27px;padding:15px 17px;background:var(--portal-ink);color:#fff;font-size:12px;font-weight:700}.portal-hero-copy>a b{font:11px ui-monospace,monospace;color:#d9ddcf}
.portal-wallet-strip{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:36px;padding-top:18px;border-top:1px solid var(--portal-line);font-size:11px}.portal-wallet-strip span{color:#7a7d75}.portal-wallet-strip strong{font-size:12px}.portal-wallet-strip i{width:24px;height:1px;background:var(--portal-line)}
.portal-hero-art{position:relative;min-height:540px;padding:29px 31px;color:#fff;overflow:hidden;background:linear-gradient(180deg,#06161d26,#061217d1),url('/nav/assets/jingji.webp') 50% 100%/300% 200% no-repeat}.portal-hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 42%,#c4926b1f);pointer-events:none}.portal-hero-meta{position:relative;z-index:1;display:flex;justify-content:space-between;font:10px ui-monospace,monospace;letter-spacing:.14em}.portal-hero-art>strong{position:relative;z-index:1;display:block;margin-top:71px;font:clamp(92px,10vw,148px)/.8 Georgia,serif;letter-spacing:-.07em}.portal-hero-art>strong i{font-weight:400;color:#f5b58e}.portal-hero-art>p{position:absolute;z-index:1;left:31px;bottom:47px;font-family:Georgia,"Noto Serif SC",serif;font-size:18px;line-height:1.7}.portal-hero-art>small{position:absolute;z-index:1;left:31px;bottom:20px;color:#ddd8d0;font-size:10px}
.portal-marquee{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;border-block:1px solid var(--portal-ink);font-size:clamp(18px,2.2vw,32px);font-weight:900;letter-spacing:-.04em}.portal-marquee b{font:30px Georgia,serif;color:var(--portal-red)}
.portal-projects{padding:78px 0 85px}.portal-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding-bottom:22px;border-bottom:1px solid var(--portal-ink)}.portal-section-head h2{font-size:36px;letter-spacing:-.04em;margin-top:13px}.portal-section-head>p,.portal-section-head>a{font-size:12px;color:#73766f}.portal-group-title{display:grid;grid-template-columns:90px 210px 1fr;gap:26px;align-items:baseline;padding:27px 0 18px}.portal-group-title>span{font:11px ui-monospace,monospace;color:var(--portal-red)}.portal-group-title h2{font-size:18px}.portal-group-title p{font-size:12px;color:#73766f;text-align:right}
.portal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:45px 28px}.portal-card-link{display:block;min-width:0}.portal-card{height:100%;display:flex;flex-direction:column}.portal-card-link:focus-visible{outline:3px solid var(--portal-red);outline-offset:6px}.portal-poster{position:relative;height:340px;overflow:hidden;isolation:isolate;transition:transform .28s ease,filter .28s ease}.portal-card-link:hover .portal-poster{transform:translateY(-4px);filter:saturate(1.07)}.portal-poster:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#03141b1a,#071318b8)}.portal-poster-top{display:flex;justify-content:space-between;gap:14px;padding:20px 22px;position:relative;z-index:2;color:inherit;font:10px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.portal-poster-copy{position:absolute;z-index:2;left:25px;right:25px;bottom:28px}.portal-poster-copy>b{display:block;font-size:40px;line-height:1.28;letter-spacing:-.05em}.portal-poster-copy>b span{font-family:Georgia,"Noto Serif SC",serif;font-weight:400}.portal-poster-copy>small{display:block;margin-top:15px;font:10px ui-monospace,monospace;letter-spacing:.14em}.portal-enter{position:absolute;z-index:4;top:14px;right:14px;padding:8px 11px;background:#20251f;color:#fff;font-size:11px;box-shadow:0 3px 18px #0002}.portal-poster-top span:last-child{visibility:hidden}
.poster-library,.poster-studio{color:#fff;background-image:url('/nav/assets/jingji.webp');background-size:300% 200%;background-repeat:no-repeat}.poster-library{background-position:50% 0}.poster-studio{background-position:0 0}.poster-story{color:#fff;background:linear-gradient(135deg,#382c43,#7a545e)}.poster-story:before{content:"03";position:absolute;right:-7px;bottom:-50px;font:220px/1 Georgia,serif;color:#ffffff12}.poster-trends{color:#eafff4;background:#0b382c}.poster-trends:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 37px,#b8ffdc13 38px),repeating-linear-gradient(90deg,transparent 0 59px,#b8ffdc0d 60px),linear-gradient(115deg,#092019,#155b45)}.poster-trends .portal-poster-copy{bottom:54px}.poster-trends .portal-poster-copy i{position:absolute;width:210px;height:210px;border:1px solid #75e8b65c;border-radius:50%;right:-58px;bottom:-103px;box-shadow:inset 0 0 0 33px #0c3b2f,inset 0 0 0 34px #75e8b642,inset 0 0 0 67px #0c3b2f,inset 0 0 0 68px #75e8b633}.poster-japanese{color:#fff4df;background:#eb4a32}.poster-japanese:after{background:linear-gradient(90deg,#fff0 48%,#8f1e0d18)}.poster-japanese .portal-poster-copy{display:flex;justify-content:center;align-items:center;gap:28px;inset:77px 25px 38px}.poster-japanese .portal-poster-copy>b{font:70px/1.1 Georgia,"Noto Serif SC",serif;letter-spacing:.05em;white-space:nowrap}.poster-japanese .portal-poster-copy>small{writing-mode:vertical-rl;margin:0;font:15px/1.6 Georgia,"Noto Serif SC",serif;letter-spacing:.2em}.poster-japanese .portal-poster-copy>em{font-style:normal;border:1px solid #fff4df;padding:5px 7px;font-size:24px;transform:rotate(5deg)}.poster-english{color:#283b59;background:#d8e4f2}.poster-english:after{background:linear-gradient(130deg,#fff3,#6683a315)}.poster-english .portal-poster-copy>b{font:68px/.9 Georgia,serif;letter-spacing:-.05em}.poster-english .portal-poster-copy>b span{color:#5674a3}.poster-arcade{color:#2c3028;background:#f1eb67}.poster-arcade:after{background:none}.poster-arcade .portal-poster-copy{text-align:center;bottom:20px}.poster-arcade .portal-poster-copy>b{font-size:49px;transform:rotate(-3deg)}.poster-arcade .portal-poster-copy>b span{color:var(--portal-red)}.portal-fruit{display:flex;justify-content:center;gap:25px;margin-top:20px}.portal-fruit img{width:68px;height:68px}
.portal-card-body{display:flex;flex-direction:column;flex:1;padding:22px 0 0}.portal-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.portal-title-row h2{font-size:28px;letter-spacing:-.04em}.portal-title-row>span{font:10px ui-monospace,monospace;letter-spacing:.13em;color:#7b7e76}.portal-card-body>h3{font-family:Georgia,"Noto Serif SC",serif;font-size:22px;line-height:1.5;margin-top:14px;font-weight:500}.portal-card-body>p{font-size:13px;line-height:1.9;color:#676a63;margin-top:9px}.portal-features{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:17px;font-size:11px}.portal-features span{padding-bottom:4px;border-bottom:1px solid var(--portal-line)}.portal-card-foot{display:flex;justify-content:space-between;gap:15px;margin-top:auto;padding-top:18px;border-top:1px solid var(--portal-line);font-size:11px}.portal-card-foot>span{color:#7a7d75}.portal-card-foot>strong{color:var(--portal-red)}.portal-grid-play .portal-card-link{grid-column:1/-1}.portal-grid-play .portal-card{display:grid;grid-template-columns:1fr 1fr;gap:30px}.portal-grid-play .portal-card-body{padding-top:0;align-self:center}.portal-grid-play .portal-poster{height:315px}
.portal-recent-section{margin-top:80px;padding-top:28px;border-top:1px solid var(--portal-ink)}.portal-recent-list{display:grid;gap:0}.portal-recent-list>a{display:grid;grid-template-columns:100px 1fr 1fr auto;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid var(--portal-line)}.portal-recent-list span{font:10px ui-monospace,monospace;color:var(--portal-red)}.portal-recent-list small{color:#777a73}.portal-recent-list b{font-size:11px}.portal-recent-list>p{padding:24px 0;color:#777a73}
.portal-footer{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:32px 0;border-top:1px solid var(--portal-ink)}.portal-footer .portal-brand>b{font-size:34px}.portal-footer .portal-brand>span{font-size:17px}.portal-footer p{font-size:10px;line-height:1.7;color:#777a73}.portal-footer>a{font-size:11px}
@media(max-width:900px){.portal-header,.portal-page>main,.portal-footer{width:min(100% - 40px,1320px)}.portal-header{grid-template-columns:1fr auto;gap:20px}.portal-header>p{display:none}.portal-hero{grid-template-columns:1fr;gap:30px;padding-top:35px}.portal-hero-copy{padding:0}.portal-hero-art{min-height:500px}.portal-group-title{grid-template-columns:70px 180px 1fr}.portal-poster{height:310px}.portal-poster-copy>b{font-size:34px}.poster-japanese .portal-poster-copy>b{font-size:56px}.poster-english .portal-poster-copy>b{font-size:58px}}
@media(max-width:680px){.portal-header,.portal-page>main,.portal-footer{width:calc(100% - 30px)}.portal-header{min-height:84px}.portal-brand>span{font-size:18px}.portal-brand>b{font-size:33px}.portal-header .row{gap:5px}.portal-header .meta,.portal-header button.ghost{display:none}.portal-login{padding:8px 10px}.portal-hero{padding-top:26px}.portal-hero-copy h1{font-size:clamp(55px,17vw,77px);margin-block:20px}.portal-hero-copy>p{font-size:14px}.portal-hero-art{min-height:395px;padding:22px}.portal-hero-art>strong{font-size:90px;margin-top:58px}.portal-hero-art>p,.portal-hero-art>small{left:22px}.portal-marquee{font-size:13px;gap:7px}.portal-marquee b{font-size:19px}.portal-projects{padding-top:52px}.portal-section-head{align-items:flex-start}.portal-section-head h2{font-size:28px}.portal-section-head>p{display:none}.portal-group-title{grid-template-columns:55px 1fr;padding-top:30px}.portal-group-title p{grid-column:2;text-align:left;margin-top:-14px}.portal-grid{grid-template-columns:1fr;gap:35px}.portal-poster{height:330px}.portal-grid-play .portal-card{display:block}.portal-grid-play .portal-card-body{padding-top:22px}.portal-grid-play .portal-poster{height:300px}.portal-recent-list>a{grid-template-columns:70px 1fr auto}.portal-recent-list small{grid-column:2/-1}.portal-recent-list b{grid-column:3;grid-row:1}.portal-footer{flex-wrap:wrap}.portal-footer p{order:3;width:100%}.portal-footer>a{margin-left:auto}.portal-poster-copy>b{font-size:36px}.poster-japanese .portal-poster-copy>b{font-size:58px}.poster-japanese .portal-poster-copy{gap:18px}.poster-japanese .portal-poster-copy>small{font-size:13px}.poster-english .portal-poster-copy>b{font-size:59px}.portal-enter{top:12px;right:12px}}
@media(prefers-reduced-motion:reduce){.portal-poster{transition:none}.portal-card-link:hover .portal-poster{transform:none}}

/* Keep every project cover at its authored 3:2 frame; do not stretch the source montage. */
.portal-projects{padding-top:48px}
.portal-poster,.portal-grid-play .portal-poster{width:100%;height:auto;aspect-ratio:3/2}
@media(max-width:900px){.portal-poster{height:auto}}
@media(max-width:680px){.portal-projects{padding-top:35px}.portal-poster,.portal-grid-play .portal-poster{height:auto;aspect-ratio:3/2}}

.group-edit-row{border:1px solid var(--line,#ddd);border-radius:8px;padding:10px 12px}
.group-edit-row.group-edit-first{border-top:3px solid var(--accent,#b7472a);margin-top:8px}
.group-edit-row p{margin:4px 0}
.group-edit-start{display:flex;gap:6px;align-items:center;font-size:12px}
.group-edit-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}
.group-edit-head[hidden]{display:none}
.group-edit-title{flex:1;min-width:180px}
.group-edit-sum.danger{color:#b42318;font-weight:600}
.optimization-overview { border-top: 1px solid #e3ddd0; padding-top: 14px; }
.optimization-overview h3 { font-size: 14px; margin: 0 0 8px; }
.optimization-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 18px; }
.optimization-steps li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #5d594f; }
.resume-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.resume-choice { border: 1px solid #e3ddd0; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.resume-choice.recommended { border-color: #b5523a; background: #fbf3ef; }
.resume-choice small { color: #767265; line-height: 1.5; }
.v3-group { border-top: 1px solid #e3ddd0; padding: 10px 0; }
.v3-group > summary { cursor: pointer; }
.v3-item { border: 1px solid #e3ddd0; border-radius: 6px; padding: 10px 12px; margin-top: 8px; font-size: 13px; line-height: 1.6; }
.v3-item p { margin: 4px 0; }
.v3-choice { display: flex; gap: 12px; }
.v3-choice label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.v3-change { width: 100%; margin-top: 6px; }
.v3-question { display: grid; gap: 4px; margin-top: 8px; font-size: 13px; }
.v3-checks { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }

/* Team review retains natural aspect ratio on desktop and mobile. */
.team-review-image { display:block; max-width:100%; max-height:360px; object-fit:contain; border-radius:12px; margin:16px 0; }
[data-team-form] label { display:block; min-width:0; }
[data-team-form] select, [data-team-form] textarea { max-width:100%; }

.team-page { max-width:1240px; margin:auto; }
.team-page > section { margin:28px 0; }
.team-page .panel { padding:24px; margin:16px 0; }
.team-page h2 { font-size:22px; margin:0 0 12px; }
.team-page h3 { font-size:18px; margin:0 0 8px; }
.team-page p { line-height:1.65; margin:8px 0 16px; }
.team-page form { margin-top:16px; }
.team-page form.row { align-items:end; gap:16px; }
.team-page label { font-size:14px; font-weight:600; margin:0 0 12px; }
.team-page label select, .team-page label textarea { display:block; margin-top:8px; }
.team-page textarea { min-height:88px; width:100%; }
.team-page button[type=submit] { min-height:40px; }
.team-page #team-message:not(:empty) { padding:16px; background:#e5eedb; border-radius:8px; }
@media (max-width:640px) { .team-page .panel { padding:16px; } .team-page form.row > label { width:100%; } }

button.project-card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Admin overview of every episode copy in a 项目包 */
.progress-overview { margin-bottom: 18px; }
.progress-overview .table-scroll { overflow-x: auto; margin-top: 10px; }
.progress-overview table { min-width: 920px; }
.progress-overview td, .progress-overview th { padding: 8px 10px; white-space: nowrap; }