@charset "UTF-8";

/* Tool-specific surfaces inherit the authenticated shell's theme. */
#studio.signed-in :is(#upload,#output,#chatPane,#paidPane) {
  --tool-canvas:var(--raine-bg);
  --tool-grid:#ffffff04;
  --tool-accent:var(--visual-accent,var(--mint));
  --tool-tint:color-mix(in srgb,var(--tool-accent) 6%,var(--panel));
  --tool-shadow:0 12px 35px #0000000d;
}
:root[data-theme=light] #studio.signed-in :is(#upload,#output,#chatPane,#paidPane) {
  --tool-canvas:var(--raine-bg);
  --tool-grid:#18250e04;
  --tool-shadow:0 12px 35px #25341505;
}

/* Reference images remain intact on a calm canvas, with file controls below. */
#studio.signed-in[data-view=edit] #upload {
  min-width:0;
}
#studio.signed-in[data-view=edit] #dropzone {
  min-height:clamp(330px,42dvh,510px);
  margin:0;
  padding:42px 28px;
  gap:13px;
  background-color:var(--tool-canvas);
  background-image:linear-gradient(45deg,var(--tool-grid) 25%,transparent 25%),linear-gradient(-45deg,var(--tool-grid) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tool-grid) 75%),linear-gradient(-45deg,transparent 75%,var(--tool-grid) 75%);
  background-size:24px 24px;
  background-position:0 0,0 12px,12px -12px,-12px 0;
  border:1px dashed color-mix(in srgb,var(--muted) 50%,var(--line));
  border-radius:var(--raine-card-radius);
  color:var(--text);
}
#studio.signed-in[data-view=edit] #dropzone:hover,
#studio.signed-in[data-view=edit] #dropzone.dragging,
#studio.signed-in[data-view=edit] #dropzone:focus-within {
  background-color:var(--tool-tint);
  border-color:var(--tool-accent);
}
#studio.signed-in[data-view=edit] #dropzone:focus-within {
  outline:2px solid var(--tool-accent);
  outline-offset:4px;
}
#studio.signed-in[data-view=edit] #dropzone>span:first-child {
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  padding:20px;
  margin:0 0 10px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--panel);
  color:var(--tool-accent);
  stroke-width:1.5;
}
#studio.signed-in[data-view=edit] #dropzone>span:first-child .icon {
  width:26px;
  height:26px;
  stroke-width:1.5;
}
#studio.signed-in[data-view=edit] #dropzone strong {
  font-size:22px;
  font-weight:550;
  line-height:1.3;
  letter-spacing:-.6px;
}
#studio.signed-in[data-view=edit] #dropzone>span:nth-of-type(2) {
  max-width:320px;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
