.mono{
  margin-top: 12px;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.status-line{
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-line.is-loading{
  border-color: rgba(63,233,255,.36);
  box-shadow: 0 0 0 1px rgba(63,233,255,.12), 0 0 16px rgba(63,233,255,.10);
}

.status-line.is-success{
  border-color: rgba(74, 222, 128, .42);
  background: rgba(36, 66, 45, .22);
  box-shadow: 0 0 0 1px rgba(74, 222, 128, .14), 0 0 16px rgba(74, 222, 128, .08);
}

.status-line.is-error{
  border-color: rgba(255, 103, 123, .48);
  background: rgba(84, 24, 34, .26);
  box-shadow: 0 0 0 1px rgba(255, 103, 123, .14), 0 0 16px rgba(255, 103, 123, .10);
}

.status-line__main{
  font-weight: 700;
  letter-spacing: 0.01em;
}

.tt-loader-inline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 14px;
}

.tt-loader-inline__text{
  line-height: 1.2;
}

.tt-loader{
  --tt-loader-size: 14px;
  --tt-loader-shift: 14px;
  display: inline-flex;
  align-items: center;
  height: var(--tt-loader-size);
}

.tt-loader__ball{
  width: var(--tt-loader-size);
  height: var(--tt-loader-size);
  border-radius: 50%;
  mix-blend-mode: multiply;
}

.tt-loader__ball--1{
  background-color: #fe2c55;
  box-shadow: 0 0 10px rgba(254, 44, 85, 0.38);
  animation: tt-loader-slide-1 .72s ease-in-out infinite;
}

.tt-loader__ball--2{
  background-color: #01f7ee;
  box-shadow: 0 0 10px rgba(1, 247, 238, 0.38);
  animation: tt-loader-slide-2 .72s ease-in-out infinite;
}

@keyframes tt-loader-slide-1{
  0%, 100%{
    transform: translateX(0);
    z-index: 2;
  }
  50%{
    transform: translateX(var(--tt-loader-shift));
    z-index: 1;
  }
}

@keyframes tt-loader-slide-2{
  0%, 100%{
    transform: translateX(0);
    z-index: 2;
  }
  50%{
    transform: translateX(calc(-1 * var(--tt-loader-shift)));
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce){
  .tt-loader__ball{
    animation: none;
  }
}

.status-line__divider{
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(63,233,255,.24), rgba(255,255,255,.1), rgba(255,34,51,.20));
}

.status-line__detail{
  font-size: 12px;
  opacity: .88;
  word-break: break-all;
}

.status-line__detail--with-action{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.status-line__detail-text{
  min-width: 0;
}

.cd-top-controls{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 170px;
  gap: 14px;
  align-items: end;
  margin-top: 12px;
}

.cd-image-controls{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  margin-top: 8px;
}

.cd-select-shell{
  position: relative;
  margin-top: 6px;
}

.cd-native-select{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.cd-select-trigger{
  margin-top: 0;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(98, 116, 150, .56);
  background: linear-gradient(180deg, rgba(14, 20, 33, .98), rgba(10, 15, 25, .98));
  color: #eaf2ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.cd-select-caret{
  font-size: 12px;
  opacity: .82;
  transition: transform .18s ease;
}

.cd-select-shell.is-open .cd-select-caret{
  transform: rotate(180deg);
}

.cd-select-trigger:hover{
  border-color: rgba(138,180,255,.48);
  box-shadow: 0 0 0 1px rgba(138,180,255,.16), 0 8px 16px rgba(0,0,0,.20);
}

.cd-select-trigger:focus-visible{
  outline: 2px solid rgba(138,180,255,.58);
  outline-offset: 2px;
}

.cd-select-trigger:disabled{
  opacity: .66;
  cursor: not-allowed;
  box-shadow: none;
}

.cd-select-list{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 248px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(138,180,255,.30);
  background: linear-gradient(180deg, rgba(16, 24, 39, .98), rgba(10, 15, 26, .98));
  box-shadow: 0 14px 30px rgba(0,0,0,.42), 0 0 0 1px rgba(63,233,255,.08);
  /* Animated open/close via visibility + opacity + transform */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s linear .14s;
}

.cd-select-shell.is-open .cd-select-list{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s linear 0s;
}

.cd-select-option{
  margin-top: 0;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: #dbe8ff;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  will-change: transform;
}

.cd-select-option:hover{
  border-color: rgba(138,180,255,.42);
  background: rgba(66, 111, 191, .16);
  transform: translateY(-1px);
}

.cd-select-option.is-active{
  border-color: rgba(138,180,255,.56);
  background: linear-gradient(160deg, rgba(59,116,211,.36), rgba(32,169,209,.26));
  color: #eef8ff;
}

.cd-select-option:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}


.cd-methods{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cd-primary-mode-switch{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(138,180,255,.22);
  background: rgba(12, 17, 28, .76);
}

.cd-primary-mode-btn{
  margin-top: 0;
  min-width: 112px;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  color: #bfd0ea;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

.cd-primary-mode-btn:hover{
  border-color: rgba(138,180,255,.40);
  color: #e2edff;
}

.cd-primary-mode-btn.is-active{
  border-color: rgba(138,180,255,.58);
  color: #eef8ff;
  background: linear-gradient(160deg, rgba(55,112,206,.34), rgba(30,140,177,.28));
  box-shadow: 0 0 0 1px rgba(138,180,255,.16);
}

@media (max-width: 700px){
  .cd-primary-mode-switch{
    width: 100%;
  }

  .cd-primary-mode-btn{
    min-width: 0;
    flex: 1 1 0;
  }
}

.cd-method-card{
  border: 1px solid rgba(123, 157, 211, .24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 30, 48, .78), rgba(13, 21, 36, .74));
  overflow: hidden;
}

.cd-method-card.is-active{
  opacity: 1;
  border-color: var(--cd-border-strong);
  box-shadow: 0 0 0 1px rgba(138,180,255,.14), 0 10px 22px rgba(0,0,0,.20);
}

.cd-method-card__head{
  margin-top: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(29, 39, 61, .88), rgba(19, 27, 44, .86));
  color: #eaf2ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cd-method-card__head:hover{
  background: linear-gradient(180deg, rgba(33, 45, 70, .92), rgba(23, 32, 52, .90));
}

.cd-method-card__head.is-active{
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.10);
}

.cd-method-card__title{
  flex: 1 1 auto;
  font-weight: 700;
  letter-spacing: .01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-method-card__badge{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: #e4f1ff;
  border: 1px solid rgba(138,180,255,.42);
  background: rgba(92,138,209,.22);
  white-space: nowrap;
  flex: 0 0 auto;
}

.cd-method-card__body{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cd-generate-mode-switch{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(138,180,255,.24);
  background: rgba(13, 18, 31, .52);
  width: fit-content;
}

.cd-generate-mode-btn{
  margin-top: 0;
  min-width: 92px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: #c4d4f0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

.cd-generate-mode-btn:hover{
  border-color: rgba(63,233,255,.42);
  color: #e7f3ff;
}

.cd-generate-mode-btn.is-active{
  border-color: rgba(138,180,255,.44);
  color: #eef8ff;
  background: linear-gradient(160deg, rgba(59,116,211,.24), rgba(32,169,209,.20));
  box-shadow: 0 0 0 1px rgba(138,180,255,.14);
}

.cd-prompt-group{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cd-prompt-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cd-prompt-head > label{
  margin-top: 0;
}

.cd-prompt-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cd-enhance-btn{
  margin-top: 0;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  color: #d4e0f5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.cd-enhance-btn:hover{
  border-color: rgba(138,180,255,.4);
  box-shadow: 0 0 0 1px rgba(138,180,255,.14);
}

.cd-enhance-btn--accent{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: rgba(138,180,255,.38);
  background: linear-gradient(180deg, rgba(42,72,120,.72), rgba(28,48,88,.68));
  color: #c8dcff;
}
.cd-enhance-btn--accent svg{
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.cd-enhance-btn--accent:hover{
  border-color: rgba(138,180,255,.58);
  background: linear-gradient(180deg, rgba(52,88,148,.80), rgba(36,60,108,.76));
  box-shadow: 0 0 0 1px rgba(138,180,255,.18), 0 4px 12px rgba(80,140,255,.14);
  color: #e0eeff;
}

.cd-enhance-btn.is-busy,
.cd-enhance-btn:disabled{
  opacity: .78;
  cursor: not-allowed;
}

.cd-enhance-btn--link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-color: rgba(138,180,255,.24);
  color: #c9dbfb;
}

.cd-enhance-btn--link:hover{
  color: #ecf6ff;
}

.cd-prompt-history-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  padding: 0;
}
.cd-prompt-history-btn svg{
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.enhance-preview{
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(138,180,255,.26);
  background: linear-gradient(180deg, rgba(21, 29, 46, .62), rgba(15, 21, 34, .56));
  box-shadow: inset 0 0 0 1px rgba(138,180,255,.08);
}

.enhance-preview__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.enhance-preview__title{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #dbe8ff;
}

.enhance-preview__actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.enhance-preview__btn{
  margin-top: 0;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  color: #d5e4fb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
}

.enhance-preview__btn:hover{
  border-color: rgba(138,180,255,.42);
}

.enhance-preview__btn.is-primary{
  border-color: rgba(138,180,255,.42);
  background: linear-gradient(160deg, rgba(59,116,211,.28), rgba(32,169,209,.24));
  color: #eef8ff;
}

.enhance-preview__btn.is-neutral{
  border-color: rgba(138,180,255,.24);
  color: #c6d4ec;
}

.enhance-preview__btn:disabled{
  opacity: .65;
  cursor: not-allowed;
}

.enhance-preview__grid{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.enhance-preview__col{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.enhance-preview__label{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #a8b8d5;
}

.enhance-preview__text{
  margin: 0;
  min-height: 78px;
  max-height: 170px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(9, 14, 24, .78);
  color: #e6efff;
  font-size: 11px;
  line-height: 1.38;
  white-space: pre-wrap;
  overflow-y: auto;
  word-break: break-word;
}

@media (max-width: 900px){
  .enhance-preview__grid{
    grid-template-columns: 1fr;
  }
}

.source-upload-ui{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.source-file-input{
  display: none;
}

.source-dropzone{
  margin-top: 0;
  width: 100%;
  min-height: 150px;
  padding: 18px 16px;
  border-radius: 12px;
  border: 1px dashed rgba(138,180,255,.42);
  background: linear-gradient(180deg, rgba(20, 28, 44, .65), rgba(14, 19, 31, .45));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(63,233,255,.05);
}

.source-dropzone:hover{
  border-color: rgba(63,233,255,.62);
  box-shadow: inset 0 0 0 1px rgba(63,233,255,.14), 0 0 14px rgba(63,233,255,.12);
}

.source-dropzone.is-dragover{
  border-style: solid;
  border-color: rgba(63,233,255,.8);
  background: linear-gradient(180deg, rgba(24, 37, 57, .78), rgba(15, 24, 39, .58));
}

.source-dropzone.has-file{
  min-height: 118px;
}

.source-dropzone__icon{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(138,180,255,.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #dbe8ff;
  font-size: 18px;
  line-height: 1;
  background: rgba(255,255,255,.03);
}

.source-dropzone__title{
  font-size: 14px;
  font-weight: 700;
  color: #ecf4ff;
}

.source-dropzone__hint{
  font-size: 12px;
  color: #9eabc3;
}

.source-file-meta{
  margin-top: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-file-meta__name{
  min-width: 0;
  flex: 1;
  font-size: 12px;
  color: #dce8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-file-meta__size{
  flex: 0 0 auto;
  font-size: 11px;
  color: #c5d3ef;
  border: 1px solid rgba(138,180,255,.3);
  border-radius: 999px;
  padding: 2px 7px;
}

.source-file-meta__clear{
  margin-top: 0;
  flex: 0 0 auto;
  border: 0;
  padding: 2px 4px;
  background: transparent;
  color: #ffb6c5;
  font-size: 12px;
  font-weight: 600;
}

.source-file-meta__clear:hover{
  color: #ffd0da;
  text-decoration: underline;
}

.source-guideline{
  margin-top: 2px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: #aebad2;
}

.source-guideline input{
  margin-top: 2px;
}

.cd-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "status";
  column-gap: 18px;
  row-gap: 14px;
  align-items: start;
}

.cd-status-col{
  grid-area: status;
  min-width: 0;
}

.cd-top-item label{
  margin-top: 0;
}

.cd-tiktok-hint{
  margin-top: 8px;
  display: block;
  opacity: .78;
  font-size: 12px;
  line-height: 1.35;
}

.cd-core-tool{
  padding: 14px 14px 16px 14px;
}

.cd-core-tool > h2{
  margin: 0 0 10px 0;
}

.cd-core-tool .cd-top-controls{
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 14px;
  margin-top: 0;
}

.cd-core-tool .cd-top-item label{
  margin-top: 0;
}

.cd-core-tool .cd-input-shell{
  height: 170px;
  min-height: 170px;
  max-height: 170px;
  border-radius: 10px;
  background: #101c2e;
  border: 1px solid rgba(110, 140, 190, .60);
}

.cd-core-tool .cd-generate-row{
  margin-top: 18px;
  margin-bottom: 6px;
}

.cd-core-tool .cd-generate-row .cd-mode-primary-hint{
  opacity: .88;
}

@media (max-width: 760px){
  .cd-core-tool .cd-top-controls{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cd-core-tool .cd-input-shell{
    height: 156px;
    min-height: 156px;
    max-height: 156px;
  }
}

.actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.actions a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(138,180,255,.45);
  background: linear-gradient(145deg, rgba(63,233,255,.10), rgba(92,138,209,.20));
  color: #dbe8ff;
  text-decoration: none;
  font-weight: 600;
}
.actions a:hover{
  box-shadow: 0 0 0 1px rgba(138,180,255,.38), 0 0 18px rgba(63,233,255,.16);
}

.actions .cd-btn{
  position: relative;
  width: 125px;
  height: 45px;
  margin-top: 0;
  border: 0;
  border-radius: 20px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: #f1f1f1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(
    160deg,
    rgba(47,93,197,1) 0%,
    rgba(46,86,194,1) 5%,
    rgba(47,93,197,1) 11%,
    rgba(59,190,230,1) 57%,
    rgba(0,212,255,1) 71%
  );
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 1px 1px 0 rgba(107, 221, 215, 0.37);
  filter: drop-shadow(0 0 10px rgba(59, 190, 230, 0.45));
  transition: width .25s ease, height .25s ease, border-radius .25s ease, transform .15s ease;
}

.actions .cd-btn:active{
  transform: translateY(1px) scale(0.99);
}

.actions .cd-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}

.actions .cd-btn__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.actions .cd-ico{
  display: none;
  color: #f1f1f1;
}

.actions .cd-btn:hover{
  width: 50px;
  height: 50px;
  border-radius: 999px;
}

.actions .cd-btn:hover .cd-btn__text{
  display: none;
}

.actions .cd-btn:hover .cd-ico{
  display: block;
}

.actions .cd-btn:hover::before{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 3.5px solid transparent;
  border-top-color: #fff;
  border-right-color: #fff;
  animation: cdSpin 1.6s linear infinite;
  pointer-events: none;
}

@keyframes cdSpin{
  to{
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .actions .cd-btn,
  .actions .cd-btn:hover::before{
    animation: none !important;
    transition: none !important;
  }
}

/* Core /app action buttons: keep them compact and stable (no morph hover). */
body.page-app .cd-core-tool .actions .cd-btn{
  width: auto;
  min-width: 126px;
  height: 36px;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  filter: none;
}

body.page-app .cd-core-tool .actions .cd-btn:hover{
  width: auto;
  height: 36px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(138,180,255,.25), 0 8px 16px rgba(0,0,0,.25);
}

body.page-app .cd-core-tool .actions .cd-btn:hover::before{
  display: none;
}