/* === Neo UI — bright glassmorphism system === */
:root{
  --bg:#f6f8fc;
  --panel:#ffffff;
  --muted:#6b7280;
  --ink:#0b1220;
  --line:#e6e9f0;
  --brand:#2563eb;
  --brand-ink:#ffffff;
  --radius:16px;
  --shadow:0 20px 50px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;}

.bgfx{
  position:fixed; inset:-20vmax -20vmax auto auto; z-index:-1; pointer-events:none;
  width:80vmax; height:80vmax; background:
    radial-gradient(40% 40% at 20% 20%, rgba(163,196,243,.8), transparent 60%),
    radial-gradient(45% 45% at 80% 80%, rgba(164,231,210,.75), transparent 60%),
    radial-gradient(35% 35% at 70% 20%, rgba(252,211,77,.4), transparent 60%);
  filter: blur(60px) saturate(110%);
  animation: floatBg 28s ease-in-out infinite alternate;
}
@keyframes floatBg{ 0%{transform:translate3d(0,0,0) rotate(0)} 100%{transform:translate3d(-6%, -4%, 0) rotate(8deg)}}

.container{max-width:1080px;margin:26px auto;padding:0 18px}
.nav{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.7); backdrop-filter: blur(10px) saturate(140%);
  border:1px solid var(--line); border-radius:20px; padding:10px 14px; box-shadow:var(--shadow);
}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.nav .brand .dot{width:22px;height:22px;border-radius:8px;background:linear-gradient(135deg,#2563eb,#38bdf8);box-shadow:0 6px 16px rgba(37,99,235,.35)}
.nav .actions{display:flex;gap:8px;align-items:center}

.btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;cursor:pointer;transition:.2s; box-shadow:0 6px 16px rgba(2,6,23,.04)}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(2,6,23,.08)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn-ghost{background:transparent}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);padding:6px 10px;border-radius:999px;background:#fff}

.input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;outline:none;background:#fff;transition:border-color .2s, box-shadow .2s}
.input:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(37,99,235,.12)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.hero{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.kv{color:var(--muted);font-size:12px}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{font-size:11px;color:var(--muted);text-transform:uppercase;padding:0 10px}
.table tbody tr{background:#fff;border:1px solid var(--line)}
.table tbody td{padding:12px 10px;vertical-align:middle}

.tabline{display:flex;gap:10px;margin-bottom:10px}
.tabline a{border-radius:12px;padding:8px 12px;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;transition:.2s}
.tabline a.active{background:var(--brand);color:#fff;border-color:var(--brand); box-shadow:0 10px 20px rgba(37,99,235,.22)}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gallery a{display:block;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff;
  box-shadow:0 8px 20px rgba(2,6,23,.06);transition:transform .18s ease, box-shadow .18s ease; aspect-ratio:1/1}
.gallery a:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(2,6,23,.12)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out}
.modal.show{display:flex}
.modal img{max-width:92vw;max-height:90vh;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.ctrls{position:absolute;top:16px;right:16px;display:flex;gap:8px}

.muted{color:var(--muted)}
.small{font-size:12px;color:var(--muted)}

.empty{
  display:flex;align-items:center;gap:14px;border:1px dashed var(--line);border-radius:16px;padding:12px;background:rgba(255,255,255,.7)
}
.empty svg{flex:0 0 auto}
.shimmer{
  position:relative;overflow:hidden
}
.shimmer::after{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 0, rgba(255,255,255,.6) 20%, transparent 40%);
  transform:translateX(-120%); animation:shimmer 2.2s infinite;
}
@keyframes shimmer{to{ transform:translateX(120%);}}


/* Centered cards */
.card.centered{ max-width: 900px; margin: 16px auto; }

.toast{position:fixed;right:16px;bottom:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow)}