/* ================================================
   Picky Tidy Tasarım Stüdyosu Pro — v2.0 CSS
   ================================================ */

:root {
  --pt-cream:    #faf6f1;
  --pt-warm:     #f0e8dc;
  --pt-brown:    #8b6f5c;
  --pt-dark:     #2e1f14;
  --pt-gold:     #c9a96e;
  --pt-gold-lt:  #f0ddb0;
  --pt-sage:     #7a9e7e;
  --pt-rose:     #d4808a;
  --pt-lav:      #9b8bbf;
  --pt-shadow:   rgba(46,31,20,0.13);
  --pt-radius:   20px;
  --pt-radius-sm:12px;
}

/* ── Reset & Base ────────────────────── */
.ptd-wrapper * { box-sizing: border-box; margin:0; padding:0; }
.ptd-wrapper { font-family:'Nunito',sans-serif; background:var(--pt-cream); border-radius:var(--pt-radius); overflow:hidden; box-shadow:0 8px 40px var(--pt-shadow); }

/* ── Header ──────────────────────────── */
.ptd-header {
  background: linear-gradient(135deg, #2e1f14 0%, #5c3318 50%, #2e1f14 100%);
  padding: 36px 32px 28px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.ptd-header::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 30% 50%, rgba(201,169,110,0.18) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(201,169,110,0.12) 0%, transparent 60%);
}
.ptd-header h2 {
  font-family:'Playfair Display',serif;
  color:var(--pt-gold);
  font-size:30px;
  font-style:italic;
  letter-spacing:.5px;
  position:relative;
  text-shadow:0 2px 20px rgba(201,169,110,0.5);
}
.ptd-header p { color:rgba(255,255,255,.6); font-size:14px; margin-top:6px; position:relative; }

