/* Solveify101 demo kit: ribbon, counter, toast, email popup.
   Uses the tool's own theme variables where possible so it matches
   both dark and light mode. */
.sv-ribbon{
  display:flex;align-items:center;gap:14px;
  padding:9px 24px;background:#3366FF;color:#fff;
  font-family:"DM Sans","Inter",system-ui,sans-serif;font-size:13.5px;line-height:1.3;
}
.sv-home{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:700;flex:none}
.sv-home svg{width:13px;height:25px}
.sv-home span{font-family:"Archivo","Plus Jakarta Sans",sans-serif;letter-spacing:-.01em}
.sv-msg{flex:1;min-width:0;margin:0}
.sv-msg b{font-weight:700}
.sv-count{
  flex:none;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.55);
  background:transparent;color:#fff;font:inherit;font-weight:600;cursor:pointer;
}
.sv-count:hover{background:rgba(255,255,255,.14)}
.sv-count.is-out{background:#fff;color:#1A3FC4;border-color:#fff}
.sv-buy{
  flex:none;height:30px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;
  background:#fff;color:#1A3FC4;font-weight:700;text-decoration:none;
}
.sv-buy:hover{background:#EEF2FF}
.sv-ribbon a:focus-visible,.sv-ribbon button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Toast */
.sv-toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#151922;color:#fff;border:1px solid rgba(255,255,255,.14);
  padding:10px 16px;border-radius:12px;font:600 13.5px/1.3 "DM Sans","Inter",system-ui,sans-serif;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);z-index:90;transition:opacity .2s,transform .2s;
}
.sv-toast.show{opacity:1;transform:translate(-50%,0)}

/* Intro card */
.sv-intro{
  position:fixed;right:20px;bottom:20px;z-index:85;width:min(360px,calc(100vw - 32px));
  background:var(--bg-1,#0B0F1B);color:var(--text,#EAEEF6);border:1px solid var(--line-2,rgba(255,255,255,.12));
  border-radius:16px;padding:18px 18px 16px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  font:14px/1.5 "DM Sans","Inter",system-ui,sans-serif;
}
.sv-intro p{margin:0 0 10px;color:var(--dim,#9098AD)}
.sv-intro p b{color:var(--text,#EAEEF6)}
.sv-intro .sv-btn{margin-top:4px}

/* Popup */
.sv-overlay{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,7,13,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.sv-overlay.show{display:flex}
.sv-modal{
  position:relative;width:100%;max-width:470px;max-height:92vh;overflow:auto;
  background:var(--bg-1,#0B0F1B);color:var(--text,#EAEEF6);
  border:1px solid var(--line-2,rgba(255,255,255,.12));border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  font:15px/1.55 "DM Sans","Inter",system-ui,sans-serif;
}
.sv-modal::before{
  content:"";display:block;height:8px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,#FF3E3E 0 50%,#3366FF 50% 100%);
}
.sv-body{padding:24px 26px 24px}
.sv-x{
  position:absolute;top:20px;right:18px;width:32px;height:32px;border-radius:10px;border:none;cursor:pointer;
  background:var(--bg-3,#131B2E);color:var(--dim,#9098AD);display:grid;place-items:center;
}
.sv-x:hover{color:var(--text,#EAEEF6)}
.sv-x svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}
.sv-title{
  margin:0 40px 8px 0;font-family:"Archivo","Plus Jakarta Sans",sans-serif;font-weight:800;
  font-size:23px;line-height:1.15;letter-spacing:-.02em;
}
.sv-lead{margin:0 0 16px;color:var(--dim,#9098AD)}
.sv-lead b{color:var(--text,#EAEEF6)}
.sv-form{padding:16px;border-radius:14px;background:var(--bg-2,#0E1424);border:1px solid var(--line,rgba(255,255,255,.07))}
.sv-label{display:block;font-weight:700;margin-bottom:10px}
.sv-row{display:flex;gap:8px;flex-wrap:wrap}
.sv-row input{
  flex:1 1 200px;min-width:0;height:44px;padding:0 13px;border-radius:11px;
  background:var(--bg-1,#0B0F1B);border:1px solid var(--line-2,rgba(255,255,255,.12));
  color:var(--text,#EAEEF6);font:16px "DM Sans","Inter",system-ui,sans-serif;outline:none;
}
.sv-row input:focus{border-color:#3366FF;box-shadow:0 0 0 3px rgba(51,102,255,.25)}
.sv-consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:12.5px;line-height:1.45;color:var(--dim,#9098AD);cursor:pointer}
.sv-consent input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:#3366FF}
.sv-consent a{color:inherit;text-decoration:underline}
.sv-error{margin:10px 0 0;color:#FF7A7A;font-size:13px;font-weight:600}
.sv-done{padding:14px 16px;border-radius:14px;background:var(--bg-2,#0E1424);border:1px solid var(--line,rgba(255,255,255,.07));color:var(--dim,#9098AD)}
.sv-done p{margin:0}
.sv-done b{color:var(--text,#EAEEF6)}
.sv-test{margin:-6px 0 16px;font-size:12.5px;color:#E8A33D}
.sv-alt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.sv-btn{
  display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:11px;
  border:none;cursor:pointer;font:700 14.5px "DM Sans","Inter",system-ui,sans-serif;text-decoration:none;white-space:nowrap;
}
.sv-btn:disabled{opacity:.6;cursor:default}
.sv-primary{background:#3366FF;color:#fff}
.sv-primary:hover{background:#2856E8}
.sv-etsy{background:var(--bg-3,#131B2E);color:var(--text,#EAEEF6);border:1px solid var(--line-2,rgba(255,255,255,.12))}
.sv-etsy:hover{background:var(--bg-4,#1A2438)}
.sv-link{background:none;border:none;color:var(--dim,#9098AD);font:600 14px "DM Sans","Inter",system-ui,sans-serif;cursor:pointer;text-decoration:underline;padding:6px 4px}
.sv-link:hover{color:var(--text,#EAEEF6)}
.sv-modal :focus-visible,.sv-intro :focus-visible{outline:2px solid #3366FF;outline-offset:2px}

@media (max-width:760px){
  .sv-ribbon{padding:8px 14px;gap:10px;font-size:12.5px}
  .sv-home span,.sv-sub{display:none}
  .sv-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sv-count{height:28px;padding:0 10px}
  .sv-buy{height:28px;padding:0 11px}
  .sv-toast{bottom:96px}
  .sv-intro{right:16px;left:16px;bottom:90px;width:auto}
  .sv-body{padding:20px 18px}
  .sv-btn{flex:1 1 auto}
}
@media (max-width:420px){
  .sv-msg{display:none}
  .sv-ribbon{justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.sv-toast{transition:none}}
.sv-shot .sv-ribbon,.sv-shot .sv-toast,.sv-shot .sv-intro{display:none!important}

/* Inside a Solveify OS window: the window already shows the brand */
.sv-embed .sv-home{display:none}
.sv-embed .sv-ribbon{padding:7px 16px;font-size:13px}
.sv-embed .sv-intro{right:14px;bottom:14px}