:root { --ink:#1c1d1b; --muted:#6a6c65; --line:#dedfd8; --paper:#f8f7f2; --white:#fff; --green:#c7ff4a; --orange:#ff6b35; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
.studio-app { min-height:100vh; }
.studio-topbar { height:68px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#fff; }
.studio-brand { display:flex; align-items:center; gap:10px; font-weight:850; letter-spacing:-.02em; }
.studio-logo { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--ink); color:var(--green); font:italic 19px Georgia,serif; }
.mode-pill { padding:7px 10px; border:1px solid var(--ink); border-radius:999px; background:var(--green); font-size:9px; letter-spacing:.12em; font-weight:900; }
.studio-layout { min-height:calc(100vh - 68px); display:grid; grid-template-columns:288px minmax(360px,1fr) 270px; }
.control-panel,.queue-panel { background:#fff; padding:22px; overflow:auto; }
.control-panel { border-right:1px solid var(--line); }.queue-panel { border-left:1px solid var(--line); }
.panel-heading { display:flex; align-items:flex-start; gap:12px; padding-bottom:19px; border-bottom:1px solid var(--line); }
.panel-heading>span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:white; font-size:9px; font-weight:900; }
.panel-heading h1,.panel-heading h2 { margin:0 0 3px; font-size:16px; letter-spacing:-.025em; }.panel-heading p { margin:0; color:var(--muted); font-size:11px; }
.control-group { padding:17px 0; border-bottom:1px solid var(--line); }
.field-label { display:block; margin-bottom:8px; color:#4e504a; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
select,input[type="text"] { width:100%; height:38px; padding:0 10px; color:var(--ink); background:#f7f6f1; border:1px solid #d6d7cf; border-radius:8px; outline:none; font-size:11px; font-weight:650; }
select:focus,input[type="text"]:focus { border-color:var(--ink); box-shadow:0 0 0 2px rgba(28,29,27,.08); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.compact-row { margin-top:10px; }
.segmented { height:38px; display:grid; grid-template-columns:1fr 1fr; padding:3px; border:1px solid #d6d7cf; border-radius:8px; background:#f7f6f1; }
.segmented label { position:relative; }.segmented input { position:absolute; opacity:0; }.segmented span { height:30px; display:grid; place-items:center; border-radius:6px; font-size:11px; font-weight:750; cursor:pointer; }.segmented input:checked+span { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.13); }
.color-field { height:38px; display:flex; align-items:center; gap:7px; padding:4px 8px 4px 4px; border:1px solid #d6d7cf; border-radius:8px; background:#f7f6f1; font-size:9px; font-weight:800; color:var(--muted); }
.color-field input { width:30px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; cursor:pointer; }.color-field input::-webkit-color-swatch-wrapper { padding:0; }.color-field input::-webkit-color-swatch { border:0; border-radius:5px; }
.range-label,.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }.range-label .field-label { margin-bottom:8px; }.range-label output { color:var(--muted); font-size:10px; font-weight:800; }
input[type="range"] { width:100%; accent-color:var(--ink); }
.toggle-row label { font-size:11px; font-weight:800; }.toggle-row input { width:34px; height:19px; accent-color:var(--ink); }
.upload-logo { min-height:42px; display:flex; align-items:center; gap:8px; padding:8px 10px; background:#f7f6f1; border:1px dashed #babcb3; border-radius:8px; color:var(--muted); font-size:10px; font-weight:750; cursor:pointer; }
.upload-logo>span:first-child { width:24px; height:24px; display:grid; place-items:center; border-radius:5px; background:#fff; color:var(--ink); font-size:16px; }.plain-button { padding:0; border:0; background:none; color:#b33b1d; font-size:9px; font-weight:850; cursor:pointer; }

.preview-panel { min-width:0; display:flex; flex-direction:column; padding:22px; background:#efeee8; }
.preview-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }.preview-toolbar>div { min-width:0; }.toolbar-kicker { display:block; margin-bottom:4px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; font-weight:900; }.preview-toolbar strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.preview-toolbar>span { color:var(--muted); font-size:10px; font-weight:750; white-space:nowrap; }
.preview-stage { flex:1; min-height:540px; display:grid; place-items:center; position:relative; overflow:hidden; padding:32px; border:1px solid #d2d2ca; border-radius:16px; background-color:#dddcd4; background-image:linear-gradient(45deg,#d2d1c9 25%,transparent 25%),linear-gradient(-45deg,#d2d1c9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d2d1c9 75%),linear-gradient(-45deg,transparent 75%,#d2d1c9 75%); background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0; }
.preview-placeholder { max-width:300px; text-align:center; color:#777970; }.placeholder-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 17px; border:1px solid #adafa6; border-radius:16px; background:#efeee8; color:#999b91; font-size:28px; }.preview-placeholder strong { display:block; color:#55574f; font-size:13px; }.preview-placeholder p { margin:8px 0 0; font-size:10px; line-height:1.5; }
#previewImage { max-width:100%; max-height:650px; object-fit:contain; box-shadow:0 12px 34px rgba(0,0,0,.19); }
.rendering { position:absolute; right:14px; bottom:14px; padding:8px 10px; border-radius:7px; background:rgba(28,29,27,.9); color:white; font-size:9px; font-weight:800; }
.privacy-note { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:13px; color:var(--muted); font-size:9px; font-weight:700; }.privacy-note span { color:#68a100; }

.queue-heading { margin-bottom:15px; }.drop-zone { min-height:126px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:15px; border:1px dashed #aeb0a6; border-radius:12px; background:#f7f6f1; text-align:center; cursor:pointer; transition:.2s ease; }.drop-zone:hover,.drop-zone.drag-over { border-color:var(--ink); background:#f0ffd0; }.drop-icon { width:34px; height:34px; display:grid; place-items:center; margin-bottom:8px; border-radius:50%; background:var(--ink); color:var(--green); font-size:20px; }.drop-zone strong { font-size:11px; }.drop-zone small { margin-top:5px; color:var(--muted); font-size:8px; }
.queue-list { max-height:400px; min-height:140px; overflow:auto; margin:15px 0; display:grid; align-content:start; gap:8px; }.empty-queue { padding:35px 10px; text-align:center; color:#96988f; font-size:10px; }
.queue-item { display:grid; grid-template-columns:48px 1fr 24px; align-items:center; gap:9px; padding:7px; border:1px solid #dedfd8; border-radius:9px; background:#fff; cursor:pointer; }.queue-item.active { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }.queue-thumb { width:48px; height:48px; border-radius:6px; object-fit:cover; background:#eee; }.queue-meta { min-width:0; }.queue-meta strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }.queue-meta span { color:var(--muted); font-size:8px; }.remove-photo { width:24px; height:24px; display:grid; place-items:center; border:0; background:transparent; color:#8a8c84; font-size:15px; cursor:pointer; }
.queue-actions { display:grid; grid-template-columns:auto 1fr; gap:8px; }.clear-button,.export-button { height:42px; border:1px solid var(--ink); border-radius:9px; font-weight:850; cursor:pointer; }.clear-button { padding:0 12px; background:white; font-size:9px; }.export-button { display:flex; align-items:center; justify-content:space-between; padding:0 14px; background:var(--green); font-size:10px; }.clear-button:disabled,.export-button:disabled { cursor:not-allowed; opacity:.35; }
.progress-track { height:5px; margin-top:12px; overflow:hidden; border-radius:99px; background:#e4e5de; }.progress-track span { display:block; width:0; height:100%; background:var(--orange); transition:width .2s ease; }.status-message { min-height:28px; margin:10px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }.status-message.error { color:#b53a1e; }.status-message.success { color:#477900; }.demo-note { margin:10px 0 0; padding:10px; border-radius:8px; background:#fff3e6; color:#80522e; font-size:8px; line-height:1.5; }

@media (max-width:900px) { .studio-layout { grid-template-columns:280px 1fr; }.queue-panel { grid-column:1/-1; border-left:0; border-top:1px solid var(--line); }.queue-list { grid-template-columns:repeat(3,1fr); max-height:none; }.drop-zone { min-height:100px; } }
@media (max-width:620px) { .studio-topbar { padding:0 14px; }.studio-brand { font-size:12px; }.mode-pill { font-size:7px; }.studio-layout { display:block; }.control-panel,.queue-panel,.preview-panel { padding:16px; border:0; border-bottom:1px solid var(--line); }.preview-stage { min-height:420px; padding:16px; }.queue-list { grid-template-columns:1fr; }.two-col { grid-template-columns:1fr 1fr; } }

.field-hint {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .studio-topbar { position: sticky; top: 0; z-index: 10; }
  select, input[type="text"] { font-size: 16px; }
  .preview-stage { min-height: 360px; }
}
.pro-chip {
  display: inline-flex;
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}