Initial commit

public/css/admin.css

@@ -0,0 +1,194 @@
+:root{
+  --ink:#07060a;
+  --glass: rgba(16, 14, 26, .62);
+  --glass2: rgba(18, 15, 28, .62);
+  --b: rgba(255,255,255,.10);
+  --muted: rgba(255,255,255,.72);
+  --muted2: rgba(255,255,255,.50);
+  --violet: rgba(139,92,246,.95);
+  --fuchsia: rgba(217,70,239,.85);
+}
+
+html,body{height:100%}
+body{background:var(--ink); color:#fff}
+
+/* Helps native form controls (especially <select>) use dark UI */
+html{ color-scheme: dark; }
+
+/* Background */
+.bg-aurora{
+  position: fixed; inset: 0;
+  background:
+    radial-gradient(1000px 500px at 20% 20%, rgba(139,92,246,.30), transparent 60%),
+    radial-gradient(900px 600px at 80% 30%, rgba(217,70,239,.22), transparent 60%),
+    radial-gradient(900px 700px at 55% 90%, rgba(167,139,250,.18), transparent 60%);
+  z-index:-2;
+}
+.bg-grid{
+  position: fixed; inset: 0;
+  background-image:
+    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
+  background-size: 48px 48px;
+  opacity:.12;
+  mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 65%);
+  z-index:-1;
+}
+
+/* Topbar */
+.topbar-glass{
+  background: var(--glass2);
+  border: 1px solid var(--b);
+  backdrop-filter: blur(16px) saturate(150%);
+  box-shadow: 0 10px 40px rgba(0,0,0,.35);
+}
+.brand-badge{
+  width: 40px; height: 40px;
+  display:grid; place-items:center;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
+  font-weight: 900;
+  color:#0b0712;
+}
+.hero-gradient{
+  background: linear-gradient(90deg, #a78bfa, #d946ef, #8b5cf6);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* Links */
+.navlink{
+  display:inline-flex; align-items:center; gap:.55rem;
+  padding:.55rem .85rem;
+  border-radius: 14px;
+  text-decoration:none;
+  color: rgba(255,255,255,.78);
+  transition: transform .12s ease, background .12s ease;
+}
+.navlink:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
+.navlink i{ font-size: 1.1rem; }
+
+/* Cards */
+.card-glass{
+  background: var(--glass);
+  border: 1px solid var(--b);
+  backdrop-filter: blur(16px) saturate(150%);
+  box-shadow: 0 12px 50px rgba(0,0,0,.35);
+}
+
+/* Pills / tags */
+.pill{
+  padding: .45rem .75rem;
+  border-radius: 999px;
+  background: rgba(255,255,255,.06);
+  border: 1px solid var(--b);
+  color: rgba(255,255,255,.80);
+  font-size: .9rem;
+}
+.dot{
+  width: 8px; height: 8px;
+  border-radius: 999px;
+  background: #34d399;
+  box-shadow: 0 0 18px rgba(52,211,153,.55);
+}
+.tag{
+  font-size: .75rem;
+  padding: .25rem .55rem;
+  border-radius: 999px;
+  background: rgba(139,92,246,.18);
+  border: 1px solid rgba(139,92,246,.25);
+  color: rgba(255,255,255,.85);
+}
+
+/* Bootstrap overrides to match glass */
+.form-control, .form-select, textarea{
+  border-radius: 14px !important;
+  background: rgba(255,255,255,.06) !important;
+  border: 1px solid rgba(255,255,255,.10) !important;
+  color: #fff !important;
+}
+.form-control:focus, textarea:focus, .form-select:focus{
+  border-color: rgba(167,139,250,.55) !important;
+  box-shadow: 0 0 0 4px rgba(139,92,246,.18) !important;
+}
+.form-control::placeholder, textarea::placeholder{
+  color: rgba(255,255,255,.35) !important;
+}
+
+/* Make <select> arrow + padding consistent and readable */
+.form-select{
+  padding-right: 2.6rem !important;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23a78bfa' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E") !important;
+  background-repeat: no-repeat !important;
+  background-position: right 1rem center !important;
+  background-size: 18px 18px !important;
+}
+
+/* Dropdown list colors (works where browser allows styling) */
+.form-select option{
+  background-color: #0c0a14;
+  color: rgba(255,255,255,.92);
+}
+
+/* Selected option contrast (supported in some browsers) */
+.form-select option:checked{
+  background: linear-gradient(135deg, rgba(139,92,246,.55), rgba(217,70,239,.45));
+  color: #fff;
+}
+
+.btn-violet{
+  border:0 !important;
+  color:#0b0712 !important;
+  font-weight:900 !important;
+  border-radius: 14px !important;
+  background: linear-gradient(135deg, var(--violet), var(--fuchsia)) !important;
+  box-shadow: 0 0 0 1px rgba(167,139,250,.25), 0 18px 40px rgba(139,92,246,.18);
+}
+.btn-violet:hover{ filter: brightness(1.08); transform: translateY(-1px); }
+
+.btn-outline-light{
+  border-radius: 14px !important;
+  border: 1px solid rgba(255,255,255,.12) !important;
+  background: rgba(255,255,255,.06) !important;
+}
+.btn-outline-light:hover{ background: rgba(255,255,255,.10) !important; }
+
+/* Optional: Bootstrap dropdown menus (if you use .dropdown anywhere) */
+.dropdown-menu{
+  background: rgba(16,14,26,.88) !important;
+  border: 1px solid rgba(255,255,255,.10) !important;
+  backdrop-filter: blur(16px) saturate(150%);
+  box-shadow: 0 18px 70px rgba(0,0,0,.45);
+  border-radius: 14px;
+  padding: .4rem;
+}
+.dropdown-item{
+  color: rgba(255,255,255,.86) !important;
+  border-radius: 10px;
+  padding: .55rem .7rem;
+}
+.dropdown-item:hover,
+.dropdown-item:focus{
+  background: rgba(167,139,250,.16) !important;
+  color: #fff !important;
+}
+.dropdown-item.active,
+.dropdown-item:active{
+  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85)) !important;
+  color: #fff !important;
+}
+
+.table-dark{
+  --bs-table-bg: transparent;
+  --bs-table-striped-bg: rgba(255,255,255,.03);
+  --bs-table-hover-bg: rgba(255,255,255,.05);
+  --bs-table-border-color: rgba(255,255,255,.08);
+}
+.table thead th{
+  color: rgba(255,255,255,.70);
+  border-bottom-color: rgba(255,255,255,.10) !important;
+}