/* Xenon windows: every popup (profile, clipping, clips, profiles) and the
   Settings page wear the same purple desktop-window frame. window.js builds
   the frame around whatever element it is given; this is only its look. */

.xw{position:relative;box-sizing:border-box;width:min(640px,94vw);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;isolation:isolate;color:#f3ecff;text-align:left;
  background:
    radial-gradient(110% 80% at 0% 0%,rgba(168,85,247,.42),transparent 55%),
    radial-gradient(90% 70% at 100% 100%,rgba(236,72,153,.26),transparent 60%),
    linear-gradient(160deg,#1d0b3b 0%,#12072a 55%,#250a45 100%);
  border:1px solid rgba(206,170,255,.38);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 30px 80px rgba(0,0,0,.6),0 0 70px rgba(168,85,247,.32);
  animation:xw-in .32s cubic-bezier(.2,.9,.3,1.15);
  transition:width .25s ease,height .25s ease,max-height .25s ease,border-radius .25s ease}
@keyframes xw-in{from{opacity:0;transform:translateY(14px) scale(.96)}}

/* Slow aurora behind everything. */
.xw::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;opacity:.55;filter:blur(40px);
  background:conic-gradient(from 0deg,transparent 0 15%,rgba(168,85,247,.5) 25%,transparent 40%,rgba(236,72,153,.35) 60%,transparent 75%,rgba(99,102,241,.45) 88%,transparent);
  animation:xw-spin 18s linear infinite}
@keyframes xw-spin{to{transform:rotate(360deg)}}
/* Glossy top edge. */
.xw::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}

/* Twinkling specks scattered by window.js. */
.xw-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.xw-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(216,180,255,.9);opacity:0;
  animation:xw-twinkle 3.2s ease-in-out infinite}
@keyframes xw-twinkle{50%{opacity:.9}}

/* ---- title bar ---- */
.xw-bar{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:center;gap:.6rem;height:42px;padding:0 .5rem 0 .9rem;
  background:linear-gradient(90deg,rgba(124,58,237,.6),rgba(168,85,247,.38) 50%,rgba(236,72,153,.38));
  border-bottom:1px solid rgba(225,195,255,.26);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden}
