:root{--indigo:#4f46e5;--indigo-dark:#4338ca;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--bg:#f8fafc;--card:#fff;--ok:#059669;--off:#dc2626}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:ui-sans-system,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)} .small{font-size:.8rem} .mt{margin-top:1.2rem} .cap{text-transform:capitalize}
.truncate{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maxw{max-width:300px}
.btn{display:inline-block;padding:.6rem 1.2rem;border-radius:.7rem;border:1px solid transparent;font-weight:600;cursor:pointer;font-size:.95rem}
.btn-primary{background:var(--indigo);color:#fff}.btn-primary:hover{background:var(--indigo-dark);text-decoration:none}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{text-decoration:none;opacity:.9}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-block{display:block;width:100%;text-align:center}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.15rem;color:var(--ink)}
.brand.light{color:#fff}
.brand-badge{background:var(--indigo);color:#fff;border-radius:.55rem;padding:.28rem .5rem;font-size:.85rem;font-weight:800;letter-spacing:.02em}
.brand-badge.big{font-size:1.3rem;padding:.5rem .8rem;display:inline-block}
/* public */
.pub-top{display:flex;justify-content:space-between;align-items:center;padding:1rem 5vw}
.pub-main{max-width:860px;margin:0 auto;padding:2rem 1rem 3rem}
.pub-foot{text-align:center;color:var(--muted);padding:2rem 1rem;font-size:.9rem}
.hero{text-align:center;padding-top:2rem}
.hero h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.1;font-weight:900}
.grad{background:linear-gradient(90deg,#4f46e5,#9333ea);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--muted);max-width:560px;margin:1rem auto 2rem;font-size:1.05rem}
.shorten-card{background:var(--card);border:1px solid var(--line);border-radius:1.2rem;padding:1.4rem;box-shadow:0 12px 32px rgba(15,23,42,.07);display:flex;flex-wrap:wrap;gap:.7rem;text-align:left}
.shorten-card>input[type=url]{flex:1 1 320px}
.shorten-row{display:flex;gap:.7rem;flex-wrap:wrap;width:100%}
.shorten-row input{flex:1 1 160px}
input,select,textarea{width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:.65rem;font-size:.95rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--indigo);border-color:transparent}
.form-msg{width:100%;color:var(--muted);min-height:1.2em}
.shorten-result{width:100%;display:flex;align-items:center;gap:.8rem;background:#eef2ff;border:1px solid #c7d2fe;border-radius:.8rem;padding:.7rem .9rem}
.shorten-result img{width:52px;height:52px;object-fit:cover;border-radius:.5rem}
.shorten-result a{font-weight:700;font-size:1.05rem;flex:1;word-break:break-all}
.hero-points{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-top:2rem;color:var(--muted);font-size:.95rem}
/* auth + centered */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.center-card{background:var(--card);border:1px solid var(--line);border-radius:1.2rem;padding:2.2rem;max-width:430px;margin:6vh auto;text-align:center;box-shadow:0 12px 32px rgba(15,23,42,.07)}
.center-card h1{margin:.8rem 0 .4rem;font-size:1.6rem}
.stack{display:grid;gap:1rem;margin-top:1.2rem;text-align:left}
.stack label,.grid-form label{display:grid;gap:.35rem;font-size:.9rem;font-weight:600}
.cred-box{display:flex;justify-content:space-between;background:#f1f5f9;border-radius:.7rem;padding:.7rem 1rem;margin:.6rem 0}
.alert{border-radius:.7rem;padding:.7rem 1rem;margin-bottom:1rem}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert-ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
/* admin */
.admin-wrap{display:flex;min-height:100vh}
.sidebar{width:240px;flex:0 0 240px;background:var(--ink);color:#e2e8f0;padding:1.4rem 1.1rem;display:flex;flex-direction:column;gap:1.6rem;position:sticky;top:0;height:100vh}
.side-nav{display:grid;gap:.3rem}
.side-nav a{color:#cbd5e1;padding:.6rem .8rem;border-radius:.6rem;font-weight:600}
.side-nav a:hover{background:#1e293b;text-decoration:none;color:#fff}
.side-nav a.nav-active{background:var(--indigo);color:#fff}
.side-foot{margin-top:auto;display:grid;gap:.5rem;font-size:.92rem}
.side-foot a{color:#cbd5e1}
.side-user{color:#fff;font-weight:700}
.role-chip{background:#334155;color:#e2e8f0;border-radius:99px;padding:.05rem .55rem;font-size:.72rem;text-transform:uppercase}
.admin-main{flex:1;padding:1.8rem;max-width:1200px;width:100%;margin:0 auto}
.page-title{font-size:1.55rem;font-weight:800;margin-bottom:1.3rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.3rem;margin-bottom:1.3rem;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.card h2{font-size:1.05rem;font-weight:700;margin-bottom:.9rem}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.3rem}
.stat-grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.2rem;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.stat-card span{color:var(--muted);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat-card strong{display:block;font-size:1.9rem;font-weight:900;margin-top:.2rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.chart{width:100%;height:auto}
.list-row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:none}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;padding:.5rem .6rem;border-bottom:2px solid var(--line)}
.tbl td{padding:.6rem;border-bottom:1px solid var(--line);vertical-align:middle}
.chip{display:inline-block;background:#eef2ff;color:#3730a3;border-radius:99px;padding:.08rem .6rem;font-size:.78rem;font-weight:600}
.chip-alt{background:#fdf2f8;color:#9d174d}
.chip-on{background:#ecfdf5;color:#065f46}
.chip-off{background:#fef2f2;color:#991b1b}
.chip-exp{background:#fffbeb;color:#92400e}
.link-cell{display:flex;gap:.7rem;align-items:center}
.thumb{width:44px;height:44px;border-radius:.5rem;object-fit:cover;background:#f1f5f9}
.thumb-empty{display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.slug-link{font-weight:700}
.actions{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.actions form{display:inline}
.mini-btn{background:#f1f5f9;border:1px solid var(--line);border-radius:.5rem;padding:.3rem .6rem;font-size:.8rem;font-weight:600;cursor:pointer;color:var(--ink)}
.mini-btn:hover{background:#e2e8f0;text-decoration:none}
.mini-btn.danger{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-form .span2{grid-column:span 2}
.inline-form{display:flex;gap:.7rem;flex-wrap:wrap}
.inline-form input{flex:1 1 200px;width:auto}
.inline-reset{display:inline-flex;gap:.35rem}
.inline-reset input{width:130px;padding:.3rem .5rem}
.filter-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}
.filter-row>*{flex:1 1 160px;width:auto}
.filter-row button{flex:0 0 auto}
.bd-row{display:flex;align-items:center;gap:.7rem;padding:.3rem 0;font-size:.92rem}
.bd-label{flex:0 0 110px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-bar{flex:1;background:#f1f5f9;border-radius:99px;height:9px;overflow:hidden}
.bd-bar i{display:block;height:100%;background:var(--indigo);border-radius:99px}
.bd-val{color:var(--muted);font-size:.85rem;white-space:nowrap}
.batch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.3rem}
.batch-actions{display:flex;gap:.5rem;margin-top:1rem;align-items:center}
.link-head{display:flex;gap:1.2rem;align-items:center}
.preview-lg{width:110px;height:110px;object-fit:cover;border-radius:.8rem}
.short-big{font-size:1.25rem;font-weight:800;word-break:break-all}
.qr-card{text-align:center}
.qr-card canvas{border:1px solid var(--line);border-radius:.8rem;margin:.4rem 0 .8rem}
code{background:#f1f5f9;padding:.1rem .35rem;border-radius:.35rem;font-size:.85em}
@media (max-width:860px){
  .admin-wrap{flex-direction:column}
  .sidebar{width:100%;flex:none;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center}
  .side-nav{display:flex;flex-wrap:wrap}
  .side-foot{margin:0;display:flex;gap:1rem;align-items:center}
  .two-col,.grid-form{grid-template-columns:1fr}
  .grid-form .span2{grid-column:span 1}
  .admin-main{padding:1.1rem}
  .link-head{flex-direction:column;align-items:flex-start}
}