/* =========================================================
   Atlas Oto Kokusu — Tasarım Merkezi (konfigüratör)
   style.css değişkenlerini kullanır; light/dark uyumlu.
   ========================================================= */

/* Tasarım merkezi tam genişlik (fluid): header–footer arası tüm alanı kullanır */
.config-wrap {
  width: 100%;
  padding: 1.5rem clamp(1.2rem, 3vw, 3rem) 3rem;
}
/* Sekmeler */
.cfg-tabs {
  display: flex; align-items: center; gap: 2px; width: 100%; overflow: hidden;
  background: var(--bg-soft-2); border: 1px solid var(--line);
  border-radius: 100px; padding: 3px; margin-bottom: 1.2rem;
}
.cfg-tab {
  min-width: 0; flex: 1 1 auto; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: .48rem .42rem; border-radius: 100px; font-weight: 600; font-size: .85rem;
  transition: all .2s var(--ease); white-space: nowrap;
}
.cfg-tab:hover { color: var(--text); }
.cfg-tab.active { background: var(--accent); color: var(--accent-ink); }
.cfg-tab.soon { opacity: .5; cursor: not-allowed; }
.cfg-tab.soon::after { content: " (yakında)"; font-size: .72rem; font-weight: 500; }

/* Ana ızgara: sol panel | canvas | sağ panel */
.cfg-grid {
  display: grid; grid-template-columns: minmax(420px, 620px) minmax(0, 1fr);
  gap: 1.2rem; align-items: start;
}
.cfg-grid > *, .cfg-canvas-col, .cfg-card { min-width: 0; }
@media (max-width: 1100px) { .cfg-grid { grid-template-columns: 1fr; } .cfg-canvas-col { grid-column: auto; order: -1; } }
@media (max-width: 720px)  { .cfg-grid { grid-template-columns: 1fr; } }

.cfg-card {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem;
}
.cfg-card h3 { font-size: 1.02rem; margin-bottom: .9rem; }
.cfg-card h3 .sub { font-weight: 400; color: var(--muted); font-size: .82rem; }

/* Sekme panelleri */
.cfg-pane { display: none; }
.cfg-pane.active { display: block; }

/* --- Şekil galerisi --- */
.shape-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.shape-btn {
  aspect-ratio: 1; background: var(--bg-soft-2); border: 2px solid var(--line);
  border-radius: 10px; cursor: pointer; display: grid; place-items: center;
  padding: .5rem; transition: border-color .2s, transform .15s;
}
.shape-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.shape-btn.active { border-color: var(--accent); }
.shape-btn svg { width: 100%; height: 100%; }
.shape-btn svg * { fill: var(--text); }
@media (max-width: 720px) { .shape-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .shape-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Renk seçici --- */
.color-section { margin-top: 1.2rem; }
.swatch-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.swatch {
  aspect-ratio: 1; border-radius: 4px; cursor: pointer; border: 1px solid rgba(128,128,128,.25);
  transition: transform .12s;
}
.swatch:hover { transform: scale(1.18); z-index: 2; position: relative; }
.swatch.active { outline: 2px solid var(--accent); outline-offset: 1px; }
.color-custom { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.color-custom input[type=color] { width: 42px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.color-custom label { font-size: .85rem; color: var(--muted); }
.color-custom .color-hex-input{width:102px;margin-left:auto;padding:.48rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft-2);color:var(--text);font:600 .82rem/1.2 monospace;text-transform:uppercase;outline:0}
.color-custom .color-hex-input:focus{border-color:var(--accent)}
.color-custom .color-hex-input.invalid{border-color:#d6453b;color:#d6453b}
.gradient-direction-field{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.9rem}
.gradient-direction-field>span{color:var(--muted);font-size:.82rem}
.gradient-directions{display:grid;grid-template-columns:repeat(8,34px);gap:5px}
.gradient-direction{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft-2);color:var(--muted);font-size:1rem;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.gradient-direction:hover{border-color:var(--accent);color:var(--accent)}
.gradient-direction.active{border-color:var(--accent);background:var(--accent);color:#fff}
@media(max-width:520px){.gradient-direction-field{align-items:flex-start;flex-direction:column}.gradient-directions{grid-template-columns:repeat(8,1fr);width:100%}.gradient-direction{width:100%}}

/* --- Metin paneli --- */
.cfg-field { margin-bottom: .9rem; }
.cfg-field label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .35rem; }
.cfg-field input, .cfg-field select, .cfg-field textarea {
  width: 100%; padding: .6rem .8rem; border-radius: 10px;
  background: var(--bg-soft-2); border: 1px solid var(--line); color: var(--text); font-size: .92rem;
}
.cfg-field input:focus, .cfg-field select:focus { outline: none; border-color: var(--accent); }
.cfg-row { display: flex; gap: .6rem; }
.cfg-row > * { flex: 1; }

/* --- Kategorili koku seçici --- */
.fragrance-picker{position:relative}
.fragrance-trigger{display:grid;width:100%;grid-template-columns:1fr auto auto;align-items:center;gap:.6rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft-2);color:var(--text);text-align:left}
.fragrance-trigger small{color:var(--accent);font-size:.75rem;font-weight:600}
.fragrance-trigger i{font-size:18px;transition:transform .2s ease}
.fragrance-picker.open .fragrance-trigger{border-color:var(--accent)}
.fragrance-picker.open .fragrance-trigger i{transform:rotate(180deg)}
.fragrance-panel{position:absolute;z-index:45;top:calc(100% + 8px);left:0;display:none;width:min(580px,calc(100vw - 48px));padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);box-shadow:var(--shadow)}
.fragrance-picker.open .fragrance-panel{display:block}
.fragrance-group+.fragrance-group{margin-top:18px}
.fragrance-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.fragrance-group-header strong{font-size:.88rem}
.fragrance-group-header span{color:var(--muted);font-size:.76rem}
.fragrance-options{display:flex;flex-wrap:wrap;gap:8px}
.fragrance-option{padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg-soft);color:var(--text);font-size:.83rem}
.fragrance-option:hover,.fragrance-option.active{border-color:var(--accent);color:var(--accent)}

