:root {
  --bg: #0b0d12;
  --panel: rgba(19, 22, 30, 0.96);
  --panel-2: #171b24;
  --line: rgba(255,255,255,.09);
  --text: #f5f3ee;
  --muted: #a8acb8;
  --gold: #d8b56a;
  --gold-2: #f0d79b;
  --danger: #ff7070;
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: radial-gradient(circle at 50% -20%, #202633 0%, var(--bg) 42%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { touch-action: manipulation; }
.app-shell { min-height: 100vh; }
.topbar { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 22px; border-bottom:1px solid var(--line); background:rgba(8,10,15,.82); backdrop-filter:blur(18px); position:sticky; top:0; z-index:20; }
.brand { font-family: Georgia, "Times New Roman", serif; font-size:25px; letter-spacing:.02em; }
.brand span { color:var(--gold-2); font-style:italic; }
.tagline { color:var(--muted); font-size:12px; margin-top:2px; }
.top-actions { display:flex; gap:8px; }
.workspace { display:grid; grid-template-columns:310px minmax(360px,1fr) 270px; gap:14px; padding:14px; min-height:calc(100vh - 76px); }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; max-height:calc(100vh - 104px); }
.control-section { padding:18px; border-bottom:1px solid var(--line); }
.control-section:last-child { border-bottom:0; }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:.15em; color:var(--gold-2); margin:0 0 15px; }
.upload-card { display:block; border:1px dashed rgba(216,181,106,.48); border-radius:14px; padding:18px; background:linear-gradient(145deg, rgba(216,181,106,.08), rgba(255,255,255,.02)); cursor:pointer; }
.upload-title { display:block; font-weight:700; margin-bottom:5px; }
.upload-copy { display:block; color:var(--muted); font-size:12px; line-height:1.45; margin-bottom:14px; }
.upload-button { display:inline-block; color:#121319; background:var(--gold-2); border-radius:9px; padding:9px 12px; font-weight:800; font-size:12px; }
.file-meta { margin-top:10px; color:var(--muted); font-size:11px; word-break:break-word; }
.field-label { display:flex; justify-content:space-between; color:#d8dbe3; font-size:12px; margin:13px 0 7px; }
input[type="range"] { width:100%; accent-color:var(--gold); }
select { width:100%; padding:11px 12px; color:var(--text); background:var(--panel-2); border:1px solid var(--line); border-radius:10px; outline:none; }
.btn { border:1px solid transparent; border-radius:10px; padding:10px 13px; color:var(--text); background:var(--panel-2); cursor:pointer; font-weight:700; font-size:12px; transition:.2s ease; }
.btn:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(255,255,255,.16); }
.btn:disabled { opacity:.38; cursor:not-allowed; }
.btn.primary { background:linear-gradient(135deg, var(--gold-2), #b98d39); color:#15130f; }
.btn.secondary { background:#242a37; border-color:rgba(255,255,255,.07); }
.btn.ghost { background:transparent; border-color:var(--line); }
.btn.full { width:100%; margin-top:13px; }
.btn.small { padding:7px 9px; }
.hint { color:var(--muted); font-size:11px; line-height:1.5; margin:11px 0 0; }
.segmented { display:grid; grid-template-columns:1fr 1fr; background:#0e1118; padding:3px; border-radius:11px; }
.seg { background:transparent; color:var(--muted); border:0; padding:9px; border-radius:8px; cursor:pointer; font-size:12px; }
.seg.active { background:#2b3240; color:var(--text); }
.button-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.canvas-stage { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(45deg,#0f1218 25%,#11151d 25%,#11151d 50%,#0f1218 50%,#0f1218 75%,#11151d 75%); background-size:28px 28px; overflow:hidden; position:relative; }
.empty-state { text-align:center; max-width:460px; padding:36px; }
.empty-mark { width:68px; height:68px; border:1px solid rgba(216,181,106,.45); color:var(--gold-2); border-radius:50%; display:grid; place-items:center; margin:0 auto 20px; font-family:Georgia,serif; font-size:20px; }
.empty-state h1 { font-family:Georgia,serif; font-weight:400; font-size:clamp(29px,4vw,52px); margin:0 0 12px; }
.empty-state p { color:var(--muted); line-height:1.6; margin:0 0 22px; }
.canvas-frame { position:relative; max-width:100%; max-height:calc(100vh - 155px); overflow:auto; touch-action:none; }
.canvas-frame canvas { display:block; }
#maskCanvas { position:absolute; inset:0; cursor:crosshair; }
.hidden { display:none !important; }
.busy-overlay { position:absolute; inset:0; background:rgba(7,9,13,.76); display:flex; gap:12px; align-items:center; justify-content:center; z-index:5; }
.spinner { width:22px; height:22px; border:2px solid rgba(255,255,255,.22); border-top-color:var(--gold-2); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.zoom-bar { position:absolute; bottom:14px; display:flex; align-items:center; gap:8px; padding:7px; background:rgba(12,14,20,.88); border:1px solid var(--line); border-radius:12px; backdrop-filter:blur(12px); }
.zoom-bar label { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); }
.zoom-bar input { width:110px; }
.export-estimate { margin-top:14px; padding:12px; border-radius:10px; background:#0f1218; color:var(--muted); font-size:11px; line-height:1.5; }
.info-card p { color:var(--muted); font-size:12px; line-height:1.55; margin:0; }
@media (max-width:1100px) {
  .workspace { grid-template-columns:280px 1fr; }
  .export-panel { grid-column:1 / -1; max-height:none; display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .topbar { position:relative; align-items:flex-start; padding:13px; }
  .tagline { display:none; }
  .top-actions { gap:4px; }
  .top-actions .btn { padding:8px; }
  .workspace { display:flex; flex-direction:column; padding:8px; min-height:auto; }
  .panel { max-height:none; }
  .controls-panel { order:2; }
  .canvas-stage { order:1; min-height:55vh; }
  .export-panel { order:3; display:block; }
  .canvas-frame { max-height:66vh; }
  .zoom-bar { bottom:8px; }
}