#studio.signed-in[data-view=edit] #dropzone small {
  font-size:12px;
  color:var(--muted);
  letter-spacing:.25px;
}
#studio.signed-in[data-view=edit].has-upload #dropzone {
  min-height:0;
  height:0;
  padding:0;
  border:0;
  margin:0;
  outline:0;
}
#studio.signed-in[data-view=edit] #upload .upload-preview {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-width:0;
}
#studio.signed-in[data-view=edit].has-upload #upload .upload-preview {
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--raine-card-radius);
  background:var(--tool-canvas);
  box-shadow:var(--tool-shadow);
}
#studio.signed-in[data-view=edit] #upload #preview {
  grid-column:1/-1;
  justify-self:center;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:min(64dvh,700px);
  object-fit:contain;
  border-radius:var(--raine-control-radius);
}
#studio.signed-in[data-view=edit] #uploadFileName {
  min-width:0;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  overflow-wrap:anywhere;
}
#studio.signed-in[data-view=edit] #uploadFileName:empty {
  display:none;
}
#studio.signed-in[data-view=edit] #replaceImage {
  min-height:44px;
  padding:10px 13px;
  border-radius:var(--raine-control-radius);
  background:var(--panel);
  font-size:12px;
}
#studio.signed-in[data-view=edit].has-upload.has-result #upload .upload-preview {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--panel);
  box-shadow:none;
}
#studio.signed-in[data-view=edit].has-result #upload #preview {
  display:none;
}
#studio.signed-in[data-view=edit].has-result #uploadFileName {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* A consistent result stage serves generation and editing. */
#studio.signed-in #imagePane #output {
  min-width:0;
}
#studio.signed-in #output>.section-heading {
  align-items:center;
  min-height:42px;
  margin:0 0 14px;
  gap:14px;
}
#studio.signed-in #output>.section-heading h3 {
  font-size:15px;
  font-weight:550;
  letter-spacing:-.25px;
}
#studio.signed-in #output .result-tools {
  gap:8px;
}
#studio.signed-in #output .result-tools .secondary {
  min-height:38px;
  padding:9px 12px;
  border-radius:var(--raine-control-radius);
  font-size:12px;
}
#studio.signed-in #output #compareToggle[aria-pressed=true] {
  background:var(--tool-tint);
  border-color:var(--tool-accent);
  color:var(--tool-accent);
}
#studio.signed-in #output #expandResult {
  width:38px;
  height:38px;
  padding:10px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--raine-control-radius);
}
#studio.signed-in #output .result-frame {
  min-height:310px;
  max-width:100%;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--raine-card-radius);
  background-color:var(--tool-canvas);
  background-image:linear-gradient(45deg,var(--tool-grid) 25%,transparent 25%),linear-gradient(-45deg,var(--tool-grid) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tool-grid) 75%),linear-gradient(-45deg,transparent 75%,var(--tool-grid) 75%);
  background-size:24px 24px;
  background-position:0 0,0 12px,12px -12px,-12px 0;
}
#studio.signed-in #output .result-frame>img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:min(72dvh,800px);
  object-fit:contain;
  border-radius:var(--raine-control-radius);
}
#studio.signed-in #output #comparePanel {
  min-height:230px;
  max-height:68dvh;
  border-radius:var(--raine-control-radius);
  background:transparent;
}
#studio.signed-in #output #comparePanel:focus-within {
  outline:2px solid var(--tool-accent);
  outline-offset:4px;
}
#studio.signed-in #output .compare-line {
  width:2px;
  background:var(--mint);
  filter:drop-shadow(0 0 4px #00000070);
}
#studio.signed-in #output .compare-line:after {
  width:42px;
  height:42px;
  line-height:42px;
  border:1px solid #ffffff50;
  background:var(--mint);
  color:var(--mint-ink);
  font-size:21px;
}
#studio.signed-in #output .compare-label {
  top:14px;
  padding:6px 10px;
  border:1px solid #ffffff25;
  border-radius:6px;
  background:#0a0b0dd9;
  color:#f7f8f3;
  backdrop-filter:blur(8px);
  font-size:11px;
  line-height:1.4;
}
#studio.signed-in #output .result-project-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin:17px 0 0;
  padding:16px 0;
  border-top:0;
  border-bottom:1px solid var(--line);
}
#studio.signed-in #output .result-project-row label {
  margin:0;
  font-size:12px;
  color:var(--muted);
}
#studio.signed-in #output #saveImageProject {
  width:min(270px,100%);
  min-height:40px;
  padding:9px 11px;
  font-size:12px;
  border-radius:var(--raine-control-radius);
}
#studio.signed-in #output .result-actions {
  align-items:stretch;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}
#studio.signed-in #output .result-actions :is(button,a) {
  min-height:41px;
  padding:10px 13px;
  border-radius:var(--raine-control-radius);
  font-size:12px;
  line-height:1.5;
  text-align:center;
  white-space:normal;
}
#studio.signed-in #output #saveImage:not(:disabled) {
  border-color:var(--tool-accent);
  color:var(--tool-accent);
  background:var(--tool-tint);
}
#studio.signed-in #output #download {
  background:var(--hover);
  color:var(--text);
}
#studio.signed-in #output .save-status {
  margin-top:12px;
  font-size:12px;
  line-height:1.75;
}

