:root {
  --creator-bg: #0d1117;
  --creator-surface: #161b22;
  --creator-surface-strong: #1f2630;
  --creator-line: #30363d;
  --creator-muted: #8b949e;
  --creator-text: #f0f6fc;
  --creator-blue: #58a6ff;
  --creator-violet: #bc8cff;
  --creator-green: #3fb950;
}

.creator-entry {
  align-items: center;
  background: linear-gradient(135deg, rgba(31, 38, 48, .96), rgba(13, 17, 23, .98));
  border: 1px solid rgba(88, 166, 255, .38);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--creator-text);
  display: grid;
  gap: 14px;
  grid-template-columns: 42px 1fr auto;
  margin: 16px 0;
  padding: 18px;
  text-align: left;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  width: 100%;
}
.creator-entry:hover, .creator-entry:focus-visible { border-color: var(--creator-blue); box-shadow: 0 22px 56px rgba(88, 166, 255, .18); transform: translateY(-2px); }
.creator-entry-pinned { margin-top: 0; }
.creator-entry-mark { align-items: center; background: linear-gradient(145deg, #58a6ff, #bc8cff); border-radius: 12px; color: #0d1117; display: grid; font-size: 22px; height: 42px; justify-content: center; width: 42px; }
.creator-entry small, .creator-entry b, .creator-entry em { display: block; }
.creator-entry small, .creator-kicker { color: var(--creator-blue); font: 500 10px/1.4 "DM Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.creator-entry b { font-size: 19px; letter-spacing: .04em; margin-top: 5px; }
.creator-entry em { color: var(--creator-muted); font-size: 12px; font-style: normal; margin-top: 5px; }
.creator-entry i { color: var(--creator-blue); font-size: 24px; font-style: normal; }

.creator-view { background: radial-gradient(circle at 80% 5%, rgba(88,166,255,.12), transparent 30%), var(--creator-bg); }
.creator-view h1 { color: var(--creator-text); }
.creator-view h1 em { color: var(--creator-violet); font-style: normal; }
.creator-view .lede { color: var(--creator-muted); max-width: 680px; }
.creator-panel, .creator-result { background: rgba(22, 27, 34, .92); border: 1px solid var(--creator-line); border-radius: 18px; box-shadow: 0 22px 70px rgba(0,0,0,.26); margin-top: 22px; padding: 20px; }
.creator-panel-head, .creator-result-head, .creator-form-row, .creator-actions, .creator-result-actions { align-items: center; display: flex; justify-content: space-between; gap: 12px; }
.creator-cost { color: #d2a8ff; font: 600 12px "DM Mono", monospace; }
.creator-form label { color: var(--creator-muted); display: block; font-size: 13px; margin: 16px 0 8px; }
.creator-form textarea, .creator-form select { background: #0d1117; border: 1px solid var(--creator-line); border-radius: 10px; box-sizing: border-box; color: var(--creator-text); font: inherit; outline: none; padding: 13px 14px; width: 100%; }
.creator-form textarea { min-height: 132px; resize: vertical; }
.creator-form textarea:focus, .creator-form select:focus { border-color: var(--creator-blue); box-shadow: 0 0 0 3px rgba(88,166,255,.16); }
.creator-form-row { align-items: end; }
.creator-form-row label { flex: 1; margin-bottom: 0; }
.creator-form-row select { max-width: 58%; }
.creator-actions { border-top: 1px solid var(--creator-line); margin-top: 18px; padding-top: 16px; }
.creator-actions > span { color: var(--creator-muted); font: 500 12px "DM Mono", monospace; }
.creator-status { color: var(--creator-muted); font-size: 12px; margin: 14px 0 0; }
.creator-status.is-error { color: #ff7b72; }
.creator-status.is-success { color: var(--creator-green); }
.creator-result[hidden] { display: none; }
.creator-result h2 { color: var(--creator-text); font-size: 20px; margin: 5px 0 0; }
.creator-watermark-badge { border: 1px solid rgba(63,185,80,.45); border-radius: 999px; color: var(--creator-green); font: 500 10px "DM Mono", monospace; letter-spacing: .1em; padding: 6px 9px; }
.creator-image-wrap { background: #010409; border: 1px solid var(--creator-line); border-radius: 12px; margin-top: 18px; overflow: hidden; }
.creator-image-wrap img { display: block; height: auto; max-height: 70vh; object-fit: contain; width: 100%; }
.creator-result-meta { color: var(--creator-muted); font-size: 12px; line-height: 1.6; margin: 12px 0 0; }
.creator-result-actions { align-items: stretch; flex-wrap: wrap; margin-top: 18px; }
.creator-result-actions button { flex: 1 1 130px; }
.creator-result-actions .primary-button { background: linear-gradient(135deg, #238636, #2ea043); }

.chat-creator-tools { align-items: center; background: rgba(13, 17, 23, .86); border: 1px solid rgba(88, 166, 255, .34); border-radius: 14px; display: flex; gap: 16px; justify-content: space-between; margin: 16px 0 10px; padding: 13px 16px; }
.chat-creator-tools b, .chat-creator-tools small { display: block; }
.chat-creator-tools b { color: var(--creator-text); font-size: 14px; margin-top: 3px; }
.chat-creator-tools small { color: var(--creator-muted); font-size: 11px; margin-top: 4px; }
.chat-creator-tools button, .message-copy { background: rgba(88, 166, 255, .12); border: 1px solid rgba(88, 166, 255, .46); border-radius: 8px; color: var(--creator-blue); cursor: pointer; font: inherit; font-size: 12px; padding: 8px 11px; white-space: nowrap; }
.chat-creator-tools button:hover, .message-copy:hover { background: rgba(88, 166, 255, .2); }
.chat-creator-tools button:disabled, .chat-creator-button:disabled { cursor: not-allowed; opacity: .45; }
.message-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.message-copy { display: inline-flex; text-decoration: none; }
.creator-chat-message img { border: 1px solid rgba(88, 166, 255, .32); border-radius: 10px; display: block; margin-top: 12px; max-height: 60vh; max-width: 100%; object-fit: contain; }
.creator-chat-actions { justify-content: flex-start; }
.chat-creator-button { align-items: center; background: rgba(88, 166, 255, .12) !important; border: 1px solid rgba(88, 166, 255, .46) !important; border-radius: 8px; color: var(--creator-blue) !important; display: inline-flex; flex: 0 0 34px; font-size: 17px !important; justify-content: center; margin-right: 4px; padding: 0 !important; }
.chat-creator-button:hover, .chat-creator-button:focus-visible { background: rgba(88, 166, 255, .24) !important; }
.membership-status { background: linear-gradient(135deg, rgba(74, 44, 24, .72), rgba(27, 20, 17, .9)); border: 1px solid rgba(231, 190, 105, .46); border-radius: 14px; box-shadow: inset 0 1px rgba(255, 236, 190, .08), 0 14px 30px rgba(0,0,0,.18); margin: 14px 0 12px; padding: 13px 14px; }
.membership-status[hidden] { display: none; }
.membership-status-head, .membership-countdown-row { align-items: center; display: flex; justify-content: space-between; gap: 10px; }
.membership-status-kicker { color: #e4b96f; display: block; font: 9px/1.4 "DM Mono", monospace; letter-spacing: .14em; }
.membership-status-head strong { color: #fff0cf; display: block; font: 600 15px/1.35 var(--serif); margin-top: 3px; }
.membership-badges { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.membership-badge { border: 1px solid rgba(231,190,105,.5); border-radius: 999px; color: #f3d28f; font: 600 9px/1 "DM Mono", monospace; letter-spacing: .05em; padding: 6px 7px; white-space: nowrap; }
.membership-badge.annual-vip { background: linear-gradient(135deg, #e6bd6a, #9f5d35); border-color: #f3d18a; color: #2b160d; }
.membership-countdown-row { border-top: 1px solid rgba(231,190,105,.18); margin-top: 11px; padding-top: 10px; }
.membership-countdown-row span, .membership-status > p { color: #c9b69a; font-size: 10px; }
.membership-countdown-row strong { color: #ffe2a3; font: 600 17px/1.1 "DM Mono", monospace; }
.membership-status > p { margin: 7px 0 0; }
@media (max-width: 620px) {
  .chat-creator-tools { align-items: stretch; flex-direction: column; }
  .chat-creator-tools button { width: 100%; }
}
@media (max-width: 520px) {
  .creator-entry { grid-template-columns: 36px 1fr auto; padding: 14px; }
  .creator-entry-mark { height: 36px; width: 36px; }
  .creator-entry b { font-size: 17px; }
  .creator-panel, .creator-result { padding: 16px; }
  .creator-actions { align-items: stretch; flex-direction: column; }
  .creator-actions .primary-button { width: 100%; }
  .creator-form-row { align-items: stretch; flex-direction: column; }
  .creator-form-row select { max-width: none; }
}