.quantity-picker{position:relative}
.quantity-trigger{display:grid;width:100%;grid-template-columns:1fr auto auto;align-items:center;gap:.6rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft-2);color:var(--text);text-align:left}
.quantity-trigger small{color:var(--accent);font-size:.75rem;font-weight:600}
.quantity-trigger i{font-size:18px;transition:transform .2s ease}
.quantity-picker.open .quantity-trigger{border-color:var(--accent)}
.quantity-picker.open .quantity-trigger i{transform:rotate(180deg)}
.quantity-panel{position:absolute;z-index:44;top:calc(100% + 8px);left:0;display:none;width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);box-shadow:var(--shadow)}
.quantity-picker.open .quantity-panel{display:block}
.quantity-options{display:grid;gap:8px}
.quantity-option{display:grid;width:100%;grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg-soft);color:var(--text);text-align:left}
.quantity-option strong{font-size:.9rem}
.quantity-option small{min-width:90px;color:var(--muted);text-align:right}
.quantity-option:hover,.quantity-option.active{border-color:var(--accent)}
.quantity-option.active{color:var(--accent)}
.quantity-option.active small{color:var(--text)}
@media(max-width:480px){.quantity-option{grid-template-columns:1fr auto;gap:8px}.quantity-option small{grid-column:1/-1;min-width:0;text-align:left}}

/* --- Canvas alanı --- */
.cfg-canvas-col { display: flex; flex-direction: column; gap: 1rem; }
.size-info { color: var(--muted); font-size: .9rem; }
.size-info b { color: var(--text); }

.face-switch { display: inline-flex; background: var(--bg-soft-2); border: 1px solid var(--line); border-radius: 100px; padding: 3px; }
.face-switch button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: .45rem 1.1rem; border-radius: 100px; font-weight: 600; font-size: .85rem; transition: all .2s;
}
.face-switch button.active { background: var(--accent); color: #fff; }

/* Hangi yüzün tasarlandığını net gösteren bant */
.face-banner {
  display: flex; align-items: center; gap: .5rem; justify-content: center;
  margin: .9rem 0; font-size: .85rem; font-weight: 600; color: var(--muted);
}
.face-banner .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(252,87,97,.18); }
.face-banner.is-back { color: var(--accent-2); }
.face-banner.is-back .dot { background: var(--accent-2); box-shadow: 0 0 0 4px rgba(90,209,200,.18); }