/* The conversation is a readable document; the input stays in normal flow. */
#studio.signed-in #chatPane {
  width:100%;
  max-width:960px;
  min-width:0;
  margin:0 auto;
}
#studio.signed-in #chatPane>.chat-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:15px;
  padding:17px 20px;
  margin:0 0 20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
}
#studio.signed-in #chatPane>.chat-heading>div {
  min-width:0;
  gap:10px;
  flex-wrap:wrap;
}
#studio.signed-in #chatPane .chat-avatar {
  width:34px;
  height:36px;
  border-radius:10px;
  font-size:19px;
  background:var(--bg);
  color:var(--tool-accent);
}
#studio.signed-in #chatPane #chatTitle {
  font-size:15px;
  font-weight:550;
  letter-spacing:-.2px;
}
#studio.signed-in #chatPane .pill {
  padding:4px 8px;
  font-size:11px;
  color:var(--tool-accent);
}
#studio.signed-in #chatPane #chatModel {
  width:220px;
  max-width:100%;
  min-height:42px;
  padding:10px 12px;
  border-radius:var(--raine-control-radius);
  background:var(--bg);
  font-size:13px;
}
#studio.signed-in #chatPane #chatEmpty {
  min-height:clamp(320px,43dvh,460px);
  padding:42px 20px 38px;
  gap:17px;
}
#studio.signed-in #chatPane .chat-empty-mark {
  width:54px;
  height:58px;
  margin:0 0 3px;
  border:1px solid var(--line);
  border-radius:var(--raine-card-radius);
  background:var(--panel);
  box-shadow:var(--tool-shadow);
  color:var(--tool-accent);
  font-size:34px;
  font-weight:500;
}
#studio.signed-in #chatPane #chatEmpty h3 {
  max-width:600px;
  font-size:clamp(25px,2.25vw,34px);
  font-weight:500;
  letter-spacing:-1px;
  line-height:1.2;
}
#studio.signed-in #chatPane #chatEmpty p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}
#studio.signed-in #chatPane .chat-suggestions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(600px,100%);
  gap:12px;
  margin-top:11px;
}
#studio.signed-in #chatPane .chat-suggestions button {
  min-width:0;
  min-height:65px;
  justify-content:space-between;
  gap:15px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  font-size:13px;
  line-height:1.6;
  text-align:left;
  white-space:normal;
}
#studio.signed-in #chatPane .chat-suggestions button:hover:not(:disabled) {
  border-color:var(--tool-accent);
  background:var(--tool-tint);
}
#studio.signed-in #chatPane .chat-suggestions .icon {
  width:16px;
  height:16px;
  color:var(--muted);
}
#studio.signed-in #chatPane #chatMessages {
  min-height:0;
  max-height:min(60dvh,780px);
  gap:20px;
  padding:5px 12px 24px 2px;
  margin:0 0 8px;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  scroll-padding:18px;
}
#studio.signed-in #chatPane .chat-message {
  min-width:0;
  max-width:100%;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  color:var(--text);
  font-size:15px;
  overflow-wrap:anywhere;
}
#studio.signed-in #chatPane .chat-message>strong {
  font-size:12px;
  font-weight:600;
  letter-spacing:.1px;
  color:var(--tool-accent);
  margin-bottom:12px;
}
#studio.signed-in #chatPane .chat-message p {
  font-size:15px;
  line-height:1.85;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
