:root{
  --bg:#07070a;
  --panel:rgba(17,17,20,.78);
  --panel2:#0e0e12;
  --line:rgba(255,255,255,.08);
  --text:#f2f2f2;
  --muted:rgba(242,242,242,.68);
  --btn:#f2f2f2;
  --btnText:#0b0b0b;
  --accent:#e20074;
  --shadow:rgba(0,0,0,.45);
  --r:16px;
  --p:12px;
  --gap:12px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --scrollTrack:rgba(255,255,255,.06);
  --scrollThumb:rgba(226,0,116,.46);
  --scrollThumbHover:rgba(226,0,116,.66);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  user-select:none;
  background:
    radial-gradient(1100px circle at 20% 20%, rgba(226,0,116,.16), transparent 40%),
    radial-gradient(900px circle at 85% 0%, rgba(80,200,255,.12), transparent 38%),
    radial-gradient(900px circle at 80% 80%, rgba(120,90,255,.10), transparent 42%),
    url("https://api.dalex.ai/LeptonX/images/login-pages/login-bg-img-dim.svg") center/cover no-repeat,
    var(--bg);
}
input,textarea{user-select:text}
a{color:inherit}
button,input,textarea{font:inherit}
.hidden{display:none !important}
*{
  scrollbar-color: var(--scrollThumb) var(--scrollTrack);
  scrollbar-width:auto;
}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{
  background:var(--scrollTrack);
  border-radius:999px;
}
::-webkit-scrollbar-thumb{
  background:var(--scrollThumb);
  border-radius:999px;
  border:4px solid rgba(10,10,14,.72);
}
::-webkit-scrollbar-thumb:hover{background:var(--scrollThumbHover)}
.wrap{
  min-height:100dvh;
  padding:clamp(10px,2vw,18px);
  display:flex;
  align-items:center;
  justify-content:center;
}
@supports(padding: env(safe-area-inset-top)){
  .wrap{
    padding-top:calc(clamp(10px,2vw,18px) + env(safe-area-inset-top));
    padding-bottom:calc(clamp(10px,2vw,18px) + env(safe-area-inset-bottom));
    padding-left:calc(clamp(10px,2vw,18px) + env(safe-area-inset-left));
    padding-right:calc(clamp(10px,2vw,18px) + env(safe-area-inset-right));
  }
}
.card{
  width:min(440px,100%);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 18px 60px var(--shadow);
  padding:16px;
  backdrop-filter: blur(10px);
}
.row{display:flex; gap:10px; align-items:center}
.row > *{flex:1}
.h1{
  font-size:18px;
  font-weight:700;
  letter-spacing:.2px;
  margin:0 0 12px 0;
}
.field{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(10,10,14,.85);
  color:var(--text);
  outline:none;
}
.field:focus{
  border-color:rgba(226,0,116,.55);
  box-shadow:0 0 0 4px rgba(226,0,116,.14);
}
.field:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.btn{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  background:var(--btn);
  color:var(--btnText);
  font-weight:750;
}
.btn:active{transform:translateY(1px)}
.msg{font-size:13px;color:var(--muted);min-height:18px;margin-top:10px}

.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(10px,2vw,18px);
  gap:12px;
}
@supports(padding: env(safe-area-inset-top)){
  .app{
    padding-top:calc(clamp(10px,2vw,18px) + env(safe-area-inset-top));
    padding-bottom:calc(clamp(10px,2vw,18px) + env(safe-area-inset-bottom));
    padding-left:calc(clamp(10px,2vw,18px) + env(safe-area-inset-left));
    padding-right:calc(clamp(10px,2vw,18px) + env(safe-area-inset-right));
  }
}
.top{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:6px 2px 2px 2px;
}
.topLeft{grid-column:1}
.brand{
  grid-column:2;
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:2px;
}
.brandTitle{
  font-weight:800;
  letter-spacing:.3px;
  font-size:16px;
  line-height:1.1;
}
.brandSub{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.15px;
}
.topBtns{
  grid-column:3;
  justify-self:end;
  display:flex;
  gap:8px;
  align-items:center;
}
.iconBtn{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.iconBtn:active{transform:translateY(1px)}
.iconBtn.accentBtn{
  border-color:rgba(226,0,116,.40);
  background:linear-gradient(180deg, rgba(226,0,116,.22), rgba(226,0,116,.10));
}
.iconBtn.accentBtn:hover{border-color:rgba(226,0,116,.60)}
.grid{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns: 0.85fr 1.55fr;
  gap:var(--gap);
}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 18px 60px var(--shadow);
  padding:var(--p);
  display:flex;
  flex-direction:column;
  min-height:0;
  backdrop-filter: blur(10px);
}
.pHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.pHeadLeft{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.pTitle{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.2px;
}
.miniBtn{
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);
  border-radius:999px;
  height:28px;
  width:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.miniBtn:hover{border-color:rgba(226,0,116,.35)}
.miniBtn:active{transform:translateY(1px)}

.links{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  min-height:0;
  padding-bottom:2px;
}
.linkBtn{
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 10px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(10,10,14,.65);
  color:var(--text);
  font-weight:750;
  line-height:1.2;
  min-height:52px;
  user-select:none;
}
.linkBtn:hover{border-color:rgba(226,0,116,.35)}
.linkBtn:active{transform:translateY(1px)}
.emptyHint{
  border:1px dashed rgba(255,255,255,.10);
  border-radius:14px;
  padding:14px 12px;
  color:var(--muted);
  text-align:center;
  background:rgba(10,10,14,.35);
}
.smsLayout{
  display:grid;
  grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.35fr);
  gap:10px;
  min-height:0;
  flex:1;
}
@media (max-width: 900px){
  .smsLayout{grid-template-columns:1fr}
}
.list{
  min-width:0;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:auto;
  background:rgba(10,10,14,.65);
}

