/* ═══════════════════════════════════════════════════════════════
   Material Studio — Shared Design System
   ═══════════════════════════════════════════════════════════════ */

/* ── Light mode (default) ────────────────────────────────────── */
:root {
  --bg:       #f4f4f8;
  --bg2:      #edeef5;
  --card:     #ffffff;
  --surface:  #e6e7f0;
  --border:   rgba(0,0,0,.08);
  --border2:  rgba(0,0,0,.14);
  --accent:   #2a9a6c;
  --acc-dark: #1f7a53;
  --acc-grd:  linear-gradient(135deg,#2a9a6c,#4eca8e);
  --gold:     #f5a623;
  --text:     #18181f;
  --text2:    #5a5a72;
  --muted:    #8888a0;
  --success:  #0cb980;
  --danger:   #e04545;
  --r:        12px;
  --r-lg:     20px;
  --r-xl:     32px;
  --shadow:   0 12px 48px rgba(0,0,0,.10);
  --shadow-sm:0 4px 16px rgba(0,0,0,.07);
  --glow:     0 0 48px rgba(42,154,108,.12);
  --max-w:    1380px;
  --hh:       68px;
  /* theme-adaptive */
  --header-bg:   rgba(244,244,248,.88);
  --header-bg-s: rgba(244,244,248,.98);
  --nav-hover:   rgba(0,0,0,.05);
  --ghost-bg:    rgba(0,0,0,.05);
  --ghost-hover: rgba(0,0,0,.09);
  --toast-ok-bg:  #f0fdf8; --toast-ok-b:rgba(12,185,128,.3);  --toast-ok-c: #0a7a50;
  --toast-er-bg:  #fdf1f1; --toast-er-b:rgba(224,69,69,.3);   --toast-er-c: #b82020;
  --toast-in-bg:  #edfbf4; --toast-in-b:rgba(42,154,108,.3);  --toast-in-c: #1a7a53;
}

/* ── Dark mode ───────────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:       #080808;
  --bg2:      #0e0e0f;
  --card:     #131315;
  --surface:  #1a1a1e;
  --border:   rgba(255,255,255,.07);
  --border2:  rgba(255,255,255,.12);
  --text:     #f2f2f5;
  --text2:    #9a9aaa;
  --muted:    #555560;
  --success:  #34d399;
  --danger:   #f87171;
  --shadow:   0 12px 48px rgba(0,0,0,.55);
  --shadow-sm:0 4px 16px rgba(0,0,0,.4);
  --glow:     0 0 48px rgba(42,154,108,.18);
  --header-bg:   rgba(8,8,8,.8);
  --header-bg-s: rgba(8,8,8,.95);
  --nav-hover:   rgba(255,255,255,.06);
  --ghost-bg:    rgba(255,255,255,.06);
  --ghost-hover: rgba(255,255,255,.1);
  --toast-ok-bg:  #0a2820; --toast-ok-b:rgba(52,211,153,.3);  --toast-ok-c: #34d399;
  --toast-er-bg:  #200a0a; --toast-er-b:rgba(248,113,113,.3); --toast-er-c: #f87171;
  --toast-in-bg:  #0a2318; --toast-in-b:rgba(42,154,108,.3);  --toast-in-c: #4eca8e;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Assistant',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
img { display:block; max-width:100%; }
a  { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* ── Typography ─────────────────────────────────────────────── */
h1 { font-size:clamp(2.2rem,5vw,3.6rem); font-weight:800; line-height:1.08; letter-spacing:-.03em; }
h2 { font-size:clamp(1.4rem,3vw,2rem);   font-weight:700; line-height:1.2;  letter-spacing:-.02em; }
h3 { font-size:1.1rem; font-weight:600; }
p  { line-height:1.65; color:var(--text2); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px; border-radius:var(--r); border:none;
  font-size:.9rem; font-weight:600; letter-spacing:.01em;
  transition:all .2s; white-space:nowrap;
}
.btn:active { transform:scale(.97); }
.btn-primary {
  background:var(--acc-grd); color:#fff;
  box-shadow:0 4px 20px rgba(42,154,108,.35);
}
.btn-primary:hover { box-shadow:0 6px 28px rgba(42,154,108,.5); transform:translateY(-1px); }
.btn-outline {
  background:transparent; color:var(--text);
  border:1px solid var(--border2);
}
.btn-outline:hover { background:var(--surface); border-color:var(--border2); }
.btn-ghost {
  background:var(--ghost-bg); color:var(--text2);
  border:1px solid var(--border);
}
.btn-ghost:hover { background:var(--ghost-hover); color:var(--text); }
.btn-lg { padding:16px 34px; font-size:1rem; border-radius:var(--r-lg); }
.btn-sm { padding:8px 16px; font-size:.8rem; border-radius:8px; }
.btn-icon { padding:10px; width:40px; height:40px; border-radius:10px; }

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--hh);
  display:flex; align-items:center;
  padding:0 clamp(16px,4vw,40px);
  background:var(--header-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:background .3s;
}
.site-header.scrolled { background:var(--header-bg-s); }
.header-inner {
  width:100%; max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; gap:32px;
}
.logo {
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.05rem; flex-shrink:0;
}
.logo-img {
  height:48px; width:auto; object-fit:contain; display:block;
}
.logo-text { letter-spacing:-.01em; }
.logo-text em { color:var(--accent); font-style:normal; }