#studio.signed-in #chatPane .chat-message.user {
  max-width:82%;
  align-self:flex-end;
  padding:16px 20px;
  border-color:color-mix(in srgb,var(--tool-accent) 17%,var(--line));
  border-radius:14px 14px 4px 14px;
  background:var(--tool-tint);
}
#studio.signed-in #chatPane .chat-message.user p {
  font-size:14px;
  line-height:1.8;
}
#studio.signed-in #chatPane .chat-answer-actions {
  margin-top:20px;
  padding-top:14px;
  gap:9px 17px;
}
#studio.signed-in #chatPane .chat-answer-actions .text-button {
  min-height:34px;
  padding:4px 0;
  font-size:12px;
  line-height:1.6;
  white-space:normal;
  text-align:left;
}
#studio.signed-in #chatPane .chat-answer-actions .text-button:hover:not(:disabled) {
  background:none;
  color:var(--tool-accent);
}
#studio.signed-in #chatPane .chat-composer {
  position:relative;
  margin:0;
  padding:21px 22px 18px;
  border:1px solid var(--line);
  border-radius:var(--raine-card-radius);
  background:var(--panel);
  box-shadow:var(--tool-shadow);
}
#studio.signed-in #chatPane .chat-composer:focus-within {
  border-color:var(--tool-accent);
}
#studio.signed-in #chatPane #chatPrompt {
  height:94px;
  min-height:94px;
  font-size:15px;
  line-height:1.8;
}
#studio.signed-in #chatPane .composer-footer {
  gap:12px;
  padding-top:15px;
}
#studio.signed-in #chatPane #newChat {
  min-height:40px;
  gap:8px;
  padding:7px 0;
  font-size:12px;
}
#studio.signed-in #chatPane #sendChat {
  min-height:43px;
  gap:12px;
  padding:11px 17px;
  border-radius:10px;
  font-size:13px;
}
#studio.signed-in #chatPane .keyboard-hint {
  font-size:11px;
}
#studio.signed-in #chatPane #chatStatus {
  font-size:13px;
  line-height:1.8;
  margin-top:14px;
}
#studio.signed-in #chatPane .chat-note {
  margin-top:14px;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}

