/* ========================================================================== 
   Realtor Tools — Orbital Workspace redesign
   Functionality-safe: existing IDs/classes remain unchanged.
   ========================================================================== */

:root {
  --brand:#5DE1E6;
  --brand-2:#7B4DFF;
  --brand-3:#C25BFF;
  --brand-deep:#8068FF;

  --bg:#070A18;
  --bg-2:#0A0F24;
  --panel:#10162E;
  --panel-2:#141B38;
  --panel-3:#0C1229;
  --glass:rgba(17,23,49,.72);
  --glass-strong:rgba(15,21,44,.90);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.13);

  --ink:#F7F9FF;
  --ink-2:#D9DEF5;
  --muted:#A0A8C8;
  --faint:#6F789A;

  --ok:#42D49B;
  --warn:#F0B84D;
  --err:#FF6B78;

  --grad:linear-gradient(135deg,#5DE1E6 0%,#6CAEF7 42%,#7B4DFF 72%,#C25BFF 100%);
  --grad-soft:linear-gradient(135deg,rgba(93,225,230,.12),rgba(123,77,255,.13),rgba(194,91,255,.10));
  --grad-panel:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));

  --radius:24px;
  --radius-sm:15px;
  --radius-lg:32px;
  --tap:52px;

  --shadow-sm:0 10px 28px rgba(0,0,0,.18);
  --shadow:0 22px 54px rgba(0,0,0,.28);
  --shadow-lg:0 32px 90px rgba(0,0,0,.42);

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif;
}

* , *::before , *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--bg); }
html,body { min-height:100%; }
body {
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100dvh;
  position:relative;
  background:
    radial-gradient(1000px 700px at -8% -10%, rgba(93,225,230,.16), transparent 62%),
    radial-gradient(1100px 760px at 108% 2%, rgba(123,77,255,.17), transparent 61%),
    radial-gradient(800px 680px at 45% 112%, rgba(194,91,255,.09), transparent 68%),
    linear-gradient(180deg,#070A18 0%,#090D1E 48%,#070A18 100%);
  background-attachment:fixed;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.38;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 1.3px),
    radial-gradient(circle,rgba(93,225,230,.72) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(123,77,255,.65) 0 1px,transparent 1.4px);
  background-size:230px 230px,340px 340px,420px 420px;
  background-position:0 0,100px 120px,180px 30px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.45) 60%,transparent 100%);
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 25%,#000 0,transparent 70%);
}

button,input,select,textarea { font-family:inherit; }
button { cursor:pointer; }
a { color:var(--brand); text-decoration:none; }
img,svg { display:block; max-width:100%; }
h1,h2,h3,p { margin:0; }

.app {
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:max(20px,env(safe-area-inset-top)) 18px calc(34px + env(safe-area-inset-bottom));
  min-height:100dvh;
  position:relative;
  z-index:1;
}

.view { display:none; animation:rise .32s cubic-bezier(.2,.7,.2,1) both; }
.view.active { display:block; }
@keyframes rise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* HOME HERO */
.brand-head {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  text-align:left;
  margin:4px 0 30px;
  padding:42px 6px 28px;
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.brand-head::before {
  content:"";
  position:absolute;
  right:-80px;
  top:14px;
  width:340px;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 46px rgba(123,77,255,.028),
    0 0 0 96px rgba(93,225,230,.018),
    0 0 90px rgba(123,77,255,.13);
  z-index:-1;
}
.brand-head::after {
  content:"";
  position:absolute;
  right:74px;
  top:154px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 15px #fff,0 0 34px rgba(93,225,230,.9);
  z-index:-1;
}
.brand-head .wordmark {
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:11px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#C5CCE7;
}
.brand-head .wordmark .dot {
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(93,225,230,.96),rgba(123,77,255,.95));
  box-shadow:0 0 0 1px rgba(255,255,255,.13),0 0 28px rgba(93,225,230,.22);
}
.brand-head .wordmark .dot svg { width:18px; height:18px; }
.brand-head h1 {
  margin-top:24px;
  max-width:760px;
  font-size:clamp(42px,8vw,76px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:850;
  color:#fff;
}
.brand-head h1 .g {
  color:transparent;
  background:linear-gradient(100deg,#87F6FA 0%,#75D9F5 30%,#9B7EFF 72%,#D482FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 28px rgba(93,225,230,.14));
}
.brand-head .beam {
  width:124px;
  height:2px;
  margin:26px 0 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),transparent);
  box-shadow:0 0 20px rgba(93,225,230,.35);
}
.brand-head p {
  margin-top:20px;
  max-width:680px;
  font-size:15px;
  color:var(--muted);
  line-height:1.7;
}

/* TOOL TILES */
.tiles {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:6px;
}
.tile {
  position:relative;
  min-height:184px;
  padding:22px 20px 20px;
  text-align:left;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(300px 180px at 0% 0%,rgba(93,225,230,.08),transparent 66%),
    var(--grad-panel),
    rgba(15,21,44,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.035);
  display:flex;
  flex-direction:column;
  gap:13px;
  overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.tile:nth-child(2) { background:radial-gradient(300px 180px at 0% 0%,rgba(123,77,255,.10),transparent 66%),var(--grad-panel),rgba(15,21,44,.78); }
.tile:nth-child(3) { background:radial-gradient(300px 180px at 0% 0%,rgba(194,91,255,.09),transparent 66%),var(--grad-panel),rgba(15,21,44,.78); }
.tile:nth-child(4) { background:radial-gradient(300px 180px at 0% 0%,rgba(93,225,230,.07),transparent 66%),var(--grad-panel),rgba(15,21,44,.78); }
.tile::before {
  content:"";
  position:absolute;
  width:118px;
  height:118px;
  right:-42px;
  bottom:-44px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:50%;
  box-shadow:0 0 0 24px rgba(255,255,255,.018);
}
.tile::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.07),transparent 24%,transparent 76%,rgba(123,77,255,.05));
  opacity:.42;
}
.tile:hover {
  transform:translateY(-5px);
  border-color:rgba(126,224,255,.24);
  box-shadow:0 22px 55px rgba(0,0,0,.34),0 0 42px rgba(93,225,230,.06),inset 0 1px 0 rgba(255,255,255,.06);
}
.tile:active { transform:translateY(-1px) scale(.985); }
.tile:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
.tile .ic {
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 26px rgba(93,225,230,.07);
}
.tile .ic svg { width:24px; height:24px; color:var(--brand); }
.tile:nth-child(2) .ic svg { color:#9F8BFF; }
.tile:nth-child(3) .ic svg { color:#D487FF; }
.tile:nth-child(4) .ic svg { color:#7DEDF1; }
.tile h3 { font-size:17px; line-height:1.2; font-weight:760; letter-spacing:-.02em; }
.tile p { max-width:23em; font-size:13px; line-height:1.48; color:var(--muted); }
.tile .arrow {
  position:absolute;
  z-index:2;
  top:18px;
  right:18px;
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--faint);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  transition:color .18s ease,transform .18s ease,border-color .18s ease;
}
.tile:hover .arrow { color:var(--brand); transform:translateX(2px); border-color:rgba(93,225,230,.26); }

/* COMMUNITY */
.about {
  margin-top:34px;
  padding:26px 0 10px;
  border-top:1px solid var(--line);
  background:none;
}
.about h2 {
  margin-bottom:12px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}
.about .lead { max-width:680px; margin-bottom:14px; font-size:14px; color:var(--muted); }
.partners { display:grid; grid-template-columns:1fr; }
.partners a {
  min-height:52px;
  padding:13px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.055);
  color:var(--ink-2);
  font-size:14px;
  font-weight:620;
  transition:color .15s ease,padding .15s ease;
}
.partners a:hover { color:#fff; padding-left:8px; }
.partners a .ext { color:var(--faint); transition:color .15s ease,transform .15s ease; }
.partners a:hover .ext { color:var(--brand); transform:translate(2px,-2px); }
.foot {
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line);
  text-align:left;
  font-size:12.5px;
  line-height:1.7;
  color:var(--faint);
}
.foot b { color:var(--muted); }
.foot .made { display:block; }

/* TOOL PAGE TOP */
.topbar {
  display:flex;
  align-items:center;
  min-height:62px;
  padding:2px 0 16px;
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(180deg,rgba(7,10,24,.94) 0%,rgba(7,10,24,.78) 72%,rgba(7,10,24,0) 100%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.back {
  min-height:44px;
  padding:0 14px 0 11px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.045);
  color:var(--ink-2);
  font-size:13.5px;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
}
.back:hover { color:#fff; border-color:rgba(93,225,230,.22); }
.back:active { transform:scale(.97); }
.back svg { width:18px; height:18px; }

.tool-head { margin:6px 0 22px; }
.tool-head .eyebrow {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(93,225,230,.15);
  background:rgba(93,225,230,.055);
  color:#95EEF1;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.tool-head h2 {
  margin-top:13px;
  font-size:clamp(30px,6vw,46px);
  line-height:1.05;
  font-weight:820;
  letter-spacing:-.04em;
}
.tool-head .sub { max-width:670px; margin-top:9px; color:var(--muted); font-size:14.5px; line-height:1.65; }

/* PANELS & FORMS */
.card {
  padding:20px;
  margin-bottom:16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.048),rgba(255,255,255,.018)),rgba(14,20,42,.76);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.field { margin-bottom:15px; }
.field:last-child { margin-bottom:0; }
.field label,.seg-label {
  display:block;
  margin-bottom:7px;
  color:var(--ink-2);
  font-size:12.5px;
  font-weight:650;
}
.field label .opt { color:var(--faint); font-weight:500; }
.input,.select,textarea.input {
  width:100%;
  height:var(--tap);
  padding:0 15px;
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.045);
  color:var(--ink);
  font-size:16px;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
textarea.input { height:auto; min-height:86px; padding:13px 15px; line-height:1.5; resize:vertical; }
.input::placeholder,textarea.input::placeholder { color:#697394; }
.input:focus,.select:focus,textarea.input:focus {
  border-color:rgba(93,225,230,.65);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(93,225,230,.08),0 0 28px rgba(93,225,230,.055);
}
.select {
  appearance:none;
  padding-right:42px;
  background-color:rgba(255,255,255,.045);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A0A8C8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.select option { background:#10162E; color:#F7F9FF; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.affix { position:relative; }
.affix .pfx { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:16px; font-weight:600; pointer-events:none; }
.affix .input { padding-left:34px; }
.hint { margin-top:6px; font-size:12px; color:var(--faint); }

/* BUTTONS */
.btn {
  width:100%;
  min-height:var(--tap);
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:15px;
  font-weight:730;
  letter-spacing:.005em;
  transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg { width:19px; height:19px; }
.btn:active { transform:scale(.98); }
.btn-primary {
  color:#08101C;
  background:linear-gradient(135deg,#8AF7FA 0%,#67DDEB 32%,#8C86FF 100%);
  box-shadow:0 12px 34px rgba(93,225,230,.12),0 12px 30px rgba(123,77,255,.16);
}
.btn-primary:hover { box-shadow:0 16px 38px rgba(93,225,230,.18),0 18px 38px rgba(123,77,255,.20); }
.btn-ghost {
  color:var(--ink-2);
  background:rgba(255,255,255,.04);
  border-color:var(--line-2);
}
.btn-ghost:hover { background:rgba(255,255,255,.065); border-color:rgba(255,255,255,.18); }
.btn-row { display:grid; gap:10px; margin-top:4px; }
.btn-row.two { grid-template-columns:1fr 1fr; }
.btn:disabled { opacity:.45; pointer-events:none; }

/* CHIPS / CONTROLS */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  min-height:42px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);
  color:var(--ink-2);
  font-size:14px;
  font-weight:700;
  flex:1 1 auto;
  min-width:62px;
  transition:transform .14s ease,background .14s ease,border-color .14s ease,color .14s ease;
}
.chip:hover { border-color:rgba(93,225,230,.22); }
.chip:active { transform:scale(.96); }
.chip.on { color:#08101C; border-color:transparent; background:linear-gradient(135deg,#7DEFF3,#8B85FF); }
.swatches { display:flex; flex-wrap:wrap; gap:10px; }
.swatch {
  width:40px;
  height:40px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.8);
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
  transition:transform .14s ease,box-shadow .14s ease;
}
.swatch:active { transform:scale(.92); }
.swatch.on { transform:scale(1.06); box-shadow:0 0 0 2px var(--brand),0 0 24px rgba(93,225,230,.18); }
.shapes { display:flex; gap:10px; }
.shape-btn {
  flex:1;
  min-height:46px;
  padding:0 10px;
  border-radius:13px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.035);
  color:var(--ink-2);
  font-size:13px;
  font-weight:650;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.shape-btn.on { color:#08101C; background:linear-gradient(135deg,#7DEFF3,#8B85FF); border-color:transparent; }
.shape-btn svg { width:18px; height:18px; }

/* RESULTS */
.result {
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(14,20,42,.82);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.result-head {
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(93,225,230,.07),rgba(123,77,255,.08),transparent);
  color:#97EEF1;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.result-body { padding:18px; }
.bignum { text-align:center; padding:8px 0 14px; }
.bignum .lbl { color:var(--faint); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.bignum .val {
  margin-top:5px;
  font-size:clamp(40px,10vw,60px);
  line-height:1;
  font-weight:850;
  letter-spacing:-.05em;
  color:transparent;
  background:linear-gradient(100deg,#9DF8FA,#8CCFFF 46%,#A88CFF 78%,#D793FF);
  -webkit-background-clip:text;
  background-clip:text;
}
.bignum .cur { margin-top:4px; color:var(--muted); font-size:14px; font-weight:650; }
.fx-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.fx {
  padding:14px;
  text-align:center;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
}
.fx .fx-cur { color:var(--faint); font-size:11px; font-weight:800; letter-spacing:.08em; }
.fx .fx-val { margin-top:3px; color:#fff; font-size:20px; font-weight:760; }
.meta-row { display:flex; justify-content:space-between; gap:12px; padding:14px 2px 2px; font-size:13px; }
.meta-row .m { flex:1; text-align:center; }
.meta-row .m .k { color:var(--faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; }
.meta-row .m .v { color:var(--ink-2); font-weight:700; margin-top:3px; }
.rate-note { text-align:center; margin-top:12px; font-size:12px; color:var(--faint); }
.rate-note.err { color:var(--err); }

.conv-list { display:flex; flex-direction:column; }
.conv-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:13px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.conv-row:last-child { border-bottom:none; }
.conv-row .cu { color:var(--muted); font-size:14px; font-weight:600; }
.conv-row .cv { color:#fff; font-size:20px; font-weight:760; text-align:right; }
.conv-row.primary .cv { color:#8EF0F4; }
.conv-row .cv small { margin-left:3px; color:var(--faint); font-size:12px; font-weight:600; }

.qr-stage { display:grid; place-items:center; min-height:120px; padding:8px 0 4px; }
.qr-stage canvas { width:100%; max-width:340px; height:auto; border-radius:18px; box-shadow:var(--shadow-lg); }
.qr-empty {
  width:100%;
  max-width:340px;
  aspect-ratio:3/4;
  padding:24px;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.15);
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--faint);
  font-size:13.5px;
  background:rgba(255,255,255,.025);
}
.qr-empty svg { width:40px; height:40px; margin:0 auto 12px; color:#465171; }

.doc {
  padding:24px 22px;
  border:1px solid #E6E9F2;
  border-radius:15px;
  background:#fff;
  color:#14183A;
  font-size:14.5px;
  line-height:1.7;
  white-space:pre-wrap;
  word-wrap:break-word;
  box-shadow:0 16px 42px rgba(0,0,0,.24);
}
.doc h4 { margin-bottom:14px; text-align:center; font-size:16px; font-weight:800; letter-spacing:.02em; }
.doc .sig { margin-top:22px; }

.toast {
  position:fixed;
  z-index:100;
  left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  max-width:90vw;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(15,21,44,.94);
  color:#fff;
  font-size:13.5px;
  font-weight:650;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(16px);
  display:flex;
  align-items:center;
  gap:8px;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(18px);
  transition:all .26s cubic-bezier(.2,.7,.2,1);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg { width:18px; height:18px; color:var(--brand); }
.spinner { width:18px; height:18px; border:2.5px solid rgba(255,255,255,.32); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{ transform:rotate(360deg); } }
.hidden { display:none !important; }

/* Star JS layer — deliberately subtle */
.stars-layer { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.26; }
.stars-layer .star {
  position:absolute;
  line-height:1;
  opacity:.32 !important;
  font-size:8px !important;
  filter:blur(.1px);
  text-shadow:0 0 7px currentColor;
  animation:starDrift 16s ease-in-out infinite alternate;
}
@keyframes starDrift {
  from { transform:translate(-50%,-50%) translate(0,0) rotate(0); }
  to { transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--rot)); }
}

/* TABLET / DESKTOP */
@media (min-width:720px) {
  .app { padding:34px 28px 54px; }
  .brand-head { min-height:430px; padding:56px 12px 36px; }
  .brand-head::before { width:470px; right:-30px; top:0; }
  .brand-head::after { right:187px; top:203px; }
  .tiles { gap:18px; }
  .tile { min-height:210px; padding:26px 24px 22px; }
  .tile h3 { font-size:19px; }
  .tile p { font-size:13.5px; }
  .about { margin-top:48px; }
  .partners { grid-template-columns:1fr 1fr; column-gap:30px; }
  .tool-head { margin-bottom:28px; }
}

@media (min-width:960px) {
  .tiles { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tile { min-height:238px; }

  /* Tool pages become workspace layouts without changing HTML */
  #view-calc.active,
  #view-receipt.active,
  #view-area.active {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
    column-gap:28px;
    align-items:start;
  }
  #view-qr.active {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);
    column-gap:28px;
    align-items:start;
  }

  #view-calc .topbar,
  #view-calc .tool-head,
  #view-receipt .topbar,
  #view-receipt .tool-head,
  #view-area .topbar,
  #view-area .tool-head,
  #view-qr .topbar,
  #view-qr .tool-head {
    grid-column:1/-1;
  }

  #view-calc > .card,
  #view-receipt > .card,
  #view-area > .card,
  #view-qr > .card {
    grid-column:1;
    grid-row:auto;
    margin-bottom:14px;
  }

  #view-calc > .btn,
  #view-receipt > .btn,
  #view-qr > .btn {
    grid-column:1;
    width:100%;
  }

  #view-calc > .result,
  #view-receipt > .result,
  #view-area > .result,
  #view-qr > .result {
    grid-column:2;
    grid-row:3 / span 2;
    position:sticky;
    top:92px;
  }

  #view-area > .result { grid-row:3; }
  #view-qr > .result { grid-row:3 / span 2; }

  .card { padding:24px; }
  .result-body { padding:22px; }
}

@media (max-width:560px) {
  .app { padding-left:14px; padding-right:14px; }
  .brand-head { min-height:330px; padding:34px 4px 24px; }
  .brand-head::before { width:260px; right:-120px; top:26px; }
  .brand-head::after { right:34px; top:143px; width:9px; height:9px; }
  .brand-head h1 { font-size:clamp(39px,13vw,58px); }
  .brand-head p br { display:none; }
  .tiles { grid-template-columns:1fr 1fr; gap:10px; }
  .tile { min-height:170px; padding:16px 14px 14px; }
  .tile h3 { font-size:15.5px; }
  .tile p { font-size:12.2px; }
  .tile .ic { width:42px; height:42px; border-radius:14px; }
  .tile .arrow { top:13px; right:12px; width:28px; height:28px; }
  .grid-2 { grid-template-columns:1fr; }
  .btn-row.two { grid-template-columns:1fr; }
  .shapes { flex-direction:column; }
}

@media (max-width:390px) {
  .tiles { grid-template-columns:1fr; }
  .tile { min-height:150px; }
}

@media (prefers-reduced-motion:reduce) {
  .view,.stars-layer .star { animation:none !important; }
  * { scroll-behavior:auto !important; }
}

/* Keep light document-friendly autofill text */
input:-webkit-autofill {
  -webkit-text-fill-color:var(--ink);
  transition:background-color 9999s ease-out 0s;
}

/* ========================================================================== 
   NEW TOOLS — ENGAGE FEEDBACK + PHOTO WORKSPACE
   ========================================================================== */

/* Six tools: calmer 3×2 desktop rhythm */
@media (min-width:960px) {
  .tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.tile-engage .ic { background:linear-gradient(145deg,#8A63FF,#C25BFF); }
.tile-photo .ic { background:linear-gradient(145deg,#5DE1E6,#4A8CFF); }

/* Feedback */
.feedback-setup {
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding:18px;
  margin-bottom:18px;
  border:1px solid rgba(93,225,230,.14);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(93,225,230,.07),rgba(123,77,255,.07));
}
.feedback-setup-copy { display:flex; flex-direction:column; gap:5px; }
.feedback-setup-copy .mini-label,
.photo-section-title {
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--brand);
}
.feedback-setup-copy b { font-size:16px; color:var(--ink); }
.feedback-setup-copy p { max-width:48em; font-size:13px; color:var(--muted); }
.feedback-setup-actions { display:grid; gap:10px; }
.feedback-setup-collapsed { opacity:.76; }
.feedback-client-title {
  margin:0 0 14px;
  padding:12px 15px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font-size:13px;
}
.feedback-client-title b { color:var(--ink); }
.feedback-card { padding:0; overflow:hidden; }
.feedback-step { padding:22px 20px; border-bottom:1px solid var(--line); }
.feedback-question { font-size:16px; font-weight:750; color:var(--ink); margin-bottom:14px; }
.feedback-question span { font-size:12px; font-weight:600; color:var(--faint); }
.feedback-stars { display:flex; gap:8px; }
.feedback-star {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:15px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.035);
  color:#59617C;
  font-size:27px;
  transition:.16s ease;
}
.feedback-star:hover { transform:translateY(-2px); border-color:rgba(93,225,230,.34); }
.feedback-star.on { color:#FFD66B; border-color:rgba(255,214,107,.38); background:rgba(255,214,107,.09); text-shadow:0 0 18px rgba(255,214,107,.34); }
.feedback-rating-text { margin-top:9px; font-size:12.5px; color:var(--faint); }
.feedback-choice-group { display:flex; flex-wrap:wrap; gap:8px; }
.feedback-chip {
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.035);
  color:var(--ink-2);
  font-size:13px;
  font-weight:650;
}
.feedback-chip.on { background:rgba(66,212,155,.13); border-color:rgba(66,212,155,.36); color:#A8F4D2; }
.feedback-chip.negative.on { background:rgba(255,107,120,.11); border-color:rgba(255,107,120,.34); color:#FFB1BA; }
.feedback-decisions { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.feedback-decision {
  min-height:72px;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.035);
  color:var(--ink);
  font-size:22px;
}
.feedback-decision span { display:block; margin-top:4px; font-size:12.5px; font-weight:700; color:var(--muted); }
.feedback-decision.on { border-color:rgba(93,225,230,.4); background:linear-gradient(145deg,rgba(93,225,230,.10),rgba(123,77,255,.12)); box-shadow:0 0 0 2px rgba(93,225,230,.06) inset; }
.feedback-decision.on span { color:var(--ink); }
.feedback-comment { padding:20px; margin:0 !important; }
.feedback-result { margin-bottom:18px; }
.feedback-result-text {
  margin:0 0 18px;
  white-space:pre-wrap;
  font:inherit;
  line-height:1.72;
  color:var(--ink-2);
}

/* Photo workspace */
.photo-workspace { display:grid; gap:18px; align-items:start; }
.photo-controls { min-width:0; }
.photo-drop {
  min-height:142px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:12px;
  border:1.5px dashed rgba(93,225,230,.3);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(93,225,230,.055),rgba(123,77,255,.04));
  color:var(--ink);
  cursor:pointer;
  transition:.18s ease;
}
.photo-drop:hover,.photo-drop.drag { border-color:rgba(93,225,230,.62); background:rgba(93,225,230,.08); }
.photo-drop-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:var(--brand); background:rgba(93,225,230,.08); }
.photo-drop-icon svg { width:21px; }
.photo-drop b { font-size:15px; }
.photo-drop > span:last-child { color:var(--faint); font-size:12.5px; }
.photo-thumbs { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:thin; }
.photo-thumb {
  position:relative;
  flex:0 0 70px;
  height:62px;
  padding:0;
  overflow:hidden;
  border-radius:12px;
  border:1.5px solid var(--line-2);
  background:var(--panel);
}
.photo-thumb img { width:100%; height:100%; object-fit:cover; }
.photo-thumb span { position:absolute; right:5px; bottom:4px; min-width:20px; height:20px; display:grid; place-items:center; border-radius:8px; background:rgba(7,10,24,.8); color:#fff; font-size:10px; font-weight:800; }
.photo-thumb.on { border-color:var(--brand); box-shadow:0 0 0 2px rgba(93,225,230,.10); }
.photo-settings { padding:20px; }
.photo-section-title { margin:5px 0 12px; }
.photo-section-title:not(:first-child) { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.watermark-modes { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:15px; }
.watermark-mode {
  min-height:38px;
  padding:0 11px;
  border-radius:11px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  font-weight:650;
}
.watermark-mode.on { color:var(--ink); border-color:rgba(93,225,230,.34); background:rgba(93,225,230,.09); }
.range-row { margin:12px 0; }
.range-row label { display:flex; justify-content:space-between; margin-bottom:7px; font-size:12.5px; font-weight:650; color:var(--muted); }
.range-row input[type="range"] { width:100%; accent-color:var(--brand); }
.switch-row { display:flex; align-items:center; gap:11px; cursor:pointer; }
.switch-row > input { position:absolute; opacity:0; pointer-events:none; }
.switch-ui { position:relative; width:46px; height:26px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid var(--line-2); flex:none; }
.switch-ui::after { content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#8E96B4; transition:.18s ease; }
.switch-row input:checked + .switch-ui { background:rgba(93,225,230,.16); border-color:rgba(93,225,230,.4); }
.switch-row input:checked + .switch-ui::after { transform:translateX(20px); background:var(--brand); box-shadow:0 0 14px rgba(93,225,230,.4); }
.switch-row b { display:block; font-size:13.5px; color:var(--ink-2); }
.switch-row small { display:block; margin-top:1px; color:var(--faint); font-size:11.5px; }
.photo-blur-actions .btn { min-height:44px; font-size:12px; }
.privacy-note { display:flex; gap:10px; margin-top:20px; padding:13px; border-radius:14px; background:rgba(66,212,155,.07); border:1px solid rgba(66,212,155,.15); }
.privacy-note svg { width:22px; color:var(--ok); flex:none; margin-top:1px; }
.privacy-note b,.privacy-note span { display:block; }
.privacy-note b { font-size:12.5px; color:#B7F3D7; }
.privacy-note span { margin-top:2px; font-size:11.5px; color:var(--muted); line-height:1.45; }
.photo-preview-panel { min-width:0; padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(13,18,41,.72); box-shadow:var(--shadow); }
.photo-preview-head { display:flex; justify-content:space-between; gap:12px; padding:2px 4px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:750; }
.photo-preview-wrap { position:relative; min-height:340px; display:grid; place-items:center; overflow:hidden; border-radius:18px; background:#050712; border:1px solid rgba(255,255,255,.06); }
.photo-preview-wrap canvas { display:block; max-width:100%; max-height:70vh; width:auto; height:auto; touch-action:none; }
.photo-preview-wrap canvas.blur-cursor { cursor:crosshair; }
.photo-empty { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--faint); font-size:13px; }
.photo-empty svg { width:44px; color:#47506F; }
.blur-help { position:absolute; left:50%; bottom:12px; transform:translate(-50%,8px); max-width:90%; padding:8px 12px; border-radius:999px; background:rgba(7,10,24,.82); border:1px solid var(--line-2); color:var(--ink-2); font-size:11.5px; opacity:0; pointer-events:none; transition:.18s ease; white-space:nowrap; }
.blur-help.active { opacity:1; transform:translate(-50%,0); }
.photo-preview-panel > .btn-row { margin-top:12px; }

@media (min-width:760px) {
  .feedback-setup { grid-template-columns:1fr minmax(290px,.75fr); align-items:end; padding:20px; }
}
@media (min-width:960px) {
  #view-feedback.active { max-width:760px; margin:0 auto; }
  #view-photo.active { display:block; }
  .photo-workspace { grid-template-columns:minmax(360px,.78fr) minmax(0,1.22fr); gap:22px; }
  .photo-preview-panel { position:sticky; top:82px; }
}
@media (max-width:560px) {
  .feedback-stars { gap:5px; }
  .feedback-star { width:46px; height:46px; font-size:24px; border-radius:13px; }
  .feedback-decisions { grid-template-columns:1fr; }
  .feedback-decision { min-height:54px; display:flex; align-items:center; justify-content:center; gap:8px; }
  .feedback-decision span { display:inline; margin:0; }
  .photo-preview-wrap { min-height:280px; }
  .blur-help { white-space:normal; text-align:center; border-radius:13px; }
}

/* --- Photo tools: watermark type, PNG logo and removable thumbnails --- */
.watermark-kind {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-bottom:15px;
}
.watermark-kind-btn {
  min-height:40px;
  padding:7px 9px;
  border-radius:11px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:11.5px;
  line-height:1.2;
  font-weight:700;
}
.watermark-kind-btn.on {
  color:var(--ink);
  border-color:rgba(93,225,230,.4);
  background:rgba(93,225,230,.10);
  box-shadow:0 0 0 1px rgba(93,225,230,.04) inset;
}
.logo-upload {
  min-height:72px;
  padding:13px 14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  border:1px dashed rgba(93,225,230,.28);
  border-radius:13px;
  background:rgba(93,225,230,.045);
  cursor:pointer;
}
.logo-upload span { color:var(--ink-2); font-size:13px; font-weight:700; }
.logo-upload small { color:var(--faint); font-size:11.5px; font-weight:500; }
.logo-upload:hover { border-color:rgba(93,225,230,.55); background:rgba(93,225,230,.075); }
.logo-file {
  margin-top:8px;
  min-height:54px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 34px;
  gap:9px;
  align-items:center;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.logo-file-preview {
  width:46px;
  height:40px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:9px;
  background:linear-gradient(45deg,#d8d8d8 25%,#fff 25%,#fff 50%,#d8d8d8 50%,#d8d8d8 75%,#fff 75%);
  background-size:10px 10px;
}
.logo-file-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.logo-file > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
.logo-remove,
.photo-thumb-remove {
  border:0;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:999px;
  background:rgba(7,10,24,.84);
  color:#fff;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
.logo-remove { width:30px; height:30px; font-size:19px; }
.logo-remove:hover,.photo-thumb-remove:hover { background:rgba(229,72,77,.92); }

.photo-thumb {
  position:relative;
  flex:0 0 70px;
  height:62px;
  padding:0;
  overflow:visible;
  border:0;
  background:transparent;
}
.photo-thumb-select {
  width:100%;
  height:100%;
  padding:0;
  overflow:hidden;
  border-radius:12px;
  border:1.5px solid var(--line-2);
  background:var(--panel);
  display:block;
}
.photo-thumb-select img { width:100%; height:100%; object-fit:cover; }
.photo-thumb-index {
  position:absolute;
  right:5px;
  bottom:4px;
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(7,10,24,.8);
  color:#fff;
  font-size:10px;
  font-weight:800;
  pointer-events:none;
}
.photo-thumb.on .photo-thumb-select { border-color:var(--brand); box-shadow:0 0 0 2px rgba(93,225,230,.10); }
.photo-thumb-remove {
  position:absolute;
  top:-7px;
  right:-7px;
  z-index:3;
  width:24px;
  height:24px;
  font-size:16px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}

@media (max-width:460px) {
  .watermark-kind { grid-template-columns:1fr; }
}

/* ========================================================================== 
   FEEDBACK WIZARD — compact client questionnaire
   ========================================================================== */
.feedback-wizard {
  padding:0;
  overflow:hidden;
}
.feedback-progress-wrap {
  padding:16px 18px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.feedback-progress-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
  font-size:11.5px;
  color:var(--faint);
}
.feedback-progress-meta span:first-child {
  color:var(--brand);
  font-weight:800;
}
.feedback-progress-title {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.feedback-progress {
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}
.feedback-progress span {
  display:block;
  width:16.666%;
  height:100%;
  border-radius:inherit;
  background:var(--grad);
  box-shadow:0 0 14px rgba(93,225,230,.28);
  transition:width .22s ease;
}
.feedback-pages { min-height:330px; }
.feedback-page {
  display:none;
  padding:24px 20px 20px;
  animation:feedbackIn .18s ease both;
}
.feedback-page.active { display:block; }
@keyframes feedbackIn {
  from { opacity:0; transform:translateX(8px); }
  to { opacity:1; transform:none; }
}
.feedback-page .feedback-question {
  margin-bottom:16px;
  font-size:18px;
  line-height:1.28;
}
.feedback-rating-options {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.feedback-answer {
  min-height:48px;
  border:1px solid var(--line-2);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:var(--ink-2);
  font:inherit;
  font-size:13px;
  font-weight:700;
  transition:.15s ease;
}
.feedback-answer:hover {
  border-color:rgba(93,225,230,.34);
  background:rgba(93,225,230,.06);
}
.feedback-answer.on {
  border-color:rgba(93,225,230,.46);
  background:linear-gradient(145deg,rgba(93,225,230,.11),rgba(123,77,255,.13));
  color:var(--ink);
  box-shadow:0 0 0 2px rgba(93,225,230,.05) inset;
}
.rating-answer {
  min-height:86px;
  padding:10px 5px;
  text-align:center;
}
.rating-answer b {
  display:block;
  margin-bottom:5px;
  font-size:23px;
  line-height:1;
  color:var(--brand);
}
.rating-answer span {
  display:block;
  font-size:10.5px;
  line-height:1.15;
  color:var(--muted);
}
.rating-answer.on span { color:var(--ink-2); }
.feedback-single-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.compact-answer {
  min-height:48px;
  padding:10px 12px;
  text-align:left;
}
.status-answer {
  min-height:54px;
  padding:10px 13px;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  font-size:17px;
}
.status-answer span {
  font-size:13px;
  line-height:1.25;
}
.positive-answer.on {
  border-color:rgba(66,212,155,.42);
  background:rgba(66,212,155,.11);
  color:#B7F3D7;
}
.negative-answer.on {
  border-color:rgba(255,107,120,.36);
  background:rgba(255,107,120,.10);
  color:#FFB1BA;
}
.feedback-page .feedback-choice-group { gap:7px; }
.feedback-page .feedback-chip {
  min-height:40px;
  padding:0 12px;
  font-size:12.5px;
}
.feedback-page .feedback-comment {
  padding:20px 0 0;
  margin-top:20px !important;
  border-top:1px solid var(--line);
}
.feedback-nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  padding:14px 18px 18px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.018);
}
.feedback-nav .btn:only-child,
.feedback-nav .feedback-nav-btn:not(.hidden):first-child:last-child {
  grid-column:1/-1;
}
.feedback-nav-btn { min-height:48px; }

@media (max-width:560px) {
  .feedback-pages { min-height:350px; }
  .feedback-page { padding:20px 16px 18px; }
  .feedback-rating-options {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
  }
  .rating-answer {
    min-height:76px;
    padding:8px 2px;
    border-radius:12px;
  }
  .rating-answer b { font-size:21px; }
  .rating-answer span { font-size:9.5px; }
  .feedback-single-list { grid-template-columns:1fr 1fr; gap:7px; }
  .compact-answer { min-height:46px; padding:9px 10px; font-size:12px; }
  .status-answer { grid-column:1/-1; min-height:48px; }
  .feedback-nav { padding:12px 16px 16px; }
}

@media (max-width:390px) {
  .feedback-single-list { grid-template-columns:1fr; }
  .feedback-rating-options { gap:4px; }
  .rating-answer span { font-size:8.8px; }
}

/* Mobile: прибрати темну підкладку біля "Назад до інструментів" */
@media (max-width: 719px) {
  .topbar {
    position: static !important;
    top: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
}