/* shortener.css */
:root{
  --clr1:#09203F;--clr2:#537895;--clr3:#09203F;--clr4:#537895;
  --btn-bg:rgba(255,255,255,.85);--btn-shadow:rgba(0,0,0,.15);
  --input-bg:rgba(255,255,255,.7);--input-shadow:rgba(0,0,0,.05);
  --radius:6px;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --btn-gap:.75rem;
}
html,body{min-height:100%;height:auto;overflow-y:auto}
body{
  margin:0;padding:0;font-family:var(--font);height:100vh;
  background:linear-gradient(45deg,var(--clr1),var(--clr2),var(--clr3),var(--clr4));
  background-size:400% 400%;animation:gradientBG 15s ease infinite;
  display:flex;align-items:center;justify-content:center
}
@keyframes gradientBG{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.container{background:rgba(255,255,255,.311);border-radius:var(--radius);backdrop-filter:blur(15px);box-shadow:0 8px 32px rgba(0,0,0,.08);padding:1.5rem;margin:1rem}
.btn{background:var(--btn-bg);border:none;border-radius:var(--radius);padding:.6rem 1.2rem;font-size:1rem;color:#333;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;box-shadow:4px 4px 8px var(--btn-shadow),-4px -4px 8px #fff}
.btn:hover{transform:translateY(-2px);background:#fff;box-shadow:6px 6px 12px var(--btn-shadow),-6px -6px 12px #fff}
.btn:disabled{opacity:.6;cursor:not-allowed}

.shortener{max-width:820px;width:clamp(320px,92vw,820px)}
.shortener-title{margin:0 0 .75rem 0;color:#0b1f39}
.shortener-form{display:flex;gap:var(--btn-gap);align-items:center;flex-wrap:wrap}
.shortener-form input{
  flex:1;min-width:220px;background:var(--input-bg);border:none;border-radius:var(--radius);
  padding:.8rem 1rem;font-size:1rem;box-shadow:inset 4px 4px 8px var(--input-shadow),inset -4px -4px 8px #fff
}
.shortener-form input:focus{outline:2px solid rgba(36,119,209,.35);box-shadow:inset 2px 2px 6px var(--input-shadow),inset -2px -2px 6px #fff}

.select{
  background:var(--btn-bg);border:none;border-radius:var(--radius);
  padding:.6rem .9rem;font-size:1rem;box-shadow:4px 4px 8px var(--btn-shadow),-4px -4px 8px #fff;cursor:pointer
}

.shortener-error{margin-top:.75rem;color:#8b1a1a;background:rgba(255,255,255,.75);padding:.6rem .8rem;border-radius:var(--radius);border:1px solid rgba(139,26,26,.15)}
.shortener-result{margin-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(255,255,255,.75);padding:.9rem 1rem;border-radius:var(--radius)}
.shortener-result a{word-break:break-all;color:#0b3d91;text-decoration:none}
.shortener-result .action-buttons{display:flex;gap:var(--btn-gap)}
.status{margin-top:.5rem;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.06);padding:.6rem .8rem;border-radius:var(--radius);font-size:.95rem}
.hidden{display:none!important}

.shortener-history{margin-top:1rem}
.shortener-history h3{margin:.5rem 0 .5rem 0}
#historyList{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
#historyList li{display:grid;gap:.25rem;background:rgba(255,255,255,.65);padding:.6rem .8rem;border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,.08)}
#historyList .pair{display:flex;gap:.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
#historyList .pair a{text-decoration:none;color:#0b3d91;max-width:70%;word-break:break-all}
.history-actions{display:flex;gap:.5rem}
.history-actions button{padding:.4rem .8rem}

@media (max-width:560px){
  .shortener-result{flex-direction:column;align-items:flex-start}
  #historyList .pair a{max-width:100%}
}