:root{
  --ui-bg:#12121f;
  --ui-bg2:#171729;
  --ui-line:rgba(255,255,255,.1);
  --ui-txt:#ececf6;
  --ui-mut:#9a9ab8;
  --ui-a:#a78bfa;
  --ui-b:#f472b6;
  --ui-ok:#34d399;
  --ui-warn:#fbbf24;
  --ui-bad:#f87171;
  --ui-ease:cubic-bezier(.22,1,.36,1);
  --ui-side-w:clamp(280px,50vw,520px);
}

html.ui-lock{overflow:hidden}

.ui-layer{
  position:fixed;
  inset:0;
  z-index:1100;
  display:grid;
  place-items:center;
  padding:16px;
  padding-bottom:max(16px,env(safe-area-inset-bottom));
}

.ui-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,5,12,.68);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.ui-dialog{
  position:relative;
  width:min(100%,420px);
  max-height:min(88vh,680px);
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 22px 20px;
  overflow:auto;
  overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),var(--ui-bg);
  border:1px solid var(--ui-line);
  border-radius:24px;
  color:var(--ui-txt);
  font-family:inherit;
  outline:none;
}

.ui-dialog.wide{width:min(100%,560px)}

.ui-icon{
  width:54px;
  height:54px;
  margin:0 auto;
  border-radius:17px;
  display:grid;
  place-items:center;
  flex:none;
}

.ui-icon.info,.ui-icon.question{color:var(--ui-a);background:rgba(167,139,250,.15)}
.ui-icon.success{color:var(--ui-ok);background:rgba(52,211,153,.15)}
.ui-icon.warning{color:var(--ui-warn);background:rgba(251,191,36,.15)}
.ui-icon.error{color:var(--ui-bad);background:rgba(248,113,113,.15)}