/* ── Main Tabs ───────────────────────── */
.ptd-tabs { display:flex; background:#1a0e08; }
.ptd-tab-btn {
  flex:1; padding:16px 20px;
  background:transparent; border:none; border-bottom:3px solid transparent;
  color:rgba(255,255,255,.45); font-family:'Nunito',sans-serif; font-size:15px; font-weight:700;
  cursor:pointer; transition:all .25s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.ptd-tab-btn:hover { color:var(--pt-gold); background:rgba(201,169,110,.07); }
.ptd-tab-btn.active { color:var(--pt-gold); border-bottom-color:var(--pt-gold); background:rgba(201,169,110,.1); }

/* ── Tab Content ─────────────────────── */
.ptd-content { display:none; }
.ptd-content.active { display:block; }

/* ── Sub Tabs (sections inside each designer) ── */
.ptd-sub-tabs {
  display:flex; gap:4px; padding:18px 20px 0;
  border-bottom:2px solid var(--pt-warm);
  background:white;
}
.ptd-sub-tab {
  padding:9px 16px; background:transparent; border:none; border-bottom:3px solid transparent;
  color:var(--pt-brown); font-family:'Nunito',sans-serif; font-size:13px; font-weight:600;
  cursor:pointer; transition:all .2s; margin-bottom:-2px; border-radius:8px 8px 0 0;
}
.ptd-sub-tab:hover { background:var(--pt-warm); }
.ptd-sub-tab.active { color:var(--pt-dark); border-bottom-color:var(--pt-gold); background:var(--pt-cream); }

/* ── Designer Layout ─────────────────── */
.ptd-designer-layout {
  display:grid; grid-template-columns:380px 1fr; gap:0; min-height:700px;
}
@media(max-width:960px){ .ptd-designer-layout{ grid-template-columns:1fr; } }

/* ── Controls Panel ──────────────────── */
.ptd-controls {
  background:white; padding:20px;
  border-right:2px solid var(--pt-warm);
  overflow-y:auto; max-height:800px;
}
.ptd-sub-panel { display:none; }
.ptd-sub-panel.active { display:block; }

.ptd-section-title {
  font-family:'Playfair Display',serif; font-size:13px; font-weight:700;
  color:var(--pt-dark); margin:0 0 10px;
  padding-bottom:7px; border-bottom:2px solid var(--pt-warm);
  display:flex; align-items:center; gap:6px; letter-spacing:.3px;
}
.ptd-control-group { margin-bottom:20px; }

/* ── Category Buttons ────────────────── */
.ptd-category-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ptd-cat-btn {
  padding:9px 8px; border:2px solid var(--pt-warm); border-radius:10px;
  background:white; color:var(--pt-brown); font-family:'Nunito',sans-serif;
  font-size:11.5px; font-weight:700; cursor:pointer; transition:all .2s;
  text-align:center; line-height:1.3;
}
.ptd-cat-btn:hover,.ptd-cat-btn.active {
  border-color:var(--pt-gold); background:var(--pt-gold); color:white;
}

/* ── Color Swatches ──────────────────── */
.ptd-color-grid { display:flex; flex-wrap:wrap; gap:7px; }
.ptd-color-swatch {
  width:32px; height:32px; border-radius:50%;
  border:3px solid transparent; cursor:pointer;
  transition:transform .2s, border-color .2s;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  position:relative;
}
.ptd-color-swatch:hover { transform:scale(1.18); }
.ptd-color-swatch.active { border-color:var(--pt-dark); transform:scale(1.18); }
.ptd-color-swatch.active::after {
  content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:white; text-shadow:0 1px 3px #000;
}

/* ── Custom Color Picker ─────────────── */
.ptd-custom-color-wrap {
  display:flex; align-items:center; gap:10px; margin-top:8px;
}
.ptd-custom-color-wrap label { font-size:12px; color:var(--pt-brown); font-weight:600; white-space:nowrap; }
.ptd-custom-color-wrap input[type="color"] {
  width:40px; height:40px; border:none; border-radius:8px; cursor:pointer; padding:0;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.ptd-opacity-row { display:flex; align-items:center; gap:10px; margin-top:6px; }
.ptd-opacity-row label { font-size:12px; color:var(--pt-brown); white-space:nowrap; }
.ptd-opacity-val { font-size:12px; color:var(--pt-dark); font-weight:700; min-width:30px; }

/* ── Inputs ──────────────────────────── */
.ptd-input {
  width:100%; padding:10px 13px; border:2px solid var(--pt-warm);
  border-radius:10px; font-family:'Nunito',sans-serif; font-size:14px;
  color:var(--pt-dark); background:var(--pt-cream); outline:none; transition:border-color .2s;
}
.ptd-input:focus { border-color:var(--pt-gold); background:white; }
.ptd-textarea { resize:vertical; min-height:66px; }
.ptd-input-hint { font-size:11px; color:#aaa; margin-top:4px; }

/* ── Font Buttons ────────────────────── */
.ptd-font-grid { display:flex; flex-wrap:wrap; gap:6px; }
.ptd-font-btn {
  padding:8px 12px; border:2px solid var(--pt-warm); border-radius:8px;
  background:white; cursor:pointer; font-size:13px; transition:all .2s; color:var(--pt-dark);
}
.ptd-font-btn:hover,.ptd-font-btn.active { border-color:var(--pt-gold); background:#fdf5e8; }

/* ── Emoji / Deco Buttons ────────────── */
.ptd-emoji-grid { display:flex; flex-wrap:wrap; gap:5px; }
.ptd-emoji-btn {
  width:36px; height:36px; border:2px solid var(--pt-warm); border-radius:8px;
  background:white; font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.ptd-emoji-btn:hover,.ptd-emoji-btn.active { border-color:var(--pt-gold); background:#fdf5e8; transform:scale(1.12); }

/* ── Pattern Buttons ─────────────────── */
.ptd-pattern-grid { display:flex; flex-wrap:wrap; gap:7px; }
.ptd-pattern-btn {
  width:52px; height:52px; border:3px solid var(--pt-warm); border-radius:10px;
  cursor:pointer; transition:all .2s; overflow:hidden; position:relative;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px;
}
.ptd-pattern-btn:hover,.ptd-pattern-btn.active { border-color:var(--pt-gold); transform:scale(1.08); }
.ptd-pattern-btn span { font-size:8px; color:white; text-shadow:0 1px 2px #000; font-weight:700; text-align:center; }

/* ── Label Style Buttons ─────────────── */
.ptd-label-style-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.ptd-label-style-btn {
  padding:10px 8px; border:2px solid var(--pt-warm); border-radius:10px;
  background:white; cursor:pointer; font-size:11.5px; font-weight:700; color:var(--pt-brown);
  transition:all .2s; text-align:center; display:flex; flex-direction:column; gap:4px; align-items:center;
}
.ptd-label-style-btn:hover,.ptd-label-style-btn.active { border-color:var(--pt-gold); background:var(--pt-cream); color:var(--pt-dark); }
.ptd-label-style-btn .style-preview { width:40px; height:28px; border-radius:4px; border:1px solid #ddd; }

/* ── Range Slider ────────────────────── */
.ptd-range {
  -webkit-appearance:none; width:100%; height:5px;
  border-radius:3px; background:var(--pt-warm); outline:none; margin:6px 0;
}
.ptd-range::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--pt-gold); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* ── AI Panel ────────────────────────── */
.ptd-ai-panel {
  background:linear-gradient(135deg,#1a0e08,#3d2010);
  border-radius:var(--pt-radius-sm); padding:18px; margin-bottom:12px;
}
.ptd-ai-panel .ptd-section-title { color:var(--pt-gold); border-color:rgba(201,169,110,.3); }
.ptd-ai-textarea {
  width:100%; padding:11px 13px; border:2px solid rgba(201,169,110,.35);
  border-radius:10px; background:rgba(255,255,255,.08); color:white;
  font-family:'Nunito',sans-serif; font-size:13px; resize:vertical; min-height:80px; outline:none;
}
.ptd-ai-textarea::placeholder { color:rgba(255,255,255,.35); }
.ptd-ai-textarea:focus { border-color:var(--pt-gold); }
.ptd-ai-hint { font-size:11px; color:rgba(255,255,255,.45); margin-top:5px; line-height:1.5; }
.ptd-ai-examples { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
.ptd-ai-example {
  padding:4px 10px; background:rgba(201,169,110,.15); color:var(--pt-gold-lt);
  border:1px solid rgba(201,169,110,.25); border-radius:20px; font-size:11px; cursor:pointer; transition:.2s;
}
.ptd-ai-example:hover { background:rgba(201,169,110,.3); }

.ptd-btn-ai {
  width:100%; padding:12px; margin-top:10px;
  background:linear-gradient(135deg,var(--pt-gold),#e8c47e);
  color:var(--pt-dark); border:none; border-radius:10px;
  font-family:'Nunito',sans-serif; font-size:14px; font-weight:800;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all .3s; box-shadow:0 4px 15px rgba(201,169,110,.4);
}
.ptd-btn-ai:hover { transform:translateY(-2px); box-shadow:0 7px 22px rgba(201,169,110,.55); }
.ptd-btn-ai:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.ptd-ai-result {
  margin-top:10px; padding:10px 13px;
  background:rgba(255,255,255,.07); border:1px solid rgba(201,169,110,.2);
  border-radius:8px; font-size:12px; color:rgba(255,255,255,.7); display:none;
  font-style:italic; line-height:1.5;
}
.ptd-ai-disabled-msg { color:rgba(255,255,255,.5); font-size:12px; margin-top:10px; line-height:1.5; }

/* ── Scene / Background Panel ────────── */
.ptd-scene-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ptd-scene-btn {
  border:3px solid var(--pt-warm); border-radius:var(--pt-radius-sm);
  cursor:pointer; overflow:hidden; position:relative; transition:all .2s;
  height:80px; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.ptd-scene-btn:hover,.ptd-scene-btn.active { border-color:var(--pt-gold); transform:scale(1.03); }
.ptd-scene-btn .scene-label {
  width:100%; padding:5px 8px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  color:white; font-size:11px; font-weight:700; text-align:center;
}
.ptd-upload-zone {
  border:2px dashed var(--pt-warm); border-radius:var(--pt-radius-sm);
  padding:18px; text-align:center; cursor:pointer; transition:all .2s;
  color:var(--pt-brown); font-size:13px; margin-top:8px;
}
.ptd-upload-zone:hover { border-color:var(--pt-gold); background:#fdf8f2; }
.ptd-upload-zone .upload-icon { font-size:28px; display:block; margin-bottom:6px; }
.ptd-upload-zone input { display:none; }

/* ── Preview Area ────────────────────── */
.ptd-preview-wrapper {
  background:var(--pt-cream); padding:28px;
  display:flex; flex-direction:column; align-items:center;
  position:relative; overflow:hidden;
}
.ptd-preview-label {
  font-family:'Playfair Display',serif; font-size:16px; color:var(--pt-brown);
  margin-bottom:18px; display:flex; align-items:center; gap:8px;
}

/* ── Scene Container ─────────────────── */
.ptd-scene-container {
  width:100%; max-width:560px; min-height:420px;
  border-radius:var(--pt-radius); overflow:hidden; position:relative;
  background:var(--pt-warm);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 40px var(--pt-shadow);
  transition:background .4s;
}
.ptd-scene-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:opacity .5s;
}
.ptd-scene-overlay { position:absolute; inset:0; background:rgba(0,0,0,.08); }
.ptd-product-in-scene { position:relative; z-index:10; }

/* ── CANDLE VISUAL ───────────────────── */
.candle-visual { position:relative; width:180px; }
.candle-flame-group { display:flex; justify-content:center; gap:4px; margin-bottom:2px; }
@keyframes flicker {
  0%,100%{ transform:scaleX(1) rotate(-1deg); }
  25%{ transform:scaleX(.93) rotate(1.5deg); }
  50%{ transform:scaleX(1.07) rotate(-.5deg); }
  75%{ transform:scaleX(.96) rotate(.8deg); }
}
@keyframes glowPulse {
  0%,100%{ box-shadow:0 0 14px #ff9800, 0 0 30px rgba(255,152,0,.4); }
  50%{ box-shadow:0 0 22px #ff9800, 0 0 50px rgba(255,152,0,.3); }
}
.candle-flame {
  width:18px; height:30px;
  background:linear-gradient(to top, #ff6600, #ff9800, #ffeb3b, #fff9c4);
  border-radius:50% 50% 30% 30%;
  animation:flicker 1.8s ease-in-out infinite, glowPulse 2.5s ease-in-out infinite;
}
.candle-wick { width:2px; height:12px; background:#2a1a0a; margin:0 auto; }
.candle-body {
  width:110px; min-height:200px; border-radius:10px 10px 7px 7px;
  margin:0 auto; position:relative; overflow:hidden;
  box-shadow:-6px 0 20px rgba(0,0,0,.18), inset 5px 0 14px rgba(255,255,255,.28), inset -3px 0 8px rgba(0,0,0,.1);
  transition:background .4s;
}
.candle-wax-top {
  position:absolute; top:0; left:0; right:0; height:22px;
  background:rgba(255,255,255,.2); border-radius:10px 10px 0 0;
}
.candle-label {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 8px 12px; gap:3px;
  transition:background .3s;
}
/* label styles */
.label-classic .candle-label { background:rgba(255,255,255,.93); }
.label-kraft .candle-label { background:rgba(210,180,140,.92); border-top:1px solid rgba(150,110,70,.3); }
.label-minimal .candle-label { background:rgba(255,255,255,.98); border-top:2px solid currentColor; }
.label-vintage .candle-label {
  background:rgba(245,235,215,.95);
  border-top:3px double rgba(120,80,40,.4);
  border-bottom:none;
}
.label-botanik .candle-label { background:rgba(235,245,235,.95); border-top:2px solid rgba(100,150,100,.4); }

.candle-label-badge {
  font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  background:var(--pt-gold); color:white; padding:2px 9px; border-radius:20px; margin-bottom:2px;
}
.candle-label-emoji { font-size:18px; line-height:1; }
.candle-label-deco { font-size:11px; color:var(--pt-gold); opacity:.7; }
.candle-label-text { font-size:11.5px; font-weight:700; color:var(--pt-dark); text-align:center; line-height:1.3; word-break:break-word; }
.candle-label-sub { font-size:9px; color:var(--pt-brown); text-align:center; }
.candle-label-brand { font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:#bbb; margin-top:3px; }

/* extra decorations on the candle body */
.candle-body-deco-wrap {
  position:absolute; top:0; left:0; right:0;
  height:calc(100% - 110px); /* above label */
  display:flex; align-items:center; justify-content:center; padding-top:16px;
}
.candle-body-emoji { font-size:32px; opacity:.55; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)); }

/* ── NOTEBOOK VISUAL ─────────────────── */
.notebook-wrap { position:relative; width:240px; }
.notebook-body {
  width:200px; height:280px; border-radius:4px 16px 16px 4px;
  position:relative; overflow:hidden;
  box-shadow:-10px 5px 25px rgba(0,0,0,.22), 2px 2px 0 rgba(0,0,0,.06);
  margin-left:28px; transition:background .4s;
}
.notebook-spine {
  position:absolute; left:-28px; top:0; width:28px; height:100%;
  background:rgba(0,0,0,.22); border-radius:4px 0 0 4px;
}
.notebook-spine-line {
  position:absolute; left:12px; top:0; bottom:0; width:1px; background:rgba(255,255,255,.12);
}
.notebook-rings-wrap {
  position:absolute; left:-34px; top:0; width:12px; height:100%;
  display:flex; flex-direction:column; justify-content:space-evenly; padding:18px 0;
}
.notebook-ring {
  width:12px; height:12px; border:2.5px solid #bbb; border-radius:50%;
  background:white; box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.notebook-cover {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:22px 14px; gap:7px;
}
.notebook-size-badge {
  background:rgba(255,255,255,.22); color:white; font-size:9.5px; font-weight:800;
  padding:3px 11px; border-radius:20px; border:1px solid rgba(255,255,255,.35);
  letter-spacing:.8px; text-transform:uppercase;
}
.notebook-cover-emoji { font-size:30px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.notebook-title { font-size:15px; font-weight:700; color:white; text-align:center; text-shadow:0 1px 4px rgba(0,0,0,.3); line-height:1.3; word-break:break-word; }
.notebook-sub { font-size:10px; color:rgba(255,255,255,.8); text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.2); }
.notebook-corner { position:absolute; top:12px; right:12px; width:26px; height:26px; border-top:2px solid rgba(255,255,255,.35); border-right:2px solid rgba(255,255,255,.35); border-radius:0 5px 0 0; }
.notebook-pages {
  position:absolute; right:-5px; top:10px; bottom:10px; width:8px;
  background:repeating-linear-gradient(to bottom, #f5f5f5 0px, #f5f5f5 3px, #e0e0e0 3px, #e0e0e0 4px);
  border-radius:0 3px 3px 0;
}

/* ── Buttons ─────────────────────────── */
.ptd-btn-primary {
  width:100%; padding:15px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:white; border:none; border-radius:12px;
  font-family:'Nunito',sans-serif; font-size:15px; font-weight:800;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px;
  transition:all .3s; margin-top:14px;
  box-shadow:0 4px 18px rgba(37,211,102,.38);
}
.ptd-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,.5); }
.ptd-btn-secondary {
  width:100%; padding:11px; margin-top:8px;
  background:var(--pt-cream); color:var(--pt-brown);
  border:2px solid var(--pt-warm); border-radius:12px;
  font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:.2s;
}
.ptd-btn-secondary:hover { border-color:var(--pt-brown); background:white; }

.ptd-note-box {
  background:#fffbf0; border:1.5px solid var(--pt-gold); border-radius:10px;
  padding:11px 14px; font-size:12.5px; color:var(--pt-brown); margin-bottom:14px; line-height:1.55;
}

.ptd-loading-bar {
  display:none; text-align:center; padding:14px;
  color:var(--pt-gold); font-size:13px;
  background:linear-gradient(135deg,#1a0e08,#3d2010);
  border-radius:10px; margin-top:10px;
}
.ptd-loading-bar.show { display:block; }
@keyframes dots { 0%{content:'.'}33%{content:'..'}66%{content:'...'}100%{content:'.'} }
.ptd-loading-dots::after { content:'.'; animation:dots 1.2s step-end infinite; }

/* ── AI Panel v2 ─────────────────────── */
.ptd-ai-mode-tabs {
  display:flex; gap:0; margin-bottom:14px;
  border:2px solid rgba(201,169,110,.3); border-radius:10px; overflow:hidden;
}
.ptd-ai-mode-btn {
  flex:1; padding:10px 8px;
  background:transparent; border:none; color:rgba(255,255,255,.5);
  font-family:'Nunito',sans-serif; font-size:12px; font-weight:700;
  cursor:pointer; transition:all .2s; text-align:center;
}
.ptd-ai-mode-btn:first-child { border-right:1px solid rgba(201,169,110,.25); }
.ptd-ai-mode-btn:hover { color:var(--pt-gold); background:rgba(201,169,110,.1); }
.ptd-ai-mode-btn.active { background:rgba(201,169,110,.2); color:var(--pt-gold); }

.ptd-ai-selections-summary {
  background:rgba(255,255,255,.06); border:1px solid rgba(201,169,110,.2);
  border-radius:10px; padding:12px 14px; margin-bottom:10px;
}
.ptd-ai-sum-row {
  display:flex; align-items:center; gap:7px; padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.05); font-size:12px; color:rgba(255,255,255,.7);
}
.ptd-ai-sum-row:last-child { border-bottom:none; }
.sum-icon { font-size:13px; width:18px; flex-shrink:0; }
.sum-label { color:rgba(255,255,255,.4); min-width:70px; flex-shrink:0; }
.ptd-ai-sum-row strong { color:rgba(255,255,255,.9); }
.sum-color-dot { display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,.2); flex-shrink:0; }

.ptd-ai-auto-block .ptd-ai-textarea { min-height:52px; }


.scene-candle-desk   { background:linear-gradient(160deg,#f7efe7 0%,#e8d8c4 60%,#d4b896 100%); }
.scene-candle-window { background:linear-gradient(180deg,#a8c8e8 0%,#dde8f0 40%,#f0ebe3 100%); }
.scene-candle-bath   { background:linear-gradient(135deg,#e8f4f8 0%,#d0eaef 100%); }
.scene-candle-night  { background:linear-gradient(180deg,#0f0a1e 0%,#1a1035 60%,#2d1a3a 100%); }

.scene-notebook-bag     { background:linear-gradient(160deg,#8b5e3c 0%,#a47048 60%,#6b4228 100%); }
.scene-notebook-desk    { background:linear-gradient(160deg,#deb887 0%,#c8a06a 60%,#b8905a 100%); }
.scene-notebook-school  { background:linear-gradient(135deg,#e8eef8 0%,#d8e4f0 100%); }
.scene-notebook-outdoor { background:linear-gradient(160deg,#7ab87a 0%,#5a9a5a 60%,#3a7a3a 100%); }

/* ── Realistic Scene Objects (CSS-drawn) ── */
.scene-desk-objects { position:absolute; bottom:0; left:0; right:0; height:45%; pointer-events:none; }

/* ── Responsive ──────────────────────── */
@media(max-width:620px){
  .ptd-header h2{ font-size:22px; }
  .ptd-preview-wrapper{ padding:16px; }
  .ptd-controls{ max-height:none; }
  .ptd-scene-container{ min-height:320px; }
  .candle-body{ width:90px; min-height:160px; }
  .notebook-body{ width:160px; height:230px; }
}

/* ── AI Generated Image Overlay ──────── */
.ptd-ai-img-overlay {
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:#0a0605;
  border-radius:var(--pt-radius);
  overflow:hidden;
}
.ptd-ai-generated-img {
  width:100%; height:100%; object-fit:contain;
  display:none;
  animation:fadeInImg .6s ease;
}
@keyframes fadeInImg {
  from{ opacity:0; transform:scale(.97); }
  to  { opacity:1; transform:scale(1); }
}
.ptd-ai-img-controls {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:30;
}
.ptd-ai-img-toggle {
  padding:9px 18px; border:none; border-radius:30px;
  background:rgba(201,169,110,.92); color:#2e1f14;
  font-family:'Nunito',sans-serif; font-size:13px; font-weight:800;
  cursor:pointer; transition:all .2s;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  backdrop-filter:blur(8px); white-space:nowrap;
}
.ptd-ai-img-toggle:hover { background:var(--pt-gold); transform:translateY(-2px); }
.ptd-ai-img-dismiss {
  width:36px; height:36px; border:none; border-radius:50%;
  background:rgba(0,0,0,.55); color:white;
  font-size:14px; cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.ptd-ai-img-dismiss:hover { background:rgba(220,50,50,.75); }
.ptd-ai-img-badge {
  position:absolute; top:12px; right:12px;
  background:linear-gradient(135deg,var(--pt-gold),#e8c47e);
  color:#2e1f14; font-size:11px; font-weight:800;
  padding:4px 12px; border-radius:20px;
  box-shadow:0 2px 10px rgba(201,169,110,.4);
  letter-spacing:.5px;
}

/* ── Preview States ───────────────────── */
.ptd-scene-container {
  position:relative;
  min-height:420px;
  border-radius:var(--pt-radius);
  overflow:hidden;
  background:#f5f0ea;
  box-shadow:0 8px 40px var(--pt-shadow);
  width:100%;
}

/* CTA State */
.ptd-preview-cta {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, #2e1f14 0%, #4a2e1a 50%, #2e1f14 100%);
}
.ptd-cta-inner {
  text-align:center; padding:32px 28px; max-width:360px;
}
.ptd-cta-icon {
  font-size:52px; margin-bottom:16px;
  filter:drop-shadow(0 4px 16px rgba(201,169,110,.4));
  animation:floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
.ptd-cta-title {
  font-family:'Playfair Display',serif;
  font-size:22px; font-style:italic;
  color:var(--pt-gold); margin:0 0 12px;
  text-shadow:0 2px 12px rgba(201,169,110,.4);
}
.ptd-cta-desc {
  color:rgba(255,255,255,.6); font-size:13.5px; line-height:1.65;
  margin:0 0 22px;
}
.ptd-cta-desc strong { color:rgba(255,255,255,.85); }
.ptd-cta-shortcut {
  display:inline-block; padding:12px 28px;
  background:linear-gradient(135deg,var(--pt-gold),#e8c47e);
  color:#2e1f14; border:none; border-radius:30px;
  font-family:'Nunito',sans-serif; font-size:14px; font-weight:800;
  cursor:pointer; transition:all .3s;
  box-shadow:0 4px 20px rgba(201,169,110,.45);
  margin-bottom:20px;
}
.ptd-cta-shortcut:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(201,169,110,.6); }
.ptd-cta-steps {
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  font-size:11px; color:rgba(255,255,255,.35);
}
.cta-arrow { color:rgba(201,169,110,.5); font-size:14px; }

/* Loading State */
.ptd-preview-loading {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, #1a0e08 0%, #2e1a0e 100%);
}
.ptd-loading-inner { text-align:center; }
.ptd-spinner {
  width:52px; height:52px; margin:0 auto 20px;
  border:3px solid rgba(201,169,110,.2);
  border-top-color:var(--pt-gold);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin { to{ transform:rotate(360deg); } }
.ptd-loading-title {
  font-family:'Playfair Display',serif;
  font-size:18px; color:var(--pt-gold); margin-bottom:8px;
}
.ptd-loading-sub { font-size:13px; color:rgba(255,255,255,.45); max-width:260px; margin:0 auto; line-height:1.5; }

/* Result State */
.ptd-preview-result {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}
.ptd-result-img {
  width:100%; height:100%; object-fit:contain;
  animation:fadeInImg .7s ease;
}
.ptd-result-controls {
  position:absolute; bottom:14px; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.ptd-result-btn-new {
  padding:9px 20px; border:none; border-radius:30px;
  background:rgba(255,255,255,.15); color:white;
  font-family:'Nunito',sans-serif; font-size:13px; font-weight:700;
  cursor:pointer; backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  transition:all .2s;
}
.ptd-result-btn-new:hover { background:rgba(255,255,255,.25); transform:translateY(-2px); }
.ptd-result-badge {
  background:linear-gradient(135deg,var(--pt-gold),#e8c47e);
  color:#2e1f14; font-size:11px; font-weight:800;
  padding:5px 13px; border-radius:20px;
  box-shadow:0 2px 10px rgba(201,169,110,.4);
  letter-spacing:.5px;
}