@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
:root{
  --bg1:#ff4d6d; /* red */
  --bg2:#ff6fb5; /* pink */
  --bg3:#7b61ff; /* purple */
  --card:#ffffffcc;
  --muted:#64748b;
  --accent:#23c16b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background: linear-gradient(135deg,var(--bg1), var(--bg2) 45%, var(--bg3));
  color:#0b1220;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.bg-overlay{position:fixed;inset:0;pointer-events:none;opacity:0.12;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><g fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="2"><rect x="0" y="0" width="80" height="80"/><rect x="40" y="40" width="80" height="80"/></g></svg>');background-repeat:repeat;mix-blend-mode:overlay}

.center-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.card{width:100%;max-width:760px;background:var(--card);backdrop-filter:blur(6px);border-radius:18px;padding:28px 28px 32px;box-shadow:0 10px 30px rgba(11,18,32,0.15);text-align:left}
.small-card{max-width:520px;text-align:center}
.title{font-size:36px;margin:0 0 6px;font-weight:700}
.subtitle{margin:0 0 18px;color:var(--muted)}
.field{display:block;margin-bottom:14px}
.field .label-text{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field input[type="url"], .field input[type="text"], .field select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(11,18,32,0.06);font-size:15px}
.row{display:flex;gap:12px}
.field.small{flex:1}
.actions{display:flex;align-items:center;gap:12px;margin-top:8px}
.btn{border:0;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer}
.btn.small{padding:8px 10px}
.btn.primary{background:linear-gradient(90deg,#00cc7a,#00a86b);color:white;box-shadow:0 8px 18px rgba(0,0,0,0.12)}
.btn.primary:hover{transform:translateY(-2px)}
.loader{width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,0.25);border-top-color:rgba(11,18,32,0.15);animation:spin 1s linear infinite;display:none}
.loader.large{width:60px;height:60px;border-width:6px}
@keyframes spin{to{transform:rotate(360deg)}}

.output{margin-top:18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.short-link a{font-weight:600;color:#0b1220}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;background:#111;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;transition:opacity .22s,transform .22s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.countdown{font-weight:600;color:var(--muted);margin-top:14px}

@media (max-width:720px){
  .card{padding:20px;border-radius:14px}
  .title{font-size:28px}
  .row{flex-direction:column}
}