/* Provider settings are separate from the owner's request and its result. */
#studio.signed-in.owner-view[data-view=key] #paidPane:not(.hidden) {
  display:grid!important;
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
  align-items:start;
  gap:20px 26px;
  width:100%;
  max-width:1240px;
  min-width:0;
  margin:0 auto;
}
#studio.signed-in[data-view=key] #paidPane>.provider-card {
  grid-column:1;
  grid-row:1/span 3;
  max-width:none;
  min-width:0;
  padding:25px;
  border:1px solid var(--line);
  border-radius:var(--raine-card-radius);
  background:var(--panel);
}
#studio.signed-in[data-view=key] #paidPane>.provider-workbench {
  display:flex;
  flex-direction:column;
  grid-column:2;
  gap:20px;
  min-width:0;
}
#studio.signed-in[data-view=key] #paidPane:has(>.provider-workbench)>.provider-card {
  grid-row:auto;
}
#studio.signed-in[data-view=key] #paidPane .provider-card>.chat-heading {
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:17px;
}
#studio.signed-in[data-view=key] #paidPane .provider-logo {
  width:34px;
  height:37px;
  border-radius:10px;
  background:var(--bg);
  color:var(--tool-accent);
  font-size:21px;
}
#studio.signed-in[data-view=key] #paidPane .chat-heading strong {
  font-size:17px;
  letter-spacing:-.25px;
  font-weight:550;
}
#studio.signed-in[data-view=key] #paidPane #routerBadge {
  padding:5px 8px;
  border-radius:6px;
  font-size:11px;
  white-space:normal;
}
#studio.signed-in[data-view=key] #paidPane .provider-card>p {
  font-size:13px;
  line-height:1.8;
  overflow-wrap:anywhere;
}
#studio.signed-in.owner-view[data-view=key] #paidPane .provider-links:not(.hidden) {
  display:flex!important;
  align-items:center;
  flex-wrap:wrap;
  gap:11px 16px;
  margin:20px 0 22px;
}
#studio.signed-in[data-view=key] #paidPane .provider-links a {
  font-size:12px;
  line-height:1.6;
  white-space:normal;
}
#studio.signed-in[data-view=key] #paidPane .provider-links .secondary {
  min-height:39px;
  padding:9px 11px;
  border-radius:var(--raine-control-radius);
}
#studio.signed-in[data-view=key] #paidPane .provider-links a:not(.secondary) {
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:var(--line);
}
#studio.signed-in[data-view=key] #paidPane .provider-card details {
  margin:0 0 23px;
  padding:15px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:12px;
}
#studio.signed-in[data-view=key] #paidPane .provider-card summary {
  color:var(--text);
  font-size:13px;
  line-height:1.6;
}
#studio.signed-in[data-view=key] #paidPane #routerSetup {
  padding-top:12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.85;
  overflow-wrap:anywhere;
}
#studio.signed-in[data-view=key] #paidPane .provider-card>label {
  margin:20px 0 10px;
  font-size:12px;
}
#studio.signed-in[data-view=key] #paidPane #routerModel {
  width:100%;
  max-width:100%;
  min-height:45px;
  padding:11px 12px;
  border-radius:10px;
  font-size:13px;
}
#studio.signed-in[data-view=key] #paidPane :is(#routerPrice,#routerBalance) {
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.85;
}
#studio.signed-in[data-view=key] #paidPane #refreshRouter {
  min-height:41px;
  padding:10px 13px;
  margin-top:19px;
  border-radius:var(--raine-control-radius);
  font-size:12px;
}
#studio.signed-in[data-view=key] #paidPane .provider-composer {
  grid-column:2;
  grid-row:1;
  min-width:0;
  max-width:none;
  padding:24px;
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--raine-card-radius);
  background:var(--panel);
}
#studio.signed-in[data-view=key] #paidPane .provider-composer>label {
  margin-bottom:14px;
  font-size:12px;
}
#studio.signed-in[data-view=key] #paidPane #routerPrompt {
  min-height:175px;
  height:175px;
  font-size:15px;
  line-height:1.8;
}
#studio.signed-in[data-view=key] #paidPane .provider-composer .composer-footer {
  padding-top:17px;
  margin-top:12px;
  gap:13px;
}
#studio.signed-in[data-view=key] #paidPane .provider-composer .composer-footer>.muted {
  font-size:12px;
  line-height:1.6;
}
#studio.signed-in[data-view=key] #paidPane #runRouter {
  min-height:43px;
  padding:11px 16px;
  border-radius:10px;
  font-size:13px;
  white-space:normal;
}
#studio.signed-in[data-view=key] #paidPane #routerStatus {
  grid-column:2;
  grid-row:2;
  margin:0;
  font-size:13px;
  line-height:1.85;
}
#studio.signed-in[data-view=key] #paidPane #routerOutput {
  grid-column:2;
  grid-row:3;
  min-width:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--raine-card-radius);
  background:var(--panel);
}
#studio.signed-in[data-view=key] #paidPane #routerAnswer {
  max-width:none;
  margin:0;
  font-size:15px;
  line-height:1.85;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
#studio.signed-in[data-view=key] #paidPane #routerAnswer:empty {
  display:none;
}
#studio.signed-in[data-view=key] #paidPane #routerImage {
  width:100%;
  height:auto;
  max-height:68dvh;
  margin:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--tool-canvas);
  object-fit:contain;
}
#studio.signed-in[data-view=key] #paidPane #routerAnswer:not(:empty)+#routerImage {
  margin-top:20px;
}
#studio.signed-in[data-view=key] #paidPane #routerSaveActions {
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
  padding-top:17px;
  border-top:1px solid var(--line);
}
#studio.signed-in[data-view=key] #paidPane .router-project-label {
  margin:0;
  font-size:12px;
}
#studio.signed-in[data-view=key] #paidPane #saveRouterProject {
  flex:1 1 150px;
  width:auto;
  max-width:100%;
  min-height:41px;
  padding:9px 11px;
  border-radius:var(--raine-control-radius);
  font-size:12px;
}
#studio.signed-in[data-view=key] #paidPane #saveRouterImage {
  min-height:41px;
  padding:10px 12px;
  border-radius:var(--raine-control-radius);
  font-size:12px;
}
#studio.signed-in[data-view=key] #paidPane #saveRouterStatus {
  font-size:12px;
  line-height:1.8;
}