.header-nav { display:flex; gap:4px; flex:1; }
.nav-link {
  padding:7px 14px; border-radius:8px;
  font-size:.875rem; font-weight:500; color:var(--text2);
  background:none; border:none; transition:all .2s;
}
.nav-link:hover,.nav-link.active { color:var(--text); background:var(--nav-hover); }

.header-actions { display:flex; align-items:center; gap:10px; margin-right:auto; }
html:not([dir="rtl"]) .header-actions { margin-left:auto; margin-right:0; }
.admin-link {
  font-size:.75rem; color:var(--muted); padding:6px 12px;
  border:1px solid var(--border); border-radius:8px; transition:all .2s;
}
.admin-link:hover { color:var(--text2); border-color:var(--border2); }
.theme-toggle {
  width:34px; height:34px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border2);
  color:var(--text2); font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s; flex-shrink:0;
}
.theme-toggle:hover { background:var(--card); color:var(--text); }

/* ── Page wrapper ────────────────────────────────────────────── */
.page-wrap { padding-top:var(--hh); }

/* ── Section ─────────────────────────────────────────────────── */
.section { padding:60px clamp(16px,4vw,40px); max-width:var(--max-w); margin:0 auto; }
.section-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:28px; gap:16px;
}
.section-title { }
.section-sub { font-size:.875rem; color:var(--text2); margin-top:4px; font-weight:400; }
.view-all {
  font-size:.85rem; font-weight:600; color:var(--accent);
  display:flex; align-items:center; gap:4px; flex-shrink:0;
  transition:gap .2s;
}
.view-all:hover { gap:8px; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  padding:32px clamp(16px,4vw,40px) 28px;
  background:var(--bg2);
}
.hero-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 70% 50%, rgba(42,154,108,.10) 0%, transparent 70%);
  pointer-events:none;
}
.hero-grid {
  position:absolute; inset:0; opacity:.04;
  background-image:linear-gradient(var(--border2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border2) 1px,transparent 1px);
  background-size:50px 50px;
  pointer-events:none;
}
.hero-inner { position:relative; max-width:var(--max-w); margin:0 auto; width:100%; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 12px; border-radius:20px;
  background:rgba(42,154,108,.12); border:1px solid rgba(42,154,108,.25);
  font-size:.72rem; font-weight:600; color:var(--accent);
  margin-bottom:10px; letter-spacing:.04em; text-transform:uppercase;
}
.hero h1 { max-width:640px; font-size:clamp(1.6rem,4vw,2.6rem); }
.hero h1 .accent { background:var(--acc-grd); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { font-size:.95rem; max-width:480px; margin-top:8px; color:var(--text2); }
.hero-cta { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.hero-stats {
  display:flex; gap:28px; margin-top:20px; padding-top:16px;
  border-top:1px solid var(--border);
}
.hero-stat-val { font-size:1.25rem; font-weight:800; line-height:1; }
.hero-stat-lbl { font-size:.75rem; color:var(--text2); margin-top:3px; }

/* ── Category section ────────────────────────────────────────── */
.cat-section { padding:48px 0; border-top:1px solid var(--border); }
.cat-section:first-child { border-top:none; }
.cat-section-inner { max-width:var(--max-w); margin:0 auto; padding:0 clamp(16px,4vw,40px); }

/* Slider wrapper */
.slider-outer { position:relative; margin-top:4px; }
.slider-track {
  display:flex; gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:16px 0 20px;
}
.slider-track::-webkit-scrollbar { height:3px; }
.slider-track::-webkit-scrollbar-thumb { background:var(--surface); border-radius:3px; }

/* Fade edges */
.slider-outer::before,
.slider-outer::after {
  content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.slider-outer::before { left:0;  background:linear-gradient(90deg,var(--bg),transparent); }
.slider-outer::after  { right:0; background:linear-gradient(-90deg,var(--bg),transparent); }

/* Arrow buttons */
.slider-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3; width:40px; height:40px; border-radius:50%;
  background:var(--card); border:1px solid var(--border2);
  color:var(--text); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; box-shadow:var(--shadow-sm);
  opacity:0;
}
.slider-outer:hover .slider-arrow { opacity:1; }
.slider-arrow:hover { background:var(--accent); border-color:var(--accent); }
.slider-arrow:disabled { opacity:0 !important; pointer-events:none; }
.arrow-prev { left:8px; }
.arrow-next { right:8px; }

/* ── Material card ───────────────────────────────────────────── */
.mat-card {
  flex-shrink:0;
  width:clamp(180px,22vw,240px);
  scroll-snap-align:start;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  cursor:pointer;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  position:relative;
}
.mat-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow), var(--glow);
  border-color:rgba(42,154,108,.3);
}
.mat-card-img-wrap {
  position:relative; aspect-ratio:1;
  overflow:hidden; background:var(--surface);
}
.mat-card-img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s;
}
.mat-card:hover .mat-card-img { transform:scale(1.07); }

