/* =========================================================
   SM917 INTERACTIVE LAB — inspired by modern micro-interactions
   Isolated layer: no header/nav/layout overrides.
   ========================================================= */

/* --- Mods interactive spotlight --- */
.sm917-spotlight{padding:10px 0 42px}
.sm917-spotlight-shell{
  --spot-a:76,132,255;--spot-b:133,92,255;
  position:relative;min-height:520px;overflow:hidden;border:1px solid var(--line);
  border-radius:30px;background:
    radial-gradient(circle at 78% 26%,rgba(var(--spot-b),.22),transparent 34%),
    radial-gradient(circle at 18% 84%,rgba(var(--spot-a),.18),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:0 26px 70px rgba(0,0,0,.18);isolation:isolate;
  transition:background .55s ease,border-color .35s ease
}
.sm917-spotlight-shell::before{
  content:"";position:absolute;inset:-15%;z-index:-2;opacity:.16;
  background:var(--spot-cover,none) center/cover no-repeat;filter:blur(34px) saturate(1.2);
  transform:scale(1.12);transition:background-image .45s ease,opacity .3s ease
}
.sm917-spotlight-shell::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(7,12,24,.94) 0%,rgba(7,12,24,.74) 42%,rgba(7,12,24,.18) 76%,rgba(7,12,24,.40) 100%)
}
.sm917-spotlight-stage{display:grid;grid-template-columns:minmax(0,.88fr) minmax(340px,1.12fr);min-height:520px}
.sm917-spotlight-copy{padding:54px 22px 110px 52px;display:flex;flex-direction:column;justify-content:center;max-width:620px}
.sm917-spotlight-kicker{font-size:.72rem;font-weight:900;letter-spacing:.14em;color:rgb(var(--spot-a));text-transform:uppercase}
.sm917-spotlight-title{margin:10px 0 12px;font-size:clamp(2.5rem,5vw,5.4rem);line-height:.92;letter-spacing:-.06em;max-width:650px}
.sm917-spotlight-desc{margin:0;max-width:580px;color:#aebbd1;line-height:1.68;font-size:.98rem}
.sm917-spotlight-meta{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.sm917-spotlight-meta span{padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.05);font-size:.75rem;color:#dce6f8}
.sm917-spotlight-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sm917-spotlight-action{box-shadow:0 12px 34px rgba(var(--spot-a),.18)!important}
.sm917-spotlight-visual{position:relative;display:grid;place-items:center;padding:30px 42px 96px 16px;perspective:1000px}
.sm917-spotlight-product{
  position:relative;width:min(92%,650px);aspect-ratio:1.3/1;display:grid;place-items:center;
  transform-style:preserve-3d;transition:transform .16s ease-out,opacity .25s ease
}
.sm917-spotlight-product.is-switching{opacity:0;transform:translateY(12px) scale(.97)}
.sm917-spotlight-product img{
  position:relative;z-index:2;max-width:84%;max-height:82%;object-fit:contain;
  filter:drop-shadow(0 32px 40px rgba(0,0,0,.38));transform:translateZ(44px);
  transition:filter .4s ease
}
.sm917-spotlight-product::before{
  content:"";position:absolute;width:74%;height:54%;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--spot-a),.30),rgba(var(--spot-b),.10) 45%,transparent 72%);
  filter:blur(14px);transform:translateY(14%) rotateX(70deg)
}
.sm917-spotlight-thumbs{
  position:absolute;left:36px;right:36px;bottom:26px;display:flex;gap:10px;z-index:5;overflow:auto;padding:3px 2px 5px;
  scrollbar-width:none
}
.sm917-spotlight-thumbs::-webkit-scrollbar{display:none}
.sm917-spot-thumb{
  flex:0 0 84px;height:68px;border:1px solid rgba(255,255,255,.11);border-radius:15px;
  background:rgba(10,16,31,.68);backdrop-filter:blur(12px);cursor:pointer;padding:6px;
  display:grid;grid-template-columns:1fr;place-items:center;color:#fff;transition:transform .25s ease,border-color .25s ease,background .25s ease
}
.sm917-spot-thumb:hover{transform:translateY(-3px);border-color:rgba(var(--spot-a),.55)}
.sm917-spot-thumb.active{background:rgba(var(--spot-a),.15);border-color:rgba(var(--spot-a),.75);box-shadow:0 0 0 2px rgba(var(--spot-a),.08)}
.sm917-spot-thumb img{max-width:100%;max-height:48px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.28))}
.sm917-spot-thumb span{font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68px}

