:root{--bg:#0b1220;--panel:#121a2b;--ink:#eef4ff;--muted:#9fb0d0;--acc:#4da3ff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu}
.container{max-width:980px;margin:24px auto;padding:16px}
.card{position:relative;background:var(--panel);border:1px solid #1e2a46;border-radius:16px;padding:20px;box-shadow:0 10px 25px rgba(0,0,0,.25)}
h1,h2,h3{margin:0 0 12px}h1{font-size:26px}h3{font-size:18px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stack{display:grid;gap:12px}
label{display:block;margin:6px 0 6px;color:var(--muted)}
select,input,button{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #223357;background:#0f1626;color:var(--ink);outline:none}
select:focus,input:focus{border-color:var(--acc)}
button{cursor:pointer;background:linear-gradient(180deg,var(--acc),#306bff);border:0;color:#fff;font-weight:600}
button:active{transform:translateY(1px)}
.btn-logout{position:absolute;top:12px;right:12px;width:auto;padding:6px 10px;font-size:12px;background:linear-gradient(180deg,var(--acc),#306bff)}
pre{background:#0a1120;border:1px solid #1a2745;border-radius:12px;padding:14px;overflow:auto;max-height:460px;white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-all!important;overflow-x:hidden!important;overflow-y:auto!important;max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;font-size:13px;line-height:1.35}
.panes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{background:#0a1120;border:1px solid #1a2745;border-radius:12px;padding:8px}
.panel>summary{font-weight:600;color:var(--muted);cursor:pointer;margin:2px 0 8px;list-style:none}
.panel>summary::-webkit-details-marker{display:none}
.panel[open]>summary{color:#c9d7ff}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.actions button{flex:1 1 180px;min-width:140px}
.divider{height:1px;background:#1a2745;margin:16px 0}

@media (max-width:980px){
  .container{max-width:640px;margin:10px auto;padding:8px}
  .card{padding:18px}
  h1{font-size:22px}h3{font-size:16px}
  .two{grid-template-columns:1fr}
  .panes{grid-template-columns:1fr;gap:10px}
  .actions{position:sticky;bottom:0;background:linear-gradient(180deg,#0f1626,#0b1220);padding:8px;border-top:1px solid #1a2745;backdrop-filter:blur(6px);z-index:50}
  pre{max-height:52vh;font-size:12px}
}
@media (max-width:420px){
  body{font-size:15px}
  .actions button{min-width:120px;padding:10px 8px}
  pre{max-height:50vh;font-size:11.5px}
}

.pwd-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pwd-row input {
  flex: 1;
}
.pwd-icon {
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  transition: transform 0.1s;
}
.pwd-icon:hover {
  transform: scale(1.2);
}


#btnSetAcc{
  position: relative;
  display: block;                 
  width: 100%;
  height: 44px;                
  padding: 0;                    
}


#btnSetAcc .label{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;                    
  pointer-events: none;             
  text-align: center;
  width: 100%;
}

label > input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #4da3ff;
}

button {
  min-width: 140px;
  height: 36px;
  font-size: 14px;
  margin: 4px;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
  }

  .actions button {
    flex: 1 1 48%;       
    height: 34px;
    font-size: 13px;
    margin: 3px 0;
    padding: 6px 4px;
  }
}

@media (max-width: 420px) {
  .actions button {
    flex: 1 1 48%;
    font-size: 12.5px;
    padding: 5px 3px;
    height: 32px;
  }
}

@media (min-width: 1024px) {
  
  .container, .card {
    width: 100%;
    max-width: 95vw;        
    margin: 0 auto;
    padding: 0 16px;
  }


  .panes {
    display: grid;
    grid-template-columns: 1fr 2fr; 
    gap: 12px;
    align-items: start;
  }


  #scriptBox { min-width: 0; }
  #resultBox { min-width: 0; }


  #preview, #result {
    max-height: 460px;    
    overflow: auto;
    white-space: pre;    
  }
}


@media (max-width: 1023px) {
  .panes {
    display: block;        
  }
}

.pe-tools {
  margin-top: 25px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
}
.pe-tools h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.pe-tools .pe-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.pe-tools button {
  flex: 1 1 45%;
  height: 44px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background: #1e88e5;
  color: white;
  cursor: pointer;
  transition: 0.2s;
}
.pe-tools button:hover {
  background: #1565c0;
}
.pe-tools label {
  display: block;
  color: #c8d3df;
  font-size: 14px;
  margin-bottom: 4px;
}
.pe-tools input {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
}