/* ===== Mobile-first refresh (v6.1) ===== */
:root{
  --bg:#0b1020; --bg2:#0c1328;
  --card:#121831; --card2:#0f1530;
  --muted:#9bb0ff; --text:#e7ecff;
  --accent:#5a7bff; --accent2:#6ea1ff;
  --border:#243060; --border2:#2a335e;
  --ok:#8ee0a1; --warn:#ffd27a;
}
*{box-sizing:border-box}
html,body{height:100%}
/* Better font and mobile typescale */
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.45;
}
a{color:#cfe1ff;text-decoration:none}
.container{max-width:1160px;margin:0 auto;padding:12px}
.card{
  background:linear-gradient(180deg,#101734,var(--card2));
  border:1px solid var(--border2);
  border-radius:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  overflow:hidden
}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border2);gap:8px}
header h1{font-size:16px;margin:0;letter-spacing:.2px}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{padding:8px 10px;border:1px solid var(--border2);border-radius:10px;background:var(--card2);font-size:13px}

.grid{display:grid;grid-template-columns:1fr;gap:12px;padding:12px}
label{font-size:12px;color:#b3c2ff;margin-bottom:6px;display:block}
input,select,textarea{
  width:100%;background:#0d142e;border:1px solid var(--border2);
  color:var(--text);border-radius:14px;padding:12px 14px;font-size:15px;outline:none
}
textarea{min-height:160px;resize:vertical}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row>*{flex:1 1 160px}

.btn{
  background:linear-gradient(180deg,#657dff,#4d6aff);
  color:#fff;border:none;border-radius:14px;
  padding:12px 16px;font-weight:600;letter-spacing:.2px;cursor:pointer;
  box-shadow:0 6px 18px rgba(77,106,255,.35);
  touch-action:manipulation;
}
.btn.block{width:100%}
.btn.small{padding:10px 12px;font-size:13px}
.btn.secondary{background:var(--card2);border:1px solid var(--border2);box-shadow:none;color:#cfe1ff}
.btn[disabled]{opacity:.65;filter:grayscale(.25);cursor:not-allowed}

.table{width:100%;border-collapse:collapse;margin:10px 0}
.table th,.table td{border:1px solid var(--border2);padding:10px 10px;text-align:left;font-size:14px;vertical-align:top}
.table th{background:var(--card2);position:sticky;top:0}

/* Chips become larger touch targets, allow horizontal scroll on narrow screens */
.chips{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:640px){.chips{flex-wrap:nowrap;overflow:auto;padding-bottom:6px}}
.chip{
  user-select:none;text-align:center;background:#10173b;border:1px solid var(--border2);
  color:#c9d3ff;border-radius:999px;padding:10px 14px;font-size:13px;cursor:pointer;
  transition:transform .1s ease, background .2s ease, border-color .2s ease; white-space:nowrap
}
.chip:active{transform:scale(.98)}
.chip.active{background:linear-gradient(180deg,#1a255a,#102265);border-color:var(--accent);color:#e9eeff;box-shadow:0 6px 18px rgba(77,106,255,.35)}

.output{
  background:#0d142e;border:1px solid var(--border2);border-radius:16px;padding:14px;white-space:pre-wrap;
  line-height:1.55;font-size:15px;min-height:120px
}
.copy{
  background:var(--card2);border:1px solid var(--border2);color:#cfe1ff;padding:10px 12px;border-radius:10px;font-size:13px;cursor:pointer;
  min-width:96px;text-align:center
}

.footer{padding:12px 14px;border-top:1px solid var(--border2);font-size:12px;color:#a6b4ff;background:rgba(16,23,59,.35)}
.ok{color:var(--ok)}

/* Toast & loading (from earlier patch) */
.loading-overlay{position:fixed;inset:0;background:rgba(8,12,32,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:9999}
.loading-overlay.show{display:flex}
.loader{width:54px;height:54px;border-radius:50%;border:6px solid rgba(255,255,255,.25);border-top-color:#6ea1ff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0f1530;border:1px solid var(--border2);color:#cfe1ff;padding:10px 14px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.35);opacity:0;transition:opacity .2s ease, transform .2s ease;z-index:9999}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* ====== Responsive tweaks ====== */
@media(min-width:768px){
  header h1{font-size:18px}
  .grid{grid-template-columns:1.25fr .75fr;gap:16px;padding:16px}
  .chip{font-size:12px}
}
@media(min-width:1024px){
  .container{padding:16px}
  header{padding:16px 20px}
}

/* Sticky action bar for mobile */
.action-bar{
  position:sticky;bottom:0;left:0;right:0;background:linear-gradient(180deg,rgba(15,21,48,.0),rgba(15,21,48,.95));
  padding:10px;border-top:1px solid var(--border2);display:none
}
@media(max-width:640px){.action-bar{display:block}}

/* Make selects & inputs friendlier on iOS/Android */
input,select,textarea{ -webkit-tap-highlight-color: transparent; }
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9db4ff 50%),linear-gradient(135deg,#9db4ff 50%,transparent 50%);background-position:calc(100% - 22px) calc(1em + 2px), calc(100% - 16px) calc(1em + 2px);background-size:6px 6px; background-repeat:no-repeat}