:root { --fg:#0f172a; --muted:#475569; --bg:#f8fafc; --pri:#2563eb; --danger:#ef4444; --ok:#16a34a;}
* { box-sizing: border-box; }
html,body { margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--fg); background:var(--bg); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 1rem; }
.header { display:flex; align-items:center; justify-content:space-between; }
.logo img { height: 36px; vertical-align: middle; }
.footer img { margin-right: .5rem; vertical-align: middle; }
nav a { margin-left:1rem; text-decoration:none; color:var(--fg); }
nav a.btn { background:var(--pri); color:#fff; padding:.4rem .7rem; border-radius:.5rem; }
.hero { text-align:center; padding:2.5rem 0; }
h1 { font-size:2.2rem; margin:.2rem 0 1rem; }
p.hint { color:var(--muted); font-size:.9rem; margin-top:1rem; }
.alert { margin: 1rem auto; padding:.8rem 1rem; background:#fff; border-left:4px solid var(--pri); border-radius:.25rem; }
.alert.err { border-left-color: var(--danger); }
.alert.ok { border-left-color: var(--ok); }
.shorten .input-row { display:flex; gap:.5rem; margin: 1rem auto; max-width:800px; }
.shorten input[type=url], select { flex:1; padding:.8rem; border:1px solid #e2e8f0; border-radius:.6rem; }
.shorten button { padding:.8rem 1rem; border:0; background:var(--pri); color:#fff; border-radius:.6rem; cursor:pointer; }
.result { display:flex; gap:.5rem; justify-content:center; align-items:center; margin-top:1rem; }
.result input { width: 480px; max-width: 80vw; padding:.6rem .8rem; border:1px solid #e2e8f0; border-radius:.5rem; background:#fff; }
.result .copy { padding:.6rem .8rem; border:0; background:#111827; color:#fff; border-radius:.5rem; cursor:pointer; }
.table { width:100%; background:#fff; border-collapse: collapse; border-radius:.5rem; overflow:hidden; }
.table th, .table td { padding:.6rem .8rem; border-bottom:1px solid #e5e7eb; text-align:left; }
.inline { display:inline-block; margin-right:.3rem; }
.truncate { max-width: 360px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
button.danger { background: var(--danger); color:#fff; }
.footer { color:var(--muted); text-align:center; padding:2rem 0; }
label { display:block; margin:.6rem 0; }
input[type=email], input[type=password], input[type=text] { width: 320px; max-width:95%; padding:.6rem; border:1px solid #e2e8f0; border-radius:.5rem; }
form button { padding:.6rem .9rem; border:0; background:var(--pri); color:#fff; border-radius:.5rem; cursor:pointer; }
.badge { display:inline-block; padding:.15rem .4rem; border-radius:.4rem; background:#e5e7eb; font-size:.8rem; }
.badge.ok { background:#dcfce7; color:#14532d;}
.badge.err{ background:#fee2e2; color:#7f1d1d;}
.actions{ display:flex; gap:.3rem; flex-wrap:wrap; }
small.muted{color:var(--muted);}
hr{border:0;border-top:1px solid #e5e7eb;margin:1rem 0;}
code { background: #e5e7eb; padding: 2px 4px; border-radius: 4px; }
pre { background: #111827; color: #fff; padding: .8rem; border-radius: .5rem; overflow:auto; }