body.light .sm917-spotlight-shell{background:radial-gradient(circle at 78% 26%,rgba(var(--spot-b),.13),transparent 34%),radial-gradient(circle at 18% 84%,rgba(var(--spot-a),.11),transparent 34%),#f8fbff;border-color:rgba(28,43,76,.13);box-shadow:0 26px 70px rgba(52,68,108,.13)}
body.light .sm917-spotlight-shell::after{background:linear-gradient(90deg,rgba(248,251,255,.98) 0%,rgba(248,251,255,.90) 43%,rgba(248,251,255,.38) 76%,rgba(248,251,255,.62) 100%)}
body.light .sm917-spotlight-desc{color:#5f6d88}
body.light .sm917-spotlight-meta span{color:#34415d;background:rgba(255,255,255,.62);border-color:rgba(28,43,76,.13)}
body.light .sm917-spot-thumb{background:rgba(255,255,255,.76);border-color:rgba(28,43,76,.13);color:#182238}
body.light .sm917-spot-thumb.active{background:rgba(var(--spot-a),.10);border-color:rgba(var(--spot-a),.55)}

/* --- Dropzone/file animation --- */
.giveaway-image-picker.settigation-dropzone{position:relative;transition:border-color .25s ease,background .25s ease,transform .25s ease,box-shadow .25s ease}
.giveaway-image-picker.settigation-dropzone.is-dragover{border-color:rgba(85,167,255,.65)!important;background:rgba(64,130,255,.08)!important;box-shadow:0 0 0 4px rgba(64,130,255,.08),0 20px 40px rgba(0,0,0,.12);transform:translateY(-2px)}
.settigation-drop-hint{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;margin-top:10px;border:1px dashed rgba(111,145,214,.26);border-radius:13px;color:var(--muted);font-size:.8rem;transition:.25s ease}
.settigation-drop-hint strong{color:var(--text)}
.settigation-drop-icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:rgba(79,130,255,.10);color:#72a8ff;font-weight:900;transition:transform .25s ease}
.is-dragover .settigation-drop-icon{transform:translateY(-3px) scale(1.05)}
.settigation-file-row{grid-column:1/-1;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;margin-top:10px;padding:10px 11px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.025);animation:settigationFileIn .34s cubic-bezier(.22,.8,.32,1)}
.settigation-file-row[hidden]{display:none}
@keyframes settigationFileIn{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
.settigation-file-thumb{width:42px;height:42px;border-radius:10px;object-fit:cover;background:rgba(255,255,255,.05)}
.settigation-file-name{font-size:.82rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settigation-file-sub{font-size:.7rem;color:var(--muted);margin-top:2px}
.settigation-upload-bars{display:flex;gap:3px;align-items:flex-end;height:18px}
.settigation-upload-bars i{display:block;width:4px;border-radius:999px;background:rgba(97,133,195,.28);height:6px;transition:height .28s ease,background .28s ease}
.settigation-file-row.is-ready .settigation-upload-bars i:nth-child(1){height:8px;background:#4c8fff}
.settigation-file-row.is-ready .settigation-upload-bars i:nth-child(2){height:11px;background:#5f9cff}
.settigation-file-row.is-ready .settigation-upload-bars i:nth-child(3){height:14px;background:#706fff}
.settigation-file-row.is-ready .settigation-upload-bars i:nth-child(4){height:17px;background:#8b5cff}
.settigation-file-row.is-uploading .settigation-upload-bars i{animation:settigationBars .8s infinite alternate}
.settigation-file-row.is-uploading .settigation-upload-bars i:nth-child(2){animation-delay:.12s}.settigation-file-row.is-uploading .settigation-upload-bars i:nth-child(3){animation-delay:.24s}.settigation-file-row.is-uploading .settigation-upload-bars i:nth-child(4){animation-delay:.36s}
@keyframes settigationBars{to{height:18px;background:#52d891}}
body.light .settigation-file-row{background:#f6f8fd;border-color:rgba(28,43,76,.11)}
body.light .settigation-drop-hint{border-color:rgba(36,119,232,.22)}

/* --- Registration password strength --- */
.sm917-password-meter{margin-top:9px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.024);transition:border-color .25s ease,background .25s ease}
.sm917-password-meter-head{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:.74rem;color:var(--muted)}
.sm917-password-meter-head strong{color:var(--text)}
.sm917-password-segments{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:9px 0 8px}
.sm917-password-segments i{display:block;height:5px;border-radius:999px;background:rgba(119,137,172,.18);transition:background .25s ease,transform .25s ease}
.sm917-password-meter[data-score="1"] i:nth-child(-n+1){background:#f15f6f}.sm917-password-meter[data-score="2"] i:nth-child(-n+2){background:#f29955}.sm917-password-meter[data-score="3"] i:nth-child(-n+3){background:#e5b83f}.sm917-password-meter[data-score="4"] i:nth-child(-n+4){background:#49bfc1}.sm917-password-meter[data-score="5"] i:nth-child(-n+5){background:#42cf8c}
.sm917-password-meter[data-score]:not([data-score="0"]) .sm917-password-segments i{transform:scaleY(1.05)}
.sm917-password-note{display:flex;align-items:center;gap:8px;font-size:.73rem;color:var(--muted)}
.sm917-password-icon{font-size:1.15rem;line-height:1}
body.light .sm917-password-meter{background:#f6f8fd;border-color:rgba(28,43,76,.11)}

/* --- Reactive SM917 mark on login --- */
.sm917-reactive-mark{width:74px;height:74px;margin:-3px auto 14px;position:relative;display:grid;place-items:center;transform-style:preserve-3d;transition:transform .16s ease-out}
.sm917-reactive-mark::before{content:"";position:absolute;inset:4px;border-radius:24px;background:linear-gradient(135deg,#4e9bff,#765cff);box-shadow:0 18px 38px rgba(75,104,255,.28)}
.sm917-reactive-mark::after{content:"";position:absolute;inset:-13px;border-radius:50%;background:radial-gradient(circle,rgba(78,155,255,.13),transparent 68%);z-index:-1}
.sm917-reactive-mark span{position:relative;color:#fff;font-weight:950;font-size:1.5rem;letter-spacing:-.05em;transform:translateZ(18px)}
.sm917-reactive-dots{position:absolute;top:22px;display:flex;gap:12px;transform:translateZ(22px)}
.sm917-reactive-dots i{width:4px;height:4px;border-radius:50%;background:#dff4ff;box-shadow:0 0 8px rgba(255,255,255,.8)}
.sm917-reactive-mark.is-password .sm917-reactive-dots i{transform:scaleX(.45)}

@media(max-width:900px){
 .sm917-spotlight-stage{grid-template-columns:1fr;min-height:640px}.sm917-spotlight-copy{padding:38px 28px 12px}.sm917-spotlight-visual{min-height:340px;padding:0 18px 100px}.sm917-spotlight-shell::after{background:linear-gradient(180deg,rgba(7,12,24,.94),rgba(7,12,24,.62) 48%,rgba(7,12,24,.30))}body.light .sm917-spotlight-shell::after{background:linear-gradient(180deg,rgba(248,251,255,.97),rgba(248,251,255,.74) 48%,rgba(248,251,255,.38))}.sm917-spotlight-thumbs{left:20px;right:20px}.sm917-spotlight-title{font-size:clamp(2.35rem,10vw,4rem)}
}
@media(max-width:560px){.sm917-spotlight-copy{padding:30px 20px 12px}.sm917-spotlight-visual{min-height:300px}.sm917-spot-thumb{flex-basis:72px;height:60px}.settigation-drop-hint{align-items:flex-start}.sm917-reactive-mark{width:64px;height:64px}}