.ui-icon svg,.ui-t-ic svg,.ui-check svg,.ui-select-chev svg,.ui-icon-btn svg,.ui-side-ic svg{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ui-icon svg{width:27px;height:27px}

.ui-title{font-size:1.18rem;font-weight:800;line-height:1.3;text-align:center;letter-spacing:-.005em}

.ui-msg{color:#c9c9de;font-size:.95rem;line-height:1.6;text-align:center;white-space:pre-line}

.ui-content{color:#c9c9de;font-size:.93rem;line-height:1.6}

.ui-actions{display:flex;gap:10px;margin-top:6px}
.ui-actions .ui-btn{flex:1}

.ui-btn{
  appearance:none;
  -webkit-appearance:none;
  min-height:46px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid var(--ui-line);
  background:rgba(255,255,255,.06);
  color:var(--ui-txt);
  font:inherit;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .3s var(--ui-ease),filter .3s,background .3s;
}

.ui-btn:active{transform:scale(.97)}
.ui-btn:focus-visible{outline:2px solid var(--ui-a);outline-offset:2px}

.ui-btn.primary{background:linear-gradient(135deg,var(--ui-a),var(--ui-b));border-color:transparent;color:#120a24}
.ui-btn.danger{background:linear-gradient(135deg,#f87171,#fb7185);border-color:transparent;color:#2a0710}

.ui-field{display:grid;gap:6px}

.ui-input{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--ui-line);
  background:rgba(255,255,255,.04);
  color:var(--ui-txt);
  font:inherit;
  font-size:1rem;
  outline:none;
  resize:vertical;
  transition:border-color .3s,box-shadow .3s;
}

.ui-input::placeholder{color:var(--ui-mut)}
.ui-input:focus{border-color:var(--ui-a);box-shadow:0 0 0 3px rgba(167,139,250,.2)}
.ui-input.err{border-color:var(--ui-bad);box-shadow:0 0 0 3px rgba(248,113,113,.16)}

.ui-err{display:none;color:var(--ui-bad);font-size:.82rem;font-weight:600}
.ui-err.show{display:block}

.ui-list{
  position:relative;
  display:grid;
  gap:8px;
  max-height:min(46vh,360px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:2px;
  margin:0 -2px;
}

.ui-opt{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:54px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--ui-line);
  background:rgba(255,255,255,.03);
  color:var(--ui-txt);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .3s,border-color .3s,transform .3s var(--ui-ease);
}

.ui-opt:active{transform:scale(.98)}
.ui-opt:focus-visible{outline:2px solid var(--ui-a);outline-offset:2px}
.ui-opt[hidden],.ui-empty[hidden]{display:none}

.ui-opt-main{flex:1;min-width:0;display:grid;gap:2px}
.ui-opt-label{font-weight:700;font-size:.97rem}
.ui-opt-desc{color:var(--ui-mut);font-size:.8rem}

.ui-check{
  width:24px;
  height:24px;
  flex:none;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  display:grid;
  place-items:center;
  color:#120a24;
  transition:background .3s,border-color .3s;
}

.ui-list.multi .ui-check{border-radius:8px}

.ui-check svg{width:13px;height:13px;stroke-width:3.4;opacity:0;transition:opacity .25s}

.ui-opt[aria-selected="true"]{border-color:rgba(167,139,250,.6);background:rgba(167,139,250,.13)}
.ui-opt[aria-selected="true"] .ui-check{background:linear-gradient(135deg,var(--ui-a),var(--ui-b));border-color:transparent}
.ui-opt[aria-selected="true"] .ui-check svg{opacity:1}
.ui-opt[aria-disabled="true"]{opacity:.4;pointer-events:none}

.ui-empty{padding:18px;text-align:center;color:var(--ui-mut);font-size:.9rem}

.ui-select{position:relative;display:block;width:100%}

.ui-select select{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
}

.ui-select-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--ui-line);
  background:rgba(255,255,255,.04);
  color:var(--ui-txt);
  font:inherit;
  font-size:1rem;
  text-align:left;
  cursor:pointer;
  transition:border-color .3s,box-shadow .3s;
}

.ui-select-btn:focus-visible,.ui-select-btn:active{border-color:var(--ui-a);box-shadow:0 0 0 3px rgba(167,139,250,.2);outline:none}
.ui-select-btn.ph .ui-select-label{color:var(--ui-mut)}
.ui-select-btn:disabled{opacity:.5;cursor:not-allowed}
.ui-select-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-select-chev{display:grid;place-items:center;color:var(--ui-mut)}
.ui-select-chev svg{width:18px;height:18px}

.ui-toasts{
  position:fixed;
  left:0;
  right:0;
  top:max(12px,env(safe-area-inset-top));
  z-index:9999;
  display:grid;
  justify-items:center;
  gap:10px;
  padding:0 14px;
  pointer-events:none;
}

.ui-toast{
  position:relative;
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:12px;
  width:min(100%,420px);
  padding:12px 14px;
  overflow:hidden;
  border-radius:16px;
  background:var(--ui-bg2);
  border:1px solid var(--ui-line);
  color:var(--ui-txt);
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
}

.ui-t-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.ui-t-ic svg{width:18px;height:18px}
.ui-t-ic.info{color:var(--ui-a);background:rgba(167,139,250,.15)}
.ui-t-ic.success{color:var(--ui-ok);background:rgba(52,211,153,.15)}
.ui-t-ic.warning{color:var(--ui-warn);background:rgba(251,191,36,.15)}
.ui-t-ic.error{color:var(--ui-bad);background:rgba(248,113,113,.15)}
.ui-t-txt{flex:1;min-width:0;line-height:1.4}

.ui-bar{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:100%;
  transform-origin:left;
  background:linear-gradient(90deg,var(--ui-a),var(--ui-b));
}

.ui-side-backdrop{
  position:fixed;
  inset:0;
  z-index:1040;
  background:rgba(5,5,12,.62);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity .5s var(--ui-ease),visibility 0s .5s;
}

.ui-side-backdrop.show{opacity:1;visibility:visible;transition:opacity .5s var(--ui-ease),visibility 0s}

.ui-sidebar{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:1050;
  width:var(--ui-side-w);
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
  overflow:auto;
  overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),var(--ui-bg);
  border-left:1px solid var(--ui-line);
  color:var(--ui-txt);
  font-family:inherit;
  outline:none;
  visibility:hidden;
  pointer-events:none;
  clip-path:inset(0 0 100% 0);
}

.ui-sidebar.open{visibility:visible;pointer-events:auto;clip-path:inset(0 0 0 0)}

.ui-side-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 4px 14px;
  margin-bottom:8px;
  border-bottom:1px solid var(--ui-line);
}

.ui-side-title{font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-a)}

.ui-icon-btn{
  width:44px;
  height:44px;
  flex:none;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid var(--ui-line);
  background:rgba(255,255,255,.05);
  color:var(--ui-txt);
  cursor:pointer;
  transition:transform .3s var(--ui-ease),background .3s;
}

.ui-icon-btn:active{transform:scale(.94)}
.ui-icon-btn:focus-visible{outline:2px solid var(--ui-a);outline-offset:2px}
.ui-icon-btn svg{width:20px;height:20px}

.ui-side-link{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid transparent;
  color:var(--ui-txt);
  font-weight:600;
  text-decoration:none;
  transition:background .3s,border-color .3s,transform .3s var(--ui-ease);
}

.ui-side-link:active{transform:scale(.98)}
.ui-side-link:focus-visible{outline:2px solid var(--ui-a);outline-offset:2px}
.ui-side-link.is-active{background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.35)}

.ui-side-ic{
  width:36px;
  height:36px;
  flex:none;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:var(--ui-a);
  background:rgba(167,139,250,.12);
}

.ui-side-ic svg{width:19px;height:19px}

.ui-side-foot{margin-top:auto;padding-top:16px;display:grid;gap:10px}

@media (hover:hover){
  .ui-btn:hover{filter:brightness(1.1)}
  .ui-btn:not(.primary):not(.danger):hover{background:rgba(255,255,255,.1)}
  .ui-opt:hover{background:rgba(255,255,255,.07)}
  .ui-side-link:hover{background:rgba(255,255,255,.06)}
  .ui-icon-btn:hover{background:rgba(255,255,255,.1)}
  .ui-select-btn:hover{border-color:rgba(167,139,250,.5)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}