.xw-bar:active{cursor:grabbing}
/* A shine sweeping across the bar now and then. */
.xw-bar::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);animation:xw-shine 5.5s ease-in-out infinite}
@keyframes xw-shine{0%,55%{left:-40%}100%{left:130%}}
.xw-spark{flex:0 0 auto;font-size:.8rem;letter-spacing:.2em;color:#f5d0fe;text-shadow:0 0 8px rgba(240,171,252,.9)}
.xw-spark b{display:inline-block;font-weight:400;animation:xw-pulse 2.4s ease-in-out infinite}
.xw-spark b:nth-child(2){animation-delay:.8s;opacity:.7}
.xw-spark b:nth-child(3){animation-delay:1.6s;opacity:.5}
@keyframes xw-pulse{50%{transform:scale(1.35) rotate(20deg);opacity:1}}
.xw-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 .8rem/1 system-ui,"Segoe UI",sans-serif;letter-spacing:.08em;color:#fff;text-shadow:0 1px 8px rgba(124,58,237,.8)}
.xw-ctrls{flex:0 0 auto;display:flex;gap:.3rem}
.xw-ctrls button{width:32px;height:26px;display:grid;place-items:center;padding:0;border-radius:8px;cursor:pointer;
  border:1px solid rgba(235,215,255,.22);background:rgba(255,255,255,.08);color:#f3e8ff;font:600 .8rem/1 system-ui,sans-serif;
  transition:background .15s,box-shadow .15s,transform .15s}
.xw-ctrls button:hover{background:rgba(192,132,252,.45);box-shadow:0 0 14px rgba(192,132,252,.7);transform:translateY(-1px)}
.xw-ctrls .xw-close:hover{background:linear-gradient(135deg,#f43f5e,#ec4899);box-shadow:0 0 16px rgba(244,63,94,.8)}
.xw-ctrls svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.8;fill:none}

/* ---- body: the content sits in its own inner panel ---- */
.xw-body{position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow:auto;padding:22px;display:flex;justify-content:center;
  scrollbar-width:thin;scrollbar-color:rgba(192,132,252,.5) transparent}
.xw-panel{box-sizing:border-box;width:100%;max-width:560px;padding:1.2rem 1.3rem;border-radius:16px;
  background:rgba(12,4,28,.55);border:1px solid rgba(206,170,255,.2);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 12px 40px rgba(20,0,50,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* Whatever was wrapped keeps its layout but gives up its own card look. */
.xw-panel > *{background:transparent !important;border:0 !important;box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  width:100% !important;max-width:none !important;max-height:none !important;margin:0 !important;padding:0 !important;overflow:visible !important}
.xw .xn-x{display:none !important}

/* Minimise rolls the window up to its bar; maximise fills the screen. */
.xw.xw-min .xw-body{display:none}
.xw.xw-max{width:96vw !important;height:calc(100dvh - 32px);max-height:none}
.xw.xw-max .xw-panel{max-width:none}

/* Purple accents on the controls inside. */
.xw input[type=text],.xw input:not([type]),.xw textarea,.xw select,.xw .xp-in,.xw .sp-set-text,.xw .sp-set-sel{
  border-color:rgba(206,170,255,.28) !important;background:rgba(20,6,44,.6) !important;color:#f3ecff !important}
.xw input:focus,.xw textarea:focus,.xw select:focus{outline:0;border-color:rgba(232,121,249,.75) !important;box-shadow:0 0 0 3px rgba(192,132,252,.22) !important}
.xw .xp-save,.xw .xn-btn.main{border:0 !important;color:#fff !important;font-weight:700;
  background:linear-gradient(135deg,#c084fc,#8b5cf6 55%,#ec4899) !important;box-shadow:0 6px 22px rgba(168,85,247,.45)}
.xw .xp-save:hover,.xw .xn-btn.main:hover{filter:brightness(1.1)}
.xw .xp-skip,.xw .xn-btn:not(.main):not(.red){border-color:rgba(206,170,255,.32) !important;color:#e9d5ff !important}
.xw input[type=checkbox],.xw input[type=range]{accent-color:#c084fc}
.xw .sp-set-chk:checked{background:linear-gradient(135deg,#a855f7,#ec4899) !important}
.xw .xn-sw[aria-checked=true]{background:linear-gradient(135deg,#a855f7,#ec4899) !important}

/* Settings: the window replaces the page heading, and runs wide - the
   settings flow across in tiles instead of one long column. */
.sp-page:has(> .xw) > .sp-page-title{display:none}
.sp-page:has(> .xw){max-width:none !important;padding-top:clamp(1rem,6vh,3rem) !important}
.sp-page > .xw{margin:0 auto;width:min(1240px,96vw) !important;max-height:none}
.sp-page > .xw .xw-panel{max-width:none}
.sp-page > .xw .sp-set{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:.6rem;align-items:stretch}
.sp-page > .xw .sp-set-row{margin:0 !important;padding:.7rem .85rem !important;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(206,170,255,.14);min-height:58px;transition:border-color .15s,background .15s}
.sp-page > .xw .sp-set-row:hover{border-color:rgba(232,121,249,.4);background:rgba(192,132,252,.07)}
.sp-page > .xw .sp-set-row .sp-set-text,.sp-page > .xw .sp-set-row .sp-set-sel{max-width:58%}
.sp-page > .xw .sp-set-head,.sp-page > .xw .sp-set-sep,.sp-page > .xw .sp-set-note,.sp-page > .xw .sp-set-sub,.sp-page > .xw .sp-set-reset,
.sp-page > .xw .sp-set > :not(.sp-set-row){grid-column:1/-1}
.sp-page > .xw .sp-set-sep{height:0;border:0;margin:.3rem 0 0}
.sp-page > .xw .sp-set-head{margin:.6rem 0 0 !important;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,213,255,.55)}
.sp-page > .xw .xn-set-border{grid-column:span 2}
@media (max-width:640px){.sp-page > .xw .xn-set-border{grid-column:1/-1}}

@media (max-width:520px){
  .xw-body{padding:12px}
  .xw-panel{padding:1rem}
  .xw-ctrls button{width:28px}
}
@media (prefers-reduced-motion:reduce){
  .xw,.xw::before,.xw-bar::after,.xw-stars i,.xw-spark b{animation:none !important}
}