:root{
  --bg:#0b1220;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --brand:#38bdf8;
  --danger:#ef4444;
  --success:#22c55e;
  --shadow: 0 10px 25px rgba(0,0,0,.25);
  --radius: 20px;
}
*{box-sizing:border-box}
body{
  margin:0; background: radial-gradient(1200px 800px at 20% 0%, #0b1220, #0a0f1c 60%, #070b14 100%);
  color:var(--text); font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}
a{color:var(--brand); text-decoration:none}
.wrap{max-width:950px; margin:0 auto; padding:32px 16px}
.hero{padding:32px 16px; text-align:center}
.hero h1{font-size:clamp(28px,5vw,48px); margin:0 0 6px}
.hero p{color:var(--muted); margin:0}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1);
      border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; backdrop-filter: blur(6px);}
.form{margin-top:24px}
label{display:block; font-weight:600; margin-bottom:10px}
input[type="url"], input[type="text"], input[type="file"]{
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.15);
  background:#0b1220; color:var(--text); outline:none; transition:.2s border-color;
}
input:focus{border-color: var(--brand);}
.grid2{display:grid; grid-template-columns: 1fr 160px; gap:12px; align-items:end}
.btn{
  display:inline-block; padding:14px 16px; border-radius:14px; border:0; background:linear-gradient(90deg, #06b6d4, #3b82f6);
  color:white; font-weight:700; box-shadow:var(--shadow); cursor:pointer;
}
.alias{display:flex; align-items:center; gap:6px}
.alias .base{white-space:nowrap; color:var(--muted); background:#0b1220; border:1px dashed rgba(255,255,255,.15);
             padding:8px 10px; border-radius:10px}
small{color:var(--muted)}
.alert{margin:16px 0; padding:12px 16px; border-radius:12px}
.alert.success{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35)}
.alert.danger{background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35)}

.recent{margin-top:32px}
.links{display:grid; gap:12px}
.link-item{padding:14px 16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px}
.link-item .row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.link-item .short{font-weight:700}
.link-item .long{color:var(--muted); margin-top:4px; word-break: break-all}
.link-item .meta{display:flex; gap:8px; margin-top:8px; align-items:center; justify-content:space-between}
.link-item .clicks{color:var(--muted)}

.foot{margin:36px 0; text-align:center; color:var(--muted)}
.thumb{display:inline-block; margin-top:10px}
.thumb img{display:block; max-width:320px; max-height:180px; width:auto; height:auto; border-radius:12px; border:1px solid rgba(255,255,255,.1)}
@media (max-width:640px){ .grid2{grid-template-columns:1fr} .thumb img{max-width:100%;}}
.btn-del {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
}
.btn-del:hover { background:#dc2626; }
.link-item {
  background:#111827;
  border-radius:14px;
  padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.link-item .desc {
  font-size:0.95em;
  color:#d1d5db;
  line-height:1.5;
  margin:8px 0;
}
.link-item .thumb img {
  border-radius:10px;
  max-width:120px;
  max-height:72px;
  object-fit:cover;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}

.btn-copy,
.btn-preview {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .4);
  background: #1f2937;
  color: #e5e7eb;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  font: inherit;
}

.btn-preview {
  text-decoration: none;
  display: inline-block;
}

.btn-copy:hover,
.btn-preview:hover {
  background: #111827;
}

/* --- Buttons inside recent links --- */
.link-item .meta button,
.link-item .meta a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .4);
  background: #1f2937;
  color: #e5e7eb;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  font: inherit;
}

.link-item .meta a {
  text-decoration: none;
  display: inline-block;
}

.link-item .meta button:hover,
.link-item .meta a:hover {
  background: #111827;
}