@media(max-width:1100px) {
  #studio.signed-in.owner-view[data-view=key] #paidPane:not(.hidden) {grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr);gap:20px}
  #studio.signed-in[data-view=key] #paidPane>.provider-card {padding:21px}
  #studio.signed-in[data-view=key] #paidPane .provider-composer {padding:21px}
  #studio.signed-in[data-view=key] #paidPane .provider-composer .composer-footer {align-items:flex-start;flex-wrap:wrap}
  #studio.signed-in[data-view=key] #paidPane #runRouter {margin-left:auto}
}
@media(max-width:980px) {
  #studio.signed-in.owner-view[data-view=key] #paidPane:not(.hidden) {grid-template-columns:minmax(0,1fr);gap:20px}
  #studio.signed-in[data-view=key] #paidPane>.provider-card,
  #studio.signed-in[data-view=key] #paidPane>.provider-workbench,
  #studio.signed-in[data-view=key] #paidPane .provider-composer,
  #studio.signed-in[data-view=key] #paidPane #routerStatus,
  #studio.signed-in[data-view=key] #paidPane #routerOutput {grid-column:1;grid-row:auto}
  #studio.signed-in[data-view=edit] #dropzone {min-height:340px;padding:35px 22px}
  #studio.signed-in #output .result-actions :is(button,a) {font-size:12px;padding:10px 11px}
  #studio.signed-in #chatPane .chat-message {padding:20px}
  #studio.signed-in #chatPane .chat-message.user {padding:15px 18px}
}
@media(max-width:620px) {
  #studio.signed-in[data-view=edit] #dropzone {min-height:300px;padding:32px 19px;gap:12px;border-radius:14px}
  #studio.signed-in[data-view=edit] #dropzone>span:first-child {width:58px;height:58px;padding:17px;border-radius:15px;margin-bottom:6px}
  #studio.signed-in[data-view=edit] #dropzone>span:first-child .icon {width:24px;height:24px}
  #studio.signed-in[data-view=edit] #dropzone strong {font-size:20px;letter-spacing:-.45px}
  #studio.signed-in[data-view=edit] #dropzone>span:nth-of-type(2) {max-width:250px;font-size:13px;line-height:1.75}
  #studio.signed-in[data-view=edit] #dropzone small {font-size:12px}
  #studio.signed-in[data-view=edit].has-upload #dropzone {min-height:0;padding:0;border:0}
  #studio.signed-in[data-view=edit].has-upload #upload .upload-preview {padding:13px!important;border-radius:14px;gap:13px}
  #studio.signed-in[data-view=edit] #upload #preview {max-height:53dvh;border-radius:8px}
  #studio.signed-in[data-view=edit] #uploadFileName {font-size:12px}
  #studio.signed-in[data-view=edit] #replaceImage {min-height:44px;padding:9px 11px;font-size:12px}
  #studio.signed-in #output>.section-heading {gap:10px;margin-bottom:12px}
  #studio.signed-in #output>.section-heading h3 {font-size:14px}
  #studio.signed-in #output .result-tools {gap:6px}
  #studio.signed-in #output .result-tools .secondary {min-height:37px;padding:9px 10px;font-size:12px}
  #studio.signed-in #output #expandResult {width:37px;height:37px;padding:10px}
  #studio.signed-in #output .result-frame {padding:11px;min-height:235px;border-radius:14px}
  #studio.signed-in #output .result-frame>img {max-height:62dvh;border-radius:7px}
  #studio.signed-in #output #comparePanel {min-height:210px;max-height:60dvh;border-radius:7px}
  #studio.signed-in #output .compare-label {top:10px;padding:5px 8px;font-size:11px}
  #studio.signed-in #output .compare-label.before {left:9px}
  #studio.signed-in #output .compare-label.after {right:9px}
  #studio.signed-in #output .compare-line:after {width:38px;height:38px;line-height:38px;font-size:20px}
  #studio.signed-in #output .result-project-row {flex-direction:column;align-items:stretch;gap:9px;margin-top:12px;padding:13px 0}
  #studio.signed-in #output #saveImageProject {width:100%;min-height:43px;font-size:13px}
  #studio.signed-in #output .result-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
  #studio.signed-in #output .result-actions :is(button,a) {min-width:0;min-height:43px;padding:10px 9px;border-radius:var(--raine-control-radius);font-size:12px;line-height:1.55}
  #studio.signed-in #chatPane>.chat-heading {padding:14px;gap:13px;margin-bottom:16px;border-radius:13px}
  #studio.signed-in #chatPane>.chat-heading>div {gap:9px}
  #studio.signed-in #chatPane .chat-avatar {width:31px;height:33px;font-size:17px}
  #studio.signed-in #chatPane #chatTitle {font-size:14px}
  #studio.signed-in #chatPane .pill {padding:4px 7px;font-size:11px}
  #studio.signed-in #chatPane #chatModel {width:100%;min-height:44px;font-size:13px;padding:11px}
  #studio.signed-in #chatPane #chatEmpty {min-height:350px;padding:27px 0 30px;gap:16px}
  #studio.signed-in #chatPane .chat-empty-mark {width:46px;height:50px;border-radius:14px;font-size:30px}
  #studio.signed-in #chatPane #chatEmpty h3 {font-size:25px;letter-spacing:-.7px;max-width:300px}
  #studio.signed-in #chatPane #chatEmpty p {font-size:13px;line-height:1.8}
  #studio.signed-in #chatPane .chat-suggestions {gap:9px;margin-top:7px}
  #studio.signed-in #chatPane .chat-suggestions button {min-height:82px;padding:13px 11px;gap:8px;font-size:12px;line-height:1.65;border-radius:11px}
  #studio.signed-in #chatPane .chat-suggestions .icon {width:14px;height:14px}
  #studio.signed-in #chatPane #chatMessages {max-height:58dvh;gap:15px;padding:3px 6px 18px 0;margin-bottom:6px}
  #studio.signed-in #chatPane .chat-message {padding:18px 16px;border-radius:13px;font-size:14px}
  #studio.signed-in #chatPane .chat-message>strong {font-size:12px;margin-bottom:10px}
  #studio.signed-in #chatPane .chat-message p {font-size:14px;line-height:1.85}
  #studio.signed-in #chatPane .chat-message.user {max-width:92%;padding:13px 15px;border-radius:13px 13px 4px 13px}
  #studio.signed-in #chatPane .chat-message.user p {font-size:14px;line-height:1.75}
  #studio.signed-in #chatPane .chat-answer-actions {gap:4px 14px;margin-top:15px;padding-top:11px}
  #studio.signed-in #chatPane .chat-answer-actions .text-button {min-height:36px;font-size:12px}
  #studio.signed-in #chatPane .chat-composer {padding:16px 16px 14px;border-radius:14px}
  #studio.signed-in #chatPane #chatPrompt {min-height:90px;height:90px;font-size:16px;line-height:1.7}
  #studio.signed-in #chatPane .composer-footer {gap:9px;padding-top:12px}
  #studio.signed-in #chatPane #newChat {min-height:42px;padding:7px 0;font-size:12px;gap:6px}
  #studio.signed-in #chatPane #sendChat {min-height:43px;padding:10px 13px;gap:9px;font-size:12px}
  #studio.signed-in #chatPane .chat-note {font-size:11px;line-height:1.75;margin-top:13px}
  #studio.signed-in[data-view=key] #paidPane>.provider-card {padding:19px 17px;border-radius:14px}
  #studio.signed-in[data-view=key] #paidPane .provider-card>.chat-heading {gap:12px;margin-bottom:15px}
  #studio.signed-in[data-view=key] #paidPane .chat-heading strong {font-size:16px}
  #studio.signed-in[data-view=key] #paidPane .provider-card>p {font-size:13px}
  #studio.signed-in[data-view=key] #paidPane .provider-links {margin:17px 0 20px;gap:12px}
  #studio.signed-in[data-view=key] #paidPane .provider-links a {font-size:12px}
  #studio.signed-in[data-view=key] #paidPane .provider-card details {margin-bottom:20px;padding:14px 0}
  #studio.signed-in[data-view=key] #paidPane #routerModel {min-height:45px;font-size:13px}
  #studio.signed-in[data-view=key] #paidPane #refreshRouter {min-height:42px;font-size:12px}
  #studio.signed-in[data-view=key] #paidPane .provider-composer {padding:19px 17px;border-radius:14px}
  #studio.signed-in[data-view=key] #paidPane .provider-composer>label {font-size:12px;margin-bottom:13px}
  #studio.signed-in[data-view=key] #paidPane #routerPrompt {min-height:135px;height:135px;font-size:16px;line-height:1.7}
  #studio.signed-in[data-view=key] #paidPane .provider-composer .composer-footer {padding-top:15px;margin-top:10px;gap:13px}
  #studio.signed-in[data-view=key] #paidPane #runRouter {min-height:44px;font-size:13px;padding:11px 14px}
  #studio.signed-in[data-view=key] #paidPane #routerStatus {font-size:13px}
  #studio.signed-in[data-view=key] #paidPane #routerOutput {padding:17px;border-radius:14px}
  #studio.signed-in[data-view=key] #paidPane #routerAnswer {font-size:14px;line-height:1.85}
  #studio.signed-in[data-view=key] #paidPane #routerImage {max-height:60dvh;border-radius:8px}
  #studio.signed-in[data-view=key] #paidPane #routerSaveActions {align-items:stretch;gap:9px;margin-top:15px;padding-top:15px}
  #studio.signed-in[data-view=key] #paidPane .router-project-label {flex-basis:100%;font-size:12px}
  #studio.signed-in[data-view=key] #paidPane #saveRouterProject {flex-basis:100%;width:100%;min-height:43px;font-size:13px}
  #studio.signed-in[data-view=key] #paidPane #saveRouterImage {width:100%;min-height:43px;font-size:12px}
}
@media(max-width:359px) {
  #studio.signed-in[data-view=edit] #dropzone {min-height:285px;padding:28px 16px}
  #studio.signed-in[data-view=edit] #dropzone strong {font-size:19px}
  #studio.signed-in[data-view=edit].has-upload #upload .upload-preview {grid-template-columns:minmax(0,1fr);padding:11px!important}
  #studio.signed-in[data-view=edit] #replaceImage {justify-self:start}
  #studio.signed-in #output .result-tools .secondary {font-size:11px;padding:9px}
  #studio.signed-in #output .result-actions :is(button,a) {font-size:11px;padding:10px 8px}
  #studio.signed-in #chatPane #chatEmpty h3 {font-size:23px;max-width:250px}
  #studio.signed-in #chatPane .chat-suggestions {gap:8px}
  #studio.signed-in #chatPane .chat-suggestions button {font-size:12px;padding:12px 10px;gap:7px;flex-direction:column;align-items:flex-start;min-height:100px}
  #studio.signed-in #chatPane .chat-suggestions .icon {align-self:flex-end}
  #studio.signed-in #chatPane .chat-composer {padding:15px 13px 13px}
  #studio.signed-in #chatPane #newChat {font-size:11px}
  #studio.signed-in #chatPane #sendChat {font-size:12px;padding:10px 12px}
  #studio.signed-in[data-view=key] #paidPane #runRouter {width:100%}
}