/* Hover overlay */
.mat-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%);
  opacity:0; transition:opacity .25s;
  display:flex; align-items:flex-end; justify-content:center;
  padding:16px;
}
.mat-card:hover .mat-card-overlay { opacity:1; }
.overlay-try {
  padding:9px 22px; border-radius:var(--r); background:var(--acc-grd);
  color:#fff; font-size:.82rem; font-weight:700; border:none;
  letter-spacing:.03em; pointer-events:none;
}

.mat-card-info { padding:14px 16px; }
.mat-card-name {
  font-size:.9rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mat-card-meta {
  display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap;
}
.cat-pill {
  font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 8px; border-radius:20px;
  background:rgba(42,154,108,.15); color:var(--accent);
}
.size-pill { font-size:.75rem; color:var(--muted); }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  text-align:center; padding:64px 24px; color:var(--text2);
}
.empty-icon { font-size:3rem; margin-bottom:16px; opacity:.4; }
.empty-text { font-size:.95rem; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  border-top:1px solid var(--border);
  padding:32px clamp(16px,4vw,40px);
  margin-top:40px;
}
.footer-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.footer-copy { font-size:.8rem; color:var(--muted); }

/* ── Product page ────────────────────────────────────────────── */
.product-wrap {
  max-width:var(--max-w); margin:0 auto;
  padding:40px clamp(16px,4vw,40px) 80px;
}
.back-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.85rem; color:var(--text2); margin-bottom:32px;
  transition:color .2s;
}
.back-link:hover { color:var(--text); }

.product-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
}
@media(max-width:768px) { .product-grid { grid-template-columns:1fr; gap:32px; } }

.product-hero-img {
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r-xl); background:var(--surface);
  box-shadow:var(--shadow);
}
.product-gallery { display:flex; gap:10px; margin-top:12px; }
.gallery-thumb {
  width:64px; height:64px; border-radius:var(--r); object-fit:cover;
  border:2px solid transparent; cursor:pointer; transition:border-color .2s; flex-shrink:0;
  background:var(--surface);
}
.gallery-thumb.active { border-color:var(--accent); }

.product-info { display:flex; flex-direction:column; gap:20px; }
.product-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px;
  background:rgba(42,154,108,.15); color:var(--accent);
  width:fit-content;
}
.product-name { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.product-dims {
  display:flex; gap:12px; flex-wrap:wrap;
}
.dim-tag {
  padding:6px 14px; border-radius:var(--r); font-size:.85rem;
  background:var(--surface); border:1px solid var(--border); color:var(--text2);
}
.product-desc { font-size:.95rem; line-height:1.7; color:var(--text2); }

.product-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.btn-try {
  background:var(--acc-grd); color:#fff; flex:1; min-width:160px;
  box-shadow:0 4px 20px rgba(42,154,108,.3);
  padding:16px 28px; border-radius:var(--r-lg); font-size:1rem; font-weight:700;
}
.btn-try:hover { box-shadow:0 6px 32px rgba(42,154,108,.5); transform:translateY(-1px); }
.btn-buy {
  background:transparent; color:var(--text);
  border:1px solid var(--border2); flex:1; min-width:140px;
  padding:16px 28px; border-radius:var(--r-lg); font-size:1rem; font-weight:600;
}
.btn-buy:hover { background:var(--surface); }

.product-specs {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px 24px;
}
.spec-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--border); font-size:.875rem;
}
.spec-row:last-child { border-bottom:none; padding-bottom:0; }
.spec-row:first-child { padding-top:0; }
.spec-label { color:var(--text2); }
.spec-val { font-weight:500; }

