:root{
  --bg1: #0f172a;
  --bg2: #0b1220;
  --accent1: #7c3aed; /* gradient start */
  --accent2: #06b6d4; /* gradient end */
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.04);
  --card-bg: rgba(255,255,255,0.03);
  --text: #e6eef8;
  --muted: #9fb2c8;
  --danger: #ef4444;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background: linear-gradient(135deg,var(--bg1) 0%, #071020 50%, var(--bg2) 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  direction:rtl;
}

.container{
  max-width:980px;
  margin:28px auto;
  padding:20px;
}

.header{
  text-align:center;
  margin-bottom:18px;
}

.header h1{
  margin:0;
  font-size:28px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:0.3px;
}

.sub{color:var(--muted); margin-top:6px}

.card{
  border-radius:14px;
  padding:18px;
  margin-bottom:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 6px 18px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.04);
}

.form-card{
  display:block;
}

.row{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.row label{min-width:110px; color:var(--muted)}
.row input[type="number"], .row input[type="text"]{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:none;
  outline:none;
  background: linear-gradient(180deg,var(--glass), var(--glass-2));
  color:var(--text);
  box-shadow: 0 4px 12px rgba(2,6,23,0.6);
}

.actions{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  margin-top:6px;
}

.btn{
  padding:10px 14px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background: rgba(255,255,255,0.04);
  color:var(--text);
  box-shadow: 0 6px 14px rgba(2,6,23,0.6);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover{ transform: translateY(-3px)}
.btn.small{ padding:6px 8px; font-size:13px }
.btn.primary{
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color: #fff;
  box-shadow: 0 10px 30px rgba(92,33,211,0.18);
}
.btn.danger{
  background: linear-gradient(90deg,#fb7185,#ef4444);
  color:#fff;
}

.output-card .result{ display:flex; flex-direction:column; gap:10px }
.item{ background: rgba(0,0,0,0.12); padding:10px; border-radius:8px }
.token-row{ display:flex; gap:8px; align-items:center; margin-top:8px }
.pre{
  background: rgba(0,0,0,0.10);
  padding:10px;
  border-radius:8px;
  max-height:180px;
  overflow:auto;
  font-family: monospace;
}

.saved-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.saved-list li{
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(255,255,255,0.02);
  padding:8px 10px; border-radius:8px;
}
.saved-list .meta{ font-size:13px; color:var(--muted) }
.saved-list .controls{ display:flex; gap:8px }

.footer{ text-align:center; color:var(--muted); margin-top:10px; font-size:13px }

@media (max-width:600px){
  .row{ flex-direction:column; align-items:stretch }
  .actions{flex-direction:column}
}