.canvas-stage {
  /* Çalışma alanı her iki temada da açık gri (beyaz ürün şekli net görünsün) */
  background: #e9ebee; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; display: flex; justify-content: center; align-items: center;
  min-height: 360px; overflow: hidden;
  position:relative;transform-origin: center;
}
.canvas-face-switch{position:absolute;z-index:12;top:18px;left:18px;box-shadow:0 8px 24px rgba(16,21,34,.1)}
@media(max-width:620px){.canvas-face-switch{top:10px;left:10px}.canvas-face-switch button{padding:.4rem .75rem}}
.canvas-stage.is-face-flipping{pointer-events:none;animation:face-flip-2d .46s cubic-bezier(.4,0,.2,1)}
@keyframes face-flip-2d{
  0%{transform:scaleX(1);filter:brightness(1)}
  46%{transform:scaleX(.02);filter:brightness(.92)}
  54%{transform:scaleX(.02);filter:brightness(.92)}
  100%{transform:scaleX(1);filter:brightness(1)}
}
/* Fabric, canvas'ı .canvas-container içine sarar; bunu kapsayıcıya sığdır.
   JS, internal çözünürlüğü koruyup display boyutunu küçültür (pointer koordinatları senkron kalır). */
.canvas-stage .canvas-container { max-width: 100%; min-width: 0; }
.canvas-stage canvas { border-radius: 8px; }
#cfg-canvas-box { box-shadow: var(--shadow); border-radius: 8px; }
@media(prefers-reduced-motion:reduce){.canvas-stage.is-face-flipping{animation:none}}

.canvas-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }

@media (max-width: 620px) {
  .config-wrap { padding: 1rem .75rem 2rem; overflow: hidden; }
  .cfg-card { width: 100%; padding: .75rem; }
  .canvas-stage { width: 100%; min-height: 260px; padding: .65rem; }
  .obj-toolbar { min-width: 0; padding: .65rem; flex-wrap: wrap; gap: .55rem; }
  .obj-toolbar > .size-info { min-width: 0; flex-wrap: wrap; }
  .obj-toolbar-empty { display: none; }
  .canvas-actions { gap: .4rem; }
  .canvas-actions .btn { flex: 1 1 auto; padding: .7rem .8rem; }
}