.item{
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
  user-select:none;
}
.item:last-child{border-bottom:0}
.item:hover{background:rgba(255,255,255,.04)}
.item.sel{background:rgba(226,0,116,.10)}
.item.unread .meta{color:rgba(242,242,242,.82)}
.item.unread .preview{color:rgba(242,242,242,.92);font-weight:800}
.meta{display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px}
.preview{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.viewer{
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.textbox{
  flex:1;
  min-height:220px;
  width:100%;
  resize:none;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(10,10,14,.65);
  color:var(--text);
  outline:none;
  user-select:text;
}
.textbox:focus{
  border-color:rgba(226,0,116,.45);
  box-shadow:0 0 0 4px rgba(226,0,116,.12);
}

.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  background:rgba(16,16,20,.92);
  border:1px solid var(--line);
  color:var(--muted);
  padding:10px 12px;
  border-radius:999px;
  font-size:12px;
  box-shadow:0 18px 60px var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  backdrop-filter: blur(10px);
  z-index:60;
}
@supports(bottom: env(safe-area-inset-bottom)){
  .toast{bottom:calc(18px + env(safe-area-inset-bottom))}
}
.toast.show{opacity:1}
.modalBack{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:16px;
  z-index:40;
  overflow:auto;
}
@supports(padding: env(safe-area-inset-top)){
  .modalBack{
    padding-top:calc(16px + env(safe-area-inset-top));
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
    padding-left:calc(16px + env(safe-area-inset-left));
    padding-right:calc(16px + env(safe-area-inset-right));
  }
}
.modal{
  width:min(680px,100%);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 24px 80px var(--shadow);
  padding:14px;
  backdrop-filter: blur(12px);
}
@supports(max-height: calc(100dvh - env(safe-area-inset-top))){
  .modal{
    max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
.modalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.kv{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(10,10,14,.65);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.k{
  color:var(--muted);
  font-size:12px;
}
.actionsRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}
.actionsRight{
  display:flex;
  align-items:center;
  gap:8px;
}
.smallBtn{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.smallBtn:hover{border-color:rgba(226,0,116,.35)}
.smallBtn:active{transform:translateY(1px)}
.dangerBtn:hover{border-color:rgba(255,120,120,.35)}
.primaryBtn{
  border:0;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  background:var(--btn);
  color:var(--btnText);
  font-weight:750;
}
.primaryBtn:active{transform:translateY(1px)}
.ctx{
  position:fixed;
  z-index:55;
  min-width:210px;
  max-width:min(320px, calc(100vw - 20px));
  background:rgba(16,16,20,.96);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 80px var(--shadow);
  padding:8px;
  backdrop-filter: blur(12px);
}
.ctxItem{
  width:100%;
  text-align:left;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  border-radius:12px;
  padding:10px 10px;
  cursor:pointer;
  font-weight:650;
}
.ctxItem:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.08);
}
.ctxItem.danger{color:rgba(255,170,170,.95)}
.ctxItem.danger:hover{background:rgba(255,120,120,.10);border-color:rgba(255,120,120,.20)}
.ctxItem.disabled{
  opacity:.45;
  cursor:default;
}
.ctxItem.disabled:hover{
  background:transparent;
  border-color:transparent;
}
.ctxSep{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:6px 4px;
  border-radius:999px;
}
.v{
  color:rgba(242,242,242,.92);
  font-size:13px;
  line-height:1.35;
  word-break:break-word;
}
.monoRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.mono{
  flex:1;
  min-width:220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12px;
  color:rgba(242,242,242,.92);
  background:rgba(0,0,0,.18);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px;
  overflow:auto;
}