/* ── Try page ────────────────────────────────────────────────── */
.try-header {
  height:var(--hh); display:flex; align-items:center;
  padding:0 clamp(16px,4vw,32px);
  border-bottom:1px solid var(--border);
  background:var(--bg2); gap:20px; flex-shrink:0;
}
.try-material-badge {
  display:flex; align-items:center; gap:10px;
  padding:6px 14px; border-radius:var(--r);
  background:var(--card); border:1px solid var(--border);
  font-size:.82rem; font-weight:600;
}
.try-material-badge img { width:28px; height:28px; border-radius:6px; object-fit:cover; }

/* Step pills */
.step-pills { display:flex; align-items:center; gap:8px; margin:0 auto; }
.step-pill {
  padding:6px 16px; border-radius:20px; font-size:.8rem; font-weight:600;
  background:var(--surface); color:var(--muted); border:1px solid var(--border);
  transition:all .2s;
}
.step-pill.active { background:rgba(42,154,108,.2); color:var(--accent); border-color:rgba(42,154,108,.4); }
.step-pill.done   { background:rgba(52,211,153,.1); color:var(--success); border-color:rgba(52,211,153,.3); }
.step-sep { color:var(--muted); font-size:.7rem; }

/* Upload step */
.try-body { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.upload-step {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
.upload-card {
  max-width:520px; width:100%; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.upload-zone {
  width:100%; padding:52px 32px;
  border:2px dashed rgba(42,154,108,.4);
  border-radius:var(--r-xl); background:rgba(42,154,108,.04);
  cursor:pointer; transition:all .2s; position:relative;
}
.upload-zone:hover,.upload-zone.drag-over {
  border-color:var(--accent); background:rgba(42,154,108,.08);
}
.upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-icon { font-size:2.8rem; margin-bottom:12px; opacity:.6; }
.upload-text { font-size:1rem; font-weight:500; }
.upload-hint { font-size:.82rem; color:var(--muted); margin-top:6px; }
.upload-divider { display:flex; align-items:center; gap:12px; width:100%; color:var(--muted); font-size:.8rem; }
.upload-divider::before,.upload-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.btn-camera {
  width:100%; padding:14px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--border); color:var(--text);
  font-size:.9rem; font-weight:600; transition:all .2s;
}
.btn-camera:hover { background:var(--surface); border-color:var(--border2); }

/* Canvas step */
.canvas-step {
  flex:1; display:flex; overflow:hidden; position:relative;
}
.canvas-wrap {
  flex:1; position:relative; background:#050508; overflow:hidden;
}
#try-canvas { display:block; width:100%; height:100%; }

/* Canvas instructions tooltip */
.canvas-tip {
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
  border:1px solid var(--border2); border-radius:20px;
  padding:8px 18px; font-size:.82rem; color:rgba(255,255,255,.8);
  pointer-events:none; white-space:nowrap;
  transition:opacity .3s;
}

/* Floating toolbar */
.try-toolbar {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; align-items:center;
  background:rgba(14,14,18,.9); backdrop-filter:blur(16px);
  border:1px solid var(--border2); border-radius:var(--r-xl);
  padding:8px 12px; box-shadow:var(--shadow);
}
.try-tool {
  width:38px; height:38px; border-radius:10px; border:none;
  background:transparent; color:var(--text2); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .18s;
}
.try-tool:hover { background:var(--surface); color:var(--text); }
.try-tool.active { background:rgba(42,154,108,.2); color:var(--accent); }
.try-tool-sep { width:1px; height:24px; background:var(--border); }

/* Generate panel */
.gen-panel {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(10,10,14,.95); backdrop-filter:blur(20px);
  border-top:1px solid var(--border2);
  padding:20px 24px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.gen-panel.visible { transform:translateY(0); }
.gen-panel-info { flex:1; min-width:200px; }
.gen-panel-title { font-size:.9rem; font-weight:600; margin-bottom:2px; }
.gen-panel-sub { font-size:.78rem; color:var(--text2); }
.btn-generate {
  background:var(--acc-grd); color:#fff;
  padding:14px 32px; border-radius:var(--r-lg); font-size:.95rem; font-weight:700;
  border:none; letter-spacing:.02em;
  box-shadow:0 4px 24px rgba(42,154,108,.4);
  transition:all .2s; flex-shrink:0;
}
.btn-generate:hover { box-shadow:0 6px 36px rgba(42,154,108,.6); transform:translateY(-1px); }
.btn-generate:disabled { opacity:.5; pointer-events:none; }

/* Surface list in gen-panel */
.gen-surface-list {
  display:flex; gap:6px; flex-wrap:wrap; align-items:center; flex:none;
}
.gen-surface-dot {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px 3px 6px; border-radius:16px; font-size:.72rem; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75); white-space:nowrap;
}
.surf-dot-color { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.del-surf {
  background:none; border:none; color:rgba(255,255,255,.35);
  cursor:pointer; padding:0 0 0 3px; font-size:.9rem; line-height:1;
}
.del-surf:hover { color:rgba(255,255,255,.85); }
.btn-add-surface {
  padding:5px 12px; border-radius:var(--r); font-size:.78rem; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.65); transition:all .18s; white-space:nowrap; flex-shrink:0;
}
.btn-add-surface:hover { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.25); }

/* Dimension inputs inside gen-panel */
.gen-dims {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r); padding:10px 14px;
}
.gen-dim-field { display:flex; flex-direction:column; gap:3px; }
.gen-dim-label { font-size:.68rem; color:rgba(255,255,255,.45); font-weight:500; }
.gen-dim-input {
  width:90px; padding:7px 10px; border-radius:8px;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:.88rem; font-family:inherit; text-align:center;
  outline:none; transition:border .18s;
  -moz-appearance:textfield;
}
.gen-dim-input::-webkit-inner-spin-button,
.gen-dim-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.gen-dim-input:focus { border-color:var(--accent); }
.gen-dim-sep { color:rgba(255,255,255,.35); font-size:1.1rem; font-weight:700; margin-top:14px; }
.gen-tile-count {
  font-size:.76rem; font-weight:700; letter-spacing:.01em;
  background:rgba(42,154,108,.15); border:1px solid rgba(42,154,108,.3);
  color:#4eca8e; border-radius:20px; padding:5px 14px;
  white-space:nowrap; margin-top:14px; min-width:110px; text-align:center;
  transition:all .2s;
}
.gen-tile-count.ready { background:rgba(42,154,108,.22); border-color:rgba(42,154,108,.5); }