.hint { color: var(--muted); font-size: .82rem; text-align: center; max-width: 54ch; margin: 0 auto; }
.hint .red { color: #e0556a; font-weight: 600; }

/* Kesim alanı açıklaması (legend) */
.cut-legend { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.cut-legend .lg-item { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--muted); }
.cut-legend .lg-line { width: 22px; height: 0; border-top: 2px dashed currentColor; display: inline-block; }
.cut-legend .lg-line.red { color: #e0556a; }
.cut-legend .lg-line.blue { color: #5b7cfa; }

/* --- Boyut düzenleme --- */
.size-info { color: var(--muted); font-size: .9rem; line-height: 1.35; }
.size-edit-btn {
  display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0;
  color: var(--text); cursor: pointer; padding: 0; font: inherit;
}
.size-edit-btn b { font-size: 1rem; }
.size-edit-btn svg { width: 14px; height: 14px; color: var(--muted); }
.size-edit-btn:hover svg { color: var(--accent); }
.size-editor {
  background: var(--bg-soft-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem; margin: .9rem 0;
}
.size-preset {
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--muted);
  border-radius: 100px; padding: .2rem .6rem; font-size: .76rem; cursor: pointer; margin: 0 .15rem;
}
.size-preset:hover { border-color: var(--accent); color: var(--accent); }

/* --- Seçili obje araç çubuğu (preview üstünde, yatay) --- */
.obj-toolbar {
  background: var(--bg-soft-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .7rem .9rem; margin: 0 0 .9rem; min-height: 50px; display: flex; align-items: center;
}
.obj-toolbar>.size-info{display:flex;align-items:center;gap:.45rem;flex-shrink:0;margin-right:auto}
.obj-toolbar-empty { color: var(--muted); font-size: .85rem; }
.obj-controls { display: none; width: auto; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.obj-controls.show { display: flex; }
.obj-controls.show + .obj-toolbar-empty,
.obj-toolbar .obj-controls.show ~ .obj-toolbar-empty { display: none; }
.tool-group { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 150px; }
.tool-group label { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.tool-group input[type=range] { flex: 1; accent-color: var(--accent); min-width: 70px; }
.tool-val { font-size: .8rem; color: var(--muted); min-width: 36px; text-align: right; }
.tool-icons { display: flex; gap: .4rem; flex-wrap: wrap; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--text); cursor: pointer; display: grid; place-items: center;
  transition: all .2s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn:disabled{cursor:not-allowed;opacity:.35;border-color:var(--border);color:inherit;transform:none}
.icon-btn svg { width: 17px; height: 17px; }
.btn-del { background: #d6453b; color: #fff; border-color: #d6453b; }
.btn-del:hover { background: #b8392f; color: #fff; }

/* --- Katman (layer) listesi --- */
.layer-list { display: flex; flex-direction: column; gap: .5rem; }
.layer-item {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem;
  background: var(--bg-soft-2); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.layer-item:hover { border-color: var(--accent); }
.layer-item.active { border-color: var(--accent); background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.layer-item .lyr-ico {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--bg-soft); color: var(--accent);
}
.layer-item .lyr-ico svg { width: 16px; height: 16px; }
.layer-item .lyr-name { flex: 1; font-size: .85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-item .lyr-actions { display: flex; gap: .25rem; }
.layer-item .lyr-btn {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.layer-item .lyr-btn:hover { color: var(--accent); border-color: var(--accent); }
.layer-item .lyr-btn.del:hover { color: #fff; background: #d6453b; border-color: #d6453b; }
.layer-item .lyr-btn svg { width: 14px; height: 14px; }
.layer-item.locked { opacity: .75; }
.layer-empty { color: var(--muted); font-size: .85rem; }

/* --- Sipariş alt bandı --- */
.order-bottom { margin-top: 1.2rem; }
.order-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end;
}
.order-grid .order-prices,.order-grid .order-action{grid-column:1/-1}
.order-grid .order-prices { align-self: center; }
.order-grid .order-action{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.order-grid .order-action .btn { width: 100%; min-height:58px; padding-inline:.8rem; gap:.65rem; box-shadow:0 10px 24px -14px rgba(16,21,34,.45); }
.order-grid .order-action .btn i{font-size:1.35rem;line-height:1}
.order-grid .order-action .btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(16,21,34,.55)}
.order-grid .order-action .btn-wpp{background:#25d366;color:#fff}
.order-grid .order-action .btn-wpp:hover{background:#20c45e;color:#fff}
.order-grid .order-action .qty-breaks{grid-column:1/-1}
@media (max-width: 980px) { .order-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .order-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .order-grid .order-action{grid-template-columns:1fr} .order-grid .order-action .qty-breaks{grid-column:auto} }

/* --- Sağ panel: sipariş --- */
.order-card .price-row { display: flex; justify-content: space-between; align-items: baseline; margin: .6rem 0; }
.order-card .price-row .lbl { color: var(--muted); font-size: .9rem; }
.order-card .price-row .val { font-size: 1.05rem; font-weight: 600; color: var(--accent-2); }
.order-card .total .val { font-size: 1.5rem; color: var(--accent); }
.order-card hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.order-card .btn { width: 100%; }
.qty-input { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qty-input button { width: 40px; border: 0; background: var(--bg-soft-2); color: var(--text); font-size: 1.2rem; cursor: pointer; }
.qty-input input { flex: 1; text-align: center; border: 0; background: var(--bg-soft); color: var(--text); font-size: 1rem; }
.qty-breaks { font-size: .78rem; color: var(--muted); margin-top: .5rem; text-align: center; }

/* --- Görsel yükleme alanı --- */
.img-drop {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 2rem 1rem;
  text-align: center; cursor: pointer; transition: border-color .2s, background .2s;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.img-drop:hover, .img-drop.over { border-color: var(--accent); background: var(--bg-soft-2); }
.img-drop svg { width: 40px; height: 40px; color: var(--accent); }
.img-drop p { font-size: .92rem; }
.img-drop span { font-size: .78rem; color: var(--muted); }

/* Toast (sepete eklendi bildirimi) */
.cfg-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(calc(100% + 48px));
  background: var(--bg-soft); border: 1px solid var(--accent); color: var(--text);
  padding: .9rem 1.4rem; border-radius: 100px; box-shadow: var(--shadow);
  z-index: 80; opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .35s var(--ease),opacity .25s ease,visibility .25s ease; font-weight: 600;
}
.cfg-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }

/* --- Fiyat teklifi popup --- */
.quote-modal{position:fixed;z-index:120;inset:0;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.quote-modal.open{opacity:1;visibility:visible}
.quote-modal-backdrop{position:absolute;inset:0;background:rgba(8,13,22,.68);backdrop-filter:blur(6px)}
.quote-modal-dialog{position:relative;width:min(680px,100%);max-height:calc(100vh - 48px);overflow-y:auto;padding:34px;border:1px solid var(--line);border-radius:16px;background:var(--bg-soft);box-shadow:0 30px 80px rgba(0,0,0,.3);transform:translateY(18px) scale(.98);transition:transform .25s ease}
.quote-modal.open .quote-modal-dialog{transform:none}
.quote-modal-dialog h2{margin:.6rem 40px .65rem 0;font-size:clamp(1.5rem,3vw,2rem)}
.quote-modal-dialog>p{margin-bottom:1.4rem;color:var(--muted)}
.quote-modal-close{position:absolute;top:18px;right:18px;display:grid;width:40px;height:40px;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--bg-soft-2);color:var(--text);font-size:22px}
.quote-modal-close:hover{border-color:var(--accent);color:var(--accent)}
.quote-form{display:grid;gap:16px}
.quote-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quote-form label{display:block;color:var(--text);font-size:.83rem;font-weight:600}
.quote-form input,.quote-form textarea{display:block;width:100%;margin-top:7px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft-2);color:var(--text);outline:0}
.quote-form input:focus,.quote-form textarea:focus{border-color:var(--accent)}
.quote-form textarea{resize:vertical}
.quote-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.quote-form-status{min-height:1.4em;margin:0;color:var(--muted);font-size:.83rem}
.quote-form-status.error{color:#d6453b}
.quote-form-status.success{color:#20a758}
.quote-form .btn{justify-self:end;min-width:250px}
.quote-form .btn:disabled{cursor:wait;opacity:.65;transform:none}
.quote-success{padding:24px 0 4px;text-align:center}
.quote-success[hidden]{display:none}
.quote-success-icon{display:grid;width:72px;height:72px;margin:0 auto 18px;place-items:center;border-radius:50%;background:rgba(37,211,102,.14);color:#20b85a;font-size:38px}
.quote-success h3{margin:0 0 8px;font-size:1.35rem}
.quote-success p{margin:0 0 22px;color:var(--muted)}
.quote-success .btn{min-width:180px}
body.quote-modal-open{overflow:hidden}
@media(max-width:620px){.quote-modal{padding:14px}.quote-modal-dialog{padding:25px 20px}.quote-form-row{grid-template-columns:1fr}.quote-form .btn{width:100%;min-width:0}}

/* Tasarım önizleme popup'ı */
.preview-modal{position:fixed;z-index:125;inset:0;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.preview-modal.open{opacity:1;visibility:visible}
.preview-modal-backdrop{position:absolute;inset:0;background:rgba(8,13,22,.76);backdrop-filter:blur(7px)}
.preview-modal-dialog{position:relative;display:grid;width:min(760px,100%);max-height:calc(100vh - 48px);gap:18px;justify-items:center;overflow-y:auto;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--bg-soft);box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(18px) scale(.98);transition:transform .25s ease}
.preview-modal.open .preview-modal-dialog{transform:none}
.preview-modal-dialog h2{width:100%;margin:0;padding-right:45px;font-size:clamp(1.25rem,3vw,1.7rem)}
.preview-modal-close{position:absolute;top:18px;right:18px;display:grid;width:40px;height:40px;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--bg-soft-2);color:var(--text);font-size:22px}
.preview-modal-close:hover{border-color:var(--accent);color:var(--accent)}
.preview-modal-image{display:grid;width:100%;min-height:260px;place-items:center;padding:20px;border-radius:12px;background:#e9ebee}
.preview-modal-image img{display:block;max-width:100%;max-height:65vh;border-radius:8px;box-shadow:0 14px 38px rgba(16,21,34,.2)}
.preview-modal-dialog>.btn{min-width:160px}
@media(max-width:620px){.preview-modal{padding:12px}.preview-modal-dialog{padding:22px 16px}.preview-modal-image{min-height:200px;padding:12px}}