/* style.css - modern dark with animations */
:root {
  --bg:#0b0f13;
  --card:#0f1419;
  --muted:#9aa5b1;
  --accent:#2ea043;
  --accent-2:#58a6ff;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(46,160,67,0.06), transparent 10%),
              radial-gradient(1000px 500px at 90% 90%, rgba(88,166,255,0.03), transparent 8%),
              var(--bg);
  color: #dbe7ea;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

/* container */
.wrap{ max-width:1100px; margin:28px auto; padding:20px; }

/* top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:18px;
}
.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width:56px; height:56px; border-radius:10px; background:linear-gradient(135deg,var(--accent),#2c8a33);
  display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow: 0 6px 20px rgba(10,20,10,0.35);
}
.title{ font-weight:700; font-size:18px; }
.subtitle{ font-size:12px; color:var(--muted); margin-top:3px; }

.actions .btn{ margin-left:6px; }

/* cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  padding:18px; border-radius:12px; margin-bottom:16px;
  box-shadow: 0 6px 18px rgba(2,6,8,0.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(2,6,8,0.55); }

.create-card h2, .list-card h2{ margin:0 0 10px 0; }

.muted{ color:var(--muted); font-size:13px; margin-bottom:8px; }

/* form */
input{
  width:100%; padding:12px; border-radius:9px; border:1px solid rgba(255,255,255,0.04);
  background:var(--glass); color: #eaf5ee; outline:none; transition: box-shadow .12s ease, transform .08s ease;
}
input:focus{ box-shadow: 0 6px 30px rgba(46,160,67,0.06); transform: translateY(-1px); }

label{ display:block; font-size:13px; color:var(--muted); margin-top:10px; margin-bottom:6px; }

.row{ display:flex; gap:10px; margin-top:8px; align-items:center; }
.row .btn{ flex:1; }

/* buttons */
.btn{
  display:inline-block; padding:10px 14px; border-radius:9px; background:var(--card);
  border:1px solid rgba(255,255,255,0.03); color: #dff6e5; cursor:pointer; font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.btn.ghost{ background: transparent; color: var(--muted); border:1px solid rgba(255,255,255,0.02); }
.btn.primary{ background: linear-gradient(90deg,var(--accent), #2aa54a); border:none; color: white; }
.btn.tiny{ padding:6px 8px; font-size:13px; border-radius:7px; }

/* result box */
.resultbox{ margin-top:14px; animation: fadeIn .35s ease both; }
.result-inner{ padding:12px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.02); display:flex; gap:12px; flex-direction:column; }
.shortlink a{ color:var(--accent-2); font-weight:700; }

/* table */
.table-wrap{ margin-top:12px; overflow:auto; }
.link-table{ width:100%; border-collapse:separate; border-spacing:0 8px; min-width:800px; }
.link-table thead th{ text-align:left; color:var(--muted); padding:12px; font-size:13px; }
.link-table tbody tr{ background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border-radius:8px; transition: transform .12s ease, box-shadow .12s ease; overflow:hidden; display:table-row; }
.link-table tbody tr td{ padding:12px; vertical-align:middle; border-bottom:none; }
.link-table tbody tr:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(2,6,8,0.55); }
.short-col a{ color:var(--accent-2); font-weight:700; }
.target-col{ color:var(--muted); max-width:420px; overflow:hidden; text-overflow: ellipsis; white-space:nowrap; }

/* empty state */
.empty{ padding:22px; color:var(--muted); text-align:center; }

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

/* small animations */
@keyframes fadeIn { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform: translateY(0);} }