/* ── Edge measurement widget ─────────────────────────────────── */
.hidden { display:none !important; }

.edge-widget {
  position:fixed; z-index:600;
  background:rgba(14,14,22,.97); border:1px solid rgba(42,154,108,.55);
  border-radius:12px; padding:12px 14px; box-shadow:0 8px 32px rgba(0,0,0,.6);
  min-width:180px; animation:edgeWidgetIn .15s ease;
}
@keyframes edgeWidgetIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.edge-widget-label {
  font-size:.75rem; font-weight:600; color:rgba(255,255,255,.6);
  margin-bottom:8px; letter-spacing:.02em;
}
.edge-widget-row { display:flex; gap:8px; align-items:center; }
#edge-widget-input {
  flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:8px; padding:8px 10px; color:#fff; font-size:.9rem; font-weight:600;
  outline:none; width:90px;
}
#edge-widget-input:focus { border-color:var(--accent); }
#edge-widget-ok {
  width:36px; height:36px; border-radius:8px; border:none;
  background:var(--accent); color:#fff; font-size:1rem; font-weight:700;
  cursor:pointer; transition:background .15s;
}
#edge-widget-ok:hover { background:#23a96a; }

/* ── Close-shape confirmation popup ──────────────────────────── */
.close-confirm {
  position:fixed; z-index:601;
  background:rgba(14,14,22,.97); border:1px solid rgba(249,199,79,.55);
  border-radius:12px; padding:14px 16px; box-shadow:0 8px 32px rgba(0,0,0,.6);
  min-width:170px; animation:edgeWidgetIn .15s ease;
}
.close-confirm-msg {
  font-size:.85rem; font-weight:600; color:#fff; margin-bottom:10px; text-align:center;
}
.close-confirm-btns { display:flex; gap:8px; justify-content:center; }
.close-confirm-btn {
  padding:7px 18px; border-radius:8px; border:none;
  font-size:.82rem; font-weight:700; cursor:pointer; transition:all .15s;
}
.close-confirm-btn.yes { background:var(--accent); color:#fff; }
.close-confirm-btn.yes:hover { background:#23a96a; }
.close-confirm-btn.no { background:rgba(255,255,255,.1); color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.15); }
.close-confirm-btn.no:hover { background:rgba(255,255,255,.18); }

/* ── Result overlay ──────────────────────────────────────────── */
.result-overlay {
  position:fixed; inset:0; z-index:501;
  background:rgba(0,0,0,.96);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.result-overlay.show { opacity:1; pointer-events:all; }
.result-bar {
  height:64px; flex-shrink:0; padding:0 20px;
  display:flex; align-items:center; gap:14px;
  background:rgba(14,14,18,.95); border-bottom:1px solid var(--border);
}
.result-title { font-size:.9rem; font-weight:600; flex:1; color:#f0f0f5; }
.result-btn {
  padding:7px 16px; border-radius:8px; font-size:.8rem; font-weight:600;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#f0f0f5;
  transition:all .18s;
}
.result-btn:hover { background:rgba(255,255,255,.16); }
.result-btn-close { color:var(--danger); border-color:rgba(248,113,113,.3); }
.result-btn-close:hover { background:rgba(248,113,113,.1); }

/* Before/after slider */
.ba-stage {
  flex:1; position:relative; overflow:hidden; user-select:none;
}
.ba-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block;
}
.ba-after { clip-path:inset(0 50% 0 0); }
.ba-divider {
  position:absolute; top:0; bottom:0; left:50%;
  width:3px; background:rgba(255,255,255,.85);
  transform:translateX(-50%); cursor:ew-resize; z-index:10;
}
.ba-knob {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; color:#111; font-weight:800; pointer-events:none;
}
.ba-label {
  position:absolute; top:14px; padding:4px 12px;
  border-radius:20px; font-size:.75rem; font-weight:700;
  background:rgba(0,0,0,.6); color:rgba(255,255,255,.9); z-index:5; pointer-events:none;
}
.ba-label-l { left:14px; }
.ba-label-r { right:14px; }

/* ── Toast ───────────────────────────────────────────────────── */
#toast-root {
  position:fixed; top:88px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  padding:12px 18px; border-radius:var(--r); font-size:.85rem; font-weight:500;
  box-shadow:var(--shadow); max-width:320px; pointer-events:all;
  animation:toastIn .3s ease;
}
.toast.success { background:var(--toast-ok-bg); border:1px solid var(--toast-ok-b); color:var(--toast-ok-c); }
.toast.error   { background:var(--toast-er-bg); border:1px solid var(--toast-er-b); color:var(--toast-er-c); }
.toast.info    { background:var(--toast-in-bg); border:1px solid var(--toast-in-b); color:var(--toast-in-c); }
@keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:640px) {
  .hero h1    { letter-spacing:-.02em; }
  .hero-stats { gap:20px; }
  .hero-cta   { flex-direction:column; }
  .mat-card   { width:clamp(160px,60vw,200px); }
  .step-pills .step-sep { display:none; }
  .step-pill  { padding:5px 10px; font-size:.72rem; }
  .gen-panel  { flex-direction:column; align-items:stretch; }
  .result-bar { overflow-x:auto; }
}
@media(max-width:480px) {
  .header-nav,.admin-link { display:none; }
}

/* ── RTL support ──────────────────────────────────────────────── */
[dir="rtl"] .arrow-prev { left:auto; right:8px; }
[dir="rtl"] .arrow-next { right:auto; left:8px; }
[dir="rtl"] .slider-outer::before { left:auto; right:0; background:linear-gradient(-90deg,var(--bg),transparent); }
[dir="rtl"] .slider-outer::after  { right:auto; left:0;  background:linear-gradient(90deg,var(--bg),transparent); }
[dir="rtl"] .back-link::before { content:'→'; margin-left:4px; }
[dir="rtl"] .toast { animation-name:toastInRtl; }
@keyframes toastInRtl { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }