/* ---- Global/theme ---- */
:root{
  --bg0:#07080b; --bg1:#0f1218; --ring:#6ee7b7; --ring2:#7aa2f7;
  --text:#e9eef6; --muted:#a5adbb; --stroke:#1c212a; --shadow:0 24px 80px rgba(0,0,0,.55);
  --glow:0 0 0 2px rgba(110,231,183,.24),0 10px 25px rgba(110,231,183,.18);
  --toolbar-bg:linear-gradient(180deg, rgba(10,12,16,.95) 0%, rgba(10,12,16,.7) 60%, transparent 100%);
  --toolbar-blur:blur(10px) saturate(1.08); --input-bg:#0f131a;
  --toolbar-total: 84px; --radius: 12px; --tile-radius: 18px; --btn-h: 34px;
  --btn-r: 10px; --tap-gap: .48rem;
}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:Inter, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,ui-sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, #142033 0%, transparent 60%),
    radial-gradient(1100px 820px at 115% 25%, #101926 0%, transparent 60%),
    linear-gradient(180deg,#090b10 0%, #0a0b0d 60%, #090a0e 100%),
    linear-gradient(to right, rgba(122,162,247,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122,162,247,.065) 1px, transparent 1px);
  background-size:auto,auto,auto,28px 28px,28px 28px;
}

/* ---- Toolbar / header ---- */
.sj-toolbar{
  position:fixed; inset:0 0 auto 0; display:grid;
  grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto;
  gap:.4rem .5rem; align-items:center;
  padding: calc(env(safe-area-inset-top, 0px) + .35rem) .7rem .55rem;
  z-index:1000; backdrop-filter:var(--toolbar-blur); background:var(--toolbar-bg);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition: transform .2s ease, opacity .2s ease;
}
.sj-nav{ display:flex; gap:var(--tap-gap); align-items:center }
.sj-brand{ display:flex; gap:.5rem; align-items:center; justify-content:center; min-width:0 }
.sj-right{ display:flex; align-items:center; gap:.4rem; justify-content:flex-end }
.sj-brand img.logo{ height:22px; width:22px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)) }
.sj-brand h1{
  margin:0; font-size:clamp(.9rem, 1.1vw, 1rem); font-weight:800; letter-spacing:.2px;
  background: linear-gradient(90deg, #9be8c7, #9ec1ff); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sj-btn{
  height:var(--btn-h); min-width:var(--btn-h); display:inline-grid; place-items:center; padding:0 10px;
  border-radius:var(--btn-r); border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--text); cursor:pointer; transition:transform .04s ease, background .15s, border-color .15s, box-shadow .15s, filter .15s;
  box-shadow:0 8px 16px rgba(0,0,0,.3);
}
.sj-btn .fa{ font-size:14px }
.sj-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;filter:saturate(.4)}
.sj-btn:hover:not([disabled]){background:rgba(255,255,255,.09)}
.sj-btn:active:not([disabled]){transform:translateY(1px) scale(.99)}
.sj-btn:focus-visible{outline:none; box-shadow:var(--glow); border-color:rgba(110,231,183,.6)}

/* ---- Address/search ---- */
#sj-form{ grid-column:1/4; display:flex; gap:.5rem; width:100%; margin:0; position:relative; }
.sj-addr-wrap{
  display:grid; grid-template-columns:24px 1fr 36px; align-items:center; gap:.4rem; width:100%;
  border:1px solid var(--stroke); background:var(--input-bg); border-radius:14px; height:42px; padding:0 .5rem;
  box-shadow:0 14px 26px rgba(0,0,0,.35); position:relative;
}
.scheme-dot{width:10px;height:10px;border-radius:50%;justify-self:center;background:#ffb86c;opacity:.92;box-shadow:0 0 0 2px rgba(0,0,0,.2)}
.scheme-dot.secure{background:#8aff8a}
#sj-address{ width:100%; height:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:15px; font-family:Inter, ui-sans-serif }
#sj-address::placeholder{ color:var(--muted) }
.go-btn{ height:32px; width:32px; border-radius:10px; border:1px solid var(--stroke); background:rgba(110,231,183,.08); display:grid; place-items:center; box-shadow:0 6px 12px rgba(0,0,0,.3) }
.go-btn i{ color:#fff }

/* ---- Autocomplete ---- */
.ac-panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:1001;
  background:rgba(15,18,24,.98); border:1px solid var(--stroke); border-radius:12px;
  backdrop-filter:saturate(1.1) blur(8px); box-shadow:0 18px 50px rgba(0,0,0,.55); overflow:hidden; display:none;
}
.ac-panel.show{ display:block; }
.ac-list{ list-style:none; margin:0; padding:6px; max-height:min(50vh, 380px); overflow:auto; }
.ac-item{ display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; cursor:pointer; }
.ac-item:hover{ background:rgba(255,255,255,.06) }
.ac-item[aria-selected="true"]{ outline:2px solid rgba(110,231,183,.5); background:rgba(110,231,183,.08) }
.ac-item i{ opacity:.95; width:22px; text-align:center }
.ac-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-sub{ color:var(--muted); font-size:11px; padding:2px 6px; border:1px solid var(--stroke); border-radius:999px }
.ac-empty{ padding:10px 10px; color:var(--muted) }

/* ---- Frame / landing ---- */
#sj-frame{ position:fixed; left:0; right:0; top:var(--toolbar-total); height:calc(100svh - var(--toolbar-total)); width:100vw; border:0; display:none; background:#000; z-index:1; }
.sj-landing{ padding-top:calc(var(--toolbar-total) + 14px); max-width:min(1200px, 100% - 24px); margin:0 auto }

/* ---- Hero ---- */
.math-hero{
  position:relative; display:grid; gap:12px; padding:18px 16px; border:1px solid var(--stroke);
  background:
    radial-gradient(120px 120px at 12% 25%, rgba(110,231,183,.12), transparent 60%),
    radial-gradient(180px 180px at 88% 65%, rgba(122,162,247,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-radius:20px; box-shadow:var(--shadow); overflow:hidden;
}
.math-hero::after{
  content:""; position:absolute; inset:0;
  background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="220" viewBox="0 0 800 220" fill="none">\
  <g opacity="0.24" stroke="%239be8c7" stroke-width="1.3">\
    <path d="M20,180 q60,-120 120,0 t120,0 t120,0 t120,0"/>\
    <path d="M40,60 c60,-40 120,40 180,0 s120,-40 180,0"/>\
    <circle cx="620" cy="70" r="28"/>\
    <path d="M680,150 l40,-40 l40,40 l-40,40 z"/>\
  </g>\
  <g opacity="0.22" stroke="%239ec1ff" stroke-width="1">\
    <path d="M520,110 q30,-30 60,0 t60,0"/>\
    <path d="M100,130 l40,0 m-20,-20 l0,40"/>\
    <text x="330" y="60" fill="%239ec1ff" font-size="14">y = mx + b</text>\
    <text x="540" y="180" fill="%239be8c7" font-size="14">a^{2}+b^{2}=c^{2}</text>\
  </g>\
</svg>') center / cover no-repeat;
  pointer-events:none; mix-blend-mode: screen;
}
.math-hero h2{ margin:0; font-size:clamp(1.02rem, 2vw, 1.22rem); letter-spacing:.2px; font-weight:800; font-family:Inter, ui-sans-serif }
.math-hero p{ margin:0; color:var(--muted); line-height:1.45 }

/* ---- Sections / shortcuts ---- */
.sj-section-title{ margin:16px 2px 8px; font-size:clamp(.98rem, 1.9vw, 1.08rem); font-weight:800; font-family:Inter, ui-sans-serif }
.shortcuts-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; }
.shortcuts-actions{ display:flex; gap:8px; }
.chip-btn{
  height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);color:var(--text);cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.chip-btn:hover{ background:rgba(255,255,255,.08) }
.sj-shortcuts{ margin:14px 0 8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.sj-shortcut{
  position:relative; display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid var(--stroke);
  border-radius:var(--tile-radius);
  background: linear-gradient(90deg, rgba(110,231,183,.10), rgba(110,231,183,0) 35%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  color:var(--text); cursor:pointer; box-shadow:0 16px 40px rgba(0,0,0,.45);
  transition:transform .16s ease, box-shadow .16s, border-color .16s, background .16s, outline-color .16s; text-align:left;
}
.sj-shortcut:hover{ transform:translateY(-3px) scale(1.012); background: linear-gradient(90deg, rgba(110,231,183,.18), rgba(110,231,183,0) 40%), #101722 }
.sj-shortcut:active{ transform:translateY(0) scale(.995) }
.sj-shortcut:focus-visible{ outline:2px solid rgba(110,231,183,.55) }
.sj-shortcut .fa-brands,.sj-shortcut .fa-solid{ font-size:18px; width:22px; text-align:center; opacity:.95; flex:0 0 auto }
.sj-shortcut span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600 }
.sj-shortcuts.editing .sj-shortcut{ position:relative; padding-left:54px }
.drag-handle{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); width:22px; height:24px; display:none; place-items:center;
  opacity:.9; border:1px dashed rgba(255,255,255,.18); border-radius:7px; font-size:12px; cursor:grab; user-select:none; background:rgba(255,255,255,.03);
}
.sj-shortcuts.editing .drag-handle{ display:grid }
.shortcut-tools{ margin-left:auto; display:none; gap:6px; }
.sj-shortcuts.editing .shortcut-tools{ display:flex }
.tool-btn{ height:28px; min-width:28px; display:grid; place-items:center; border:1px solid var(--stroke); background:rgba(255,255,255,.05); border-radius:8px; cursor:pointer; }
.tool-btn:hover{ background:rgba(255,255,255,.08) }
.drag-ghost{ opacity:.4; transform:scale(.98) }
.drag-over{ outline:2px dashed rgba(122,162,247,.6); outline-offset:2px }

/* ---- Footer ---- */
footer{
  max-width:min(1200px, 100% - 24px); margin:28px auto 36px; padding:12px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color:var(--muted); border-top:1px solid rgba(255,255,255,.06);
}
footer a{ color:#cfeadb; text-decoration:none }
footer a:hover{ text-decoration:underline }

/* ---- Loader / overlay ---- */
#sj-loader{
  position:fixed; top:calc(var(--toolbar-total) + 6px); right:12px; z-index:10; padding:6px 10px; font-size:12px; border-radius:10px;
  border:1px solid var(--stroke); background:rgba(20,22,26,.6); display:none; color:var(--text); box-shadow:0 14px 28px rgba(0,0,0,.4);
}
#sj-loader.show{ display:block }
#sj-loading-overlay{
  position:fixed; left:0; right:0; top:var(--toolbar-total); bottom:0; display:none; z-index:100;
  background: radial-gradient(60% 60% at 50% 40%, rgba(16,20,28,.90) 0%, rgba(16,20,28,.82) 60%, rgba(16,20,28,.75) 100%),
              linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  backdrop-filter: blur(6px) saturate(1.05); -webkit-backdrop-filter: blur(6px) saturate(1.05);
}
#sj-loading-overlay.show{ display:flex }
#sj-loading-overlay .inner{ margin:auto; display:grid; gap:14px; place-items:center; text-align:center; }
.sj-spinner{
  width:56px; height:56px; border-radius:50%; border:3px solid rgba(255,255,255,.12); border-top-color:#9be8c7; border-right-color:#9ec1ff;
  animation: sjSpin .9s linear infinite, sjGlow 1.6s ease-in-out infinite alternate; box-shadow: 0 0 0 2px rgba(0,0,0,.15) inset;
}
@keyframes sjSpin{ to{ transform: rotate(360deg) } }
@keyframes sjGlow{
  from{ box-shadow: 0 0 18px rgba(110,231,183,.20), 0 0 0 2px rgba(110,231,183,.10) inset }
  to  { box-shadow: 0 0 32px rgba(158,193,255,.28), 0 0 0 2px rgba(158,193,255,.16) inset }
}
#sj-loading-overlay .label{ font: 700 13px/1.2 Inter, ui-sans-serif; color:#e9eef6; opacity:.9; letter-spacing:.3px; }
.desc p#sj-error{ color:#ffb4b4 }
pre#sj-error-code{
  white-space:pre-wrap;background:#111418;padding:10px;border-radius:10px;border:1px solid #242933;color:#f0b7b7;
  overflow:auto; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ---- Settings panel ---- */
.settings-wrap{ position:relative }
#btn-settings[aria-expanded="true"]{ box-shadow:var(--glow); border-color:rgba(110,231,183,.6) }
.settings-panel{
  position:absolute; top:calc(100% + 8px); right:0; width:min(320px, 92vw); background:rgba(15,18,24,.98);
  border:1px solid var(--stroke); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.55); padding:10px; display:none; z-index:1001;
  backdrop-filter:saturate(1.1) blur(8px);
}
.settings-panel.show{ display:block; animation:fadeIn .12s ease-out }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }
.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 8px }
.settings-row + .settings-row{ border-top:1px solid rgba(255,255,255,.06) }
.settings-row small{ color:var(--muted); display:block; margin-top:2px }
.settings-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:8px }
.switch{ --w:44px; --h:26px; --pad:3px; position:relative; width:var(--w); height:var(--h); border-radius:999px; background:#202530; border:1px solid var(--stroke); cursor:pointer; flex:0 0 auto; }
.switch input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer }
.switch i{ position:absolute; top:var(--pad); left:var(--pad); width:calc(var(--h) - var(--pad)*2); height:calc(var(--h) - var(--pad)*2); border-radius:50%; background:#cfd8e6; transition:left .18s ease, background .18s ease; }
.switch input:checked + i{ left:calc(var(--w) - var(--h) + var(--pad)); background:#9be8c7 }

/* ---- Toolbar hide/reveal ---- */
.menu-btn{ height:30px; padding:0 10px; border-radius:10px; border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:var(--text); cursor:pointer; }
body.toolbar-hidden .sj-toolbar{ transform:translateY(-100%); opacity:0; pointer-events:none }
body.toolbar-hidden #sj-frame{ top:0; height:100svh }
body.toolbar-hidden .sj-landing{ padding-top:12px }
body.toolbar-hidden #sj-loader{ top:8px }
body.toolbar-hidden.toolbar-revealed .sj-toolbar{ transform: translateY(0); opacity: 1; pointer-events: auto; }
#reveal-strip{ position:fixed; top:0; left:0; right:0; height:5px; z-index:1002; pointer-events:auto; background:transparent; }
.floating-settings{
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 8px); right:calc(env(safe-area-inset-right, 0px) + 8px); z-index:1003;
  height:34px; min-width:34px; display:grid; place-items:center; padding:0 8px; border-radius:10px; border:1px solid var(--stroke);
  background:rgba(15,18,24,.85); color:var(--text); box-shadow:0 14px 34px rgba(0,0,0,.45); backdrop-filter:saturate(1.1) blur(8px);
  cursor:pointer; transition:opacity .15s ease, transform .05s ease, background .15s ease, border-color .15s ease; opacity:0; pointer-events:none;
}
.floating-settings .fa-solid{ font-size:14px }
.floating-settings:hover{ background:rgba(255,255,255,.08) }
.floating-settings:active{ transform:translateY(1px) scale(.99) }
.floating-settings:focus-visible{ outline:none; box-shadow:var(--glow); border-color:rgba(110,231,183,.6) }
body.toolbar-hidden:not(.toolbar-revealed) .floating-settings{ opacity:1; pointer-events:auto }
body.toolbar-revealed .floating-settings{ opacity:0; pointer-events:none }

/* ---- Dialog (add/edit shortcut) ---- */
dialog.sj-dialog{ border:1px solid var(--stroke); border-radius:14px; padding:0; background:#0f1218; color:var(--text); box-shadow:0 22px 60px rgba(0,0,0,.6); width:min(440px, 92vw); }
.sj-d-head{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); font-weight:700; font-family:Inter, ui-sans-serif }
.sj-d-body{ padding:12px 14px; display:grid; gap:10px }
.sj-d-row{ display:grid; gap:6px }
.sj-d-row input{ height:38px; padding:0 10px; border-radius:10px; border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:var(--text) }
.sj-d-foot{ display:flex; gap:8px; justify-content:flex-end; padding:10px 14px; border-top:1px solid rgba(255,255,255,.06) }
.btn-primary{ background:#2a5fff; border-color:#2a5fff }
.btn-danger{ border-color:#59333a; background:rgba(255,0,0,.08) }

/* ---- Responsive tweaks ---- */
@media (max-width: 860px){
  :root{ --btn-h: 38px; --btn-r: 12px }
  .sj-toolbar{ grid-template-columns: 1fr auto; grid-template-rows: auto auto auto }
  .sj-brand{ justify-content:flex-start }
  #sj-form{ grid-column:1/3 }
  .sj-right .sj-text{ display:none }
}
@media (max-width:640px){ .sj-shortcuts{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) } }
@media (max-width:420px){ .sj-shortcuts{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) } }
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ---- Custom select (re-uses existing look) ---- */
.sj-select{
  appearance: none; cursor: pointer; font-family: Inter, system-ui, sans-serif; font-size: 14px;
  padding: 6px 12px; border-radius: 10px; border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05); color: var(--text); min-height: 34px;
  transition: background .15s, border-color .15s, box-shadow .15s; box-shadow: 0 8px 20px rgba(0,0,0,.35);
  position: relative;
  background-image: linear-gradient(45deg, #ffffff88 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #ffffff88 50%);
  background-position: calc(100% - 14px) calc(50% - 3px), calc(100% - 14px) calc(50% + 3px);
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 32px;
}
.sj-select:hover{ background: rgba(255,255,255,.09); }
.sj-select:focus{ outline: none; border-color: rgba(110,231,183,.6); box-shadow: var(--glow); }
.sj-select::-ms-expand{ display: none; }
.sj-select option{ background: #0f1218; color: var(--text); padding: 6px; border: none; }

/* ---- Update dialog (4.2) ---- */
:root{
  --upd-bg: rgba(13,16,22,.98); --upd-stroke: rgba(255,255,255,.08);
  --upd-text: #e9eef6; --upd-muted:#a5adbb; --upd-ring:#7dd3fc; --upd-gradA:#2a5fff; --upd-gradB:#2456f2;
}
dialog#update42{
  border: 1px solid var(--upd-stroke); border-radius: 14px; padding: 0; background: var(--upd-bg);
  color: var(--upd-text); box-shadow: 0 24px 80px rgba(0,0,0,.65); width: min(560px, 92vw); max-width:92vw;
  z-index: 2000; backdrop-filter: saturate(1.1) blur(8px);
}
dialog#update42::backdrop{ background: rgba(0,0,0,.5); }
.upd-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--upd-stroke); font-weight:800; }
.upd-head i{ font-size:16px; color: var(--upd-ring); }
.upd-body{ padding:14px 16px; display:grid; gap:10px; }
.upd-body p{ margin:0; color:var(--upd-muted); }
.upd-list{ margin:6px 0 0; padding-left:20px }
.upd-list li{ margin:6px 0; line-height:1.35 }
.upd-foot{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--upd-stroke) }
.upd-btn{
  height:36px; padding:0 14px; border-radius:10px; border:1px solid var(--upd-stroke);
  background: rgba(255,255,255,.06); color: var(--upd-text); cursor:pointer; transition: all .3s ease; position: relative; overflow: hidden;
}
.upd-btn:hover{ background: rgba(255,255,255,.09) }
.upd-btn.primary{ border-color: transparent; background: linear-gradient(180deg, var(--upd-gradA), var(--upd-gradB)); }
.upd-btn.ghost{ background: rgba(10,12,18,.95); border: 2px solid transparent; }
.upd-btn.ghost::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(90deg,#ff004c,#ff8700,#fff400,#00ff8c,#00c2ff,#2a5fff,#a200ff,#ff00c8,#ff004c);
  background-size: 400%; animation: rainbowSpin 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes rainbowSpin{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.upd-badge{ display:inline-block; margin-left:8px; padding:2px 8px; border:1px solid var(--upd-stroke); border-radius:999px; font-size:12px; color:var(--upd-muted); }

/* ---- Utility when in-frame ---- */
body.in-frame .sj-landing, body.in-frame footer{ display:none !important }
body.in-frame #sj-frame{ display:block }