/* deviz-ui.css — shared design system.
   Link this AFTER a page's own <style> and every page inherits the hero look.
   One file to restyle the whole site. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,400;1,500;1,600&display=swap');

:root{
  --bg:#0d0a08; --surface:#17120f; --surface-2:#211a15; --line:#2e251e; --line-soft:#241d18;
  --text:#f2ece0; --muted:#9a8e7d; --accent:#e0a94a; --accent-hi:#eab75d; --accent-dim:#7a5a22;
  --green:#6fc47f; --red:#e0674f;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --pill:999px;
  --shadow:0 10px 34px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  background:var(--bg) !important; color:var(--text) !important;
  letter-spacing:-0.01em; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 520px at 12% -8%, rgba(224,169,74,.09), transparent 60%),
                   radial-gradient(760px 460px at 100% 0%, rgba(224,169,74,.05), transparent 55%) !important;
  background-attachment:fixed !important;
}
.font-playfair,.playfair{font-family:'Playfair Display',serif !important;font-style:italic}

/* ── type ── */
h1{font-size:1.6rem !important;font-weight:600;letter-spacing:-0.035em;margin:0 0 3px !important}
h2{font-size:.95rem !important;font-weight:600;letter-spacing:-0.02em}
.sub,.hint{color:var(--muted) !important;font-size:12.5px !important;line-height:1.6 !important}
a{color:var(--accent) !important;text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-hi) !important}

/* ── layout ── */
.wrap{max-width:980px !important;padding:26px 18px 80px !important}

/* ── cards ── */
.card{
  background:linear-gradient(180deg, var(--surface) 0%, #14100d 100%) !important;
  border:1px solid var(--line) !important; border-radius:var(--r-lg) !important;
  padding:18px !important; margin-bottom:16px !important; box-shadow:var(--shadow) !important;
}

/* ── buttons ── */
button,.btn{
  font-family:inherit !important; cursor:pointer;
  background:var(--surface-2) !important; color:var(--text) !important;
  border:1px solid var(--line) !important; border-radius:var(--r-sm) !important;
  padding:9px 14px !important; font-size:13px !important; font-weight:500;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
button:hover:not(:disabled),.btn:hover{border-color:var(--accent) !important;transform:translateY(-1px)}
button:active:not(:disabled){transform:translateY(0) scale(.98)}
button:disabled{opacity:.45 !important;cursor:default;transform:none !important}
.primary,.btn-primary,.cta{
  background:linear-gradient(180deg, var(--accent-hi), var(--accent)) !important;
  border:none !important; color:#231803 !important; font-weight:650 !important;
  border-radius:var(--pill) !important; padding:11px 22px !important;
  box-shadow:0 6px 20px rgba(224,169,74,.22) !important;
}
.primary:hover:not(:disabled),.btn-primary:hover,.cta:hover{
  box-shadow:0 10px 28px rgba(224,169,74,.34) !important; transform:translateY(-1px) scale(1.02);
}

/* ── form controls ── */
input[type=text],input[type=password],input[type=email],textarea,select{
  background:var(--surface-2) !important; color:var(--text) !important;
  border:1px solid var(--line) !important; border-radius:var(--r-sm) !important;
  padding:9px 12px !important; font-size:13.5px !important; font-family:inherit !important;
  transition:border-color .15s, box-shadow .15s; outline:none;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(224,169,74,.16) !important;
}
select{
  appearance:none;-webkit-appearance:none; padding-right:30px !important; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a8e7d' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 10px center !important;
}
label.opt,label{color:var(--muted) !important;font-size:12px !important}

/* range sliders */
input[type=range]{
  -webkit-appearance:none;appearance:none;background:transparent !important;border:none !important;
  padding:0 !important;height:20px;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;margin-top:-5.5px;
  background:var(--accent);box-shadow:0 0 0 3px rgba(224,169,74,.2);transition:box-shadow .15s;
}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 6px rgba(224,169,74,.25)}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--line)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--accent)}
input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}

/* ── drop zones ── */
.drop{
  border:1.5px dashed var(--line) !important; border-radius:var(--r-md) !important;
  color:var(--muted) !important; cursor:pointer; transition:border-color .18s, background .18s, color .18s;
  background:rgba(255,255,255,.012) !important;
}
.drop:hover{border-color:var(--accent) !important;color:var(--text) !important;background:rgba(224,169,74,.05) !important}

/* ── slideshow rows ── */
.slide{
  background:var(--surface-2) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important; transition:border-color .16s, transform .16s;
}
.slide:hover{border-color:var(--line-soft) !important}
.grip{cursor:grab} .grip:active{cursor:grabbing}
.num{color:var(--accent) !important;font-size:10.5px !important;letter-spacing:.06em;text-transform:uppercase}
.pic{border-radius:var(--r-sm) !important;border:1px solid var(--line) !important}

/* ── preview stage / media ── */
#stage,.stagewrap{
  background:#000 !important; border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
video,canvas{border-radius:var(--r-md)}
video{border:1px solid var(--line) !important}

/* ── status ── */
.st,.status{font-size:12.5px !important;color:var(--muted) !important}
.st.ok,.status.ok{color:var(--green) !important}
.st.err,.status.err,.err{color:var(--red) !important}

/* ── page top bar (optional markup: .topbar > .brand + links) ── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.topbar .brand{display:flex;align-items:center;gap:9px;color:var(--text) !important;font-size:1.35rem}
.topbar .brand svg{width:22px;height:22px;fill:var(--accent)}

/* ══════════════════════════════════════════════════════════
   PAGE SHELL — same language as the hero cover
   Markup: <nav class="dv-nav">…</nav>  +  <header class="dv-head">…</header>
   ══════════════════════════════════════════════════════════ */
.dv-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;
  background:linear-gradient(180deg, rgba(13,10,8,.92) 0%, rgba(13,10,8,.55) 70%, rgba(13,10,8,0) 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.dv-brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.dv-brand svg{width:22px;height:22px;fill:var(--accent)}
.dv-brand span{color:var(--text) !important;font-size:1.4rem;font-family:'Playfair Display',serif;font-style:italic}
.dv-pill{
  display:none;position:absolute;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.07);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);padding:6px;align-items:center;gap:2px;
}
.dv-pill a{
  color:rgba(242,236,224,.72) !important;padding:6px 15px;border-radius:var(--pill);
  font-size:13px;font-weight:500;text-decoration:none;transition:background .18s,color .18s;white-space:nowrap;
}
.dv-pill a:hover{background:rgba(255,255,255,.1);color:var(--text) !important}
.dv-pill a.on{background:rgba(224,169,74,.16);color:var(--accent) !important}
.dv-cta{
  flex:none;background:var(--text) !important;color:#161009 !important;font-size:13px;font-weight:650;
  padding:9px 20px;border-radius:var(--pill);text-decoration:none;transition:opacity .18s,transform .18s;
}
.dv-cta:hover{opacity:.88;transform:translateY(-1px);color:#161009 !important}

/* page header — big Playfair display like the cover */
.dv-head{padding:96px 0 30px;max-width:640px}
.dv-head h1{
  font-size:2.6rem !important;line-height:1.02;font-weight:400 !important;
  letter-spacing:-0.045em;margin:0 0 12px !important;color:var(--text) !important;
}
.dv-head h1 .em{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;display:block}
.dv-head h1 .th{display:block;font-size:.62em;letter-spacing:-0.03em;color:rgba(242,236,224,.66);margin-top:2px}
.dv-head p{color:var(--muted) !important;font-size:13.5px !important;line-height:1.7 !important;margin:0 !important;max-width:560px}

/* toolbar rows inside cards — airier, grouped */
.card .row{gap:14px !important}
label.opt{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.028);border:1px solid var(--line-soft);
  padding:6px 10px 6px 12px;border-radius:var(--pill);
}
label.opt select,label.opt input[type=range]{border:none !important;background:transparent !important;padding:2px 4px !important;box-shadow:none !important}
label.opt select{background-position:right 2px center !important;padding-right:20px !important;color:var(--text) !important;font-weight:500}

/* preview stage — showcase, not a black hole */
#stage,.stagewrap{
  background:linear-gradient(155deg,#171310 0%, #0c0907 100%) !important;
  border:1px solid var(--line) !important;border-radius:var(--r-lg) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.045) !important;
  min-height:180px;align-items:center;
}

@media (min-width:860px){ .dv-pill{display:flex} }
@media (min-width:640px){
  .dv-head h1{font-size:3.4rem !important}
  .dv-nav{padding:16px 28px}
}
@media (max-width:640px){
  .wrap{padding:18px 14px 70px !important}
  .card{padding:15px !important;border-radius:var(--r-md) !important}
  .dv-head{padding:78px 0 22px}
  .dv-head h1{font-size:2.1rem !important}
}