:root {
  --bg-0: #eef3f6; --bg-1: #e3eef0; --bg-2: #e9f3ea;
  --panel: rgba(255,255,255,0.75); --panel-border: rgba(0,150,160,0.22);
  --accent: #0891a6; --accent-2: #059669;
  --text: #0b1b26; --text-dim: #5b7184;
  --danger: #dc2645; --purple: #7c5cfa;
  --grid-line: rgba(0,150,160,0.08); --row-hover: rgba(0,150,160,0.05);
  --input-bg: rgba(127,127,127,0.06); --btn-text: #ffffff;
}
html.dark {
  --bg-0: #05070d; --bg-1: #0a1120; --bg-2: #0f1c2e;
  --panel: rgba(8,15,26,0.82); --panel-border: rgba(0,255,247,0.22);
  --accent: #00fff7; --accent-2: #00ffae;
  --text: #eaf6ff; --text-dim: #7e93a8;
  --danger: #ff5c7a; --purple: #a78bfa;
  --grid-line: rgba(0,255,247,0.035); --row-hover: rgba(0,255,247,0.025);
  --input-bg: rgba(255,255,255,0.03); --btn-text: #00161a;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 5%, rgba(0,150,160,0.08), transparent 35%),
    radial-gradient(circle at 90% 95%, rgba(5,150,105,0.08), transparent 40%),
    linear-gradient(160deg, var(--bg-0), var(--bg-1) 55%, var(--bg-2));
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
  transition: background .3s ease, color .3s ease;
}
body::before {
  content:""; position:fixed; inset:0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.85), transparent 70%);
  pointer-events:none; z-index:0;
}
.topbar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: var(--panel); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--panel-border);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.topbar .brand img { width: 34px; height: 34px; border-radius: 8px; background: #fff; padding: 2px; }
.topbar .brand span {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { background: rgba(127,127,127,0.14); border: none; border-radius: 20px; padding: 7px 11px; cursor: pointer; font-size: 1rem; color: var(--text); }
a.logout-link { color: var(--text-dim); text-decoration: none; font-size: 13.5px; border: 1px solid var(--panel-border); padding: 7px 14px; border-radius: 20px; }
a.logout-link:hover { color: var(--accent); border-color: var(--accent); }

.wrap { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 32px 20px; }
.center-wrap { min-height: calc(100vh - 68px); display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; z-index: 1; }

.card {
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border); border-radius: 18px; padding: 24px 22px;
  box-shadow: 0 0 30px rgba(0,150,160,0.08), 0 14px 40px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  animation: rise .4s ease;
}
@keyframes rise { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.auth-card { width: 100%; max-width: 380px; text-align: center; }
.auth-card .logo-wrap { width: 64px; height: 64px; margin: 0 auto 12px; }
.auth-card img.logo { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #fff; padding: 4px; }
.auth-card h1 {
  font-size: 19px; margin: 6px 0 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-card p.sub { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; }

label { display: block; text-align: left; font-size: 12.5px; color: var(--text-dim); margin: 10px 0 4px; font-weight: 600; }
input[type=text], input[type=password], input[type=tel], input[type=number] {
  width: 100%; padding: 10px 13px; border-radius: 10px; border: 1.5px solid var(--panel-border);
  background: var(--input-bg); color: var(--text); font-size: 14px; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(0,150,160,0.25); }
input::placeholder { color: var(--text-dim); }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 20px; border: none; border-radius: 24px; font-weight: 700; font-size: 14px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: var(--btn-text);
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,150,160,0.25);
  transition: transform .15s ease, box-shadow .2s ease; text-decoration: none;
}
button:hover, .btn:hover { transform: translateY(-1px); }
button.full { width: 100%; margin-top: 18px; }
button.sm { padding: 7px 14px; font-size: 12.5px; }
button.outline { background: rgba(127,127,127,0.1); color: var(--text); box-shadow: none; }

.err { background: rgba(220,38,69,0.08); border: 1px solid rgba(220,38,69,0.25); color: var(--danger); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-top: 12px; }
.ok { background: rgba(5,150,105,0.08); border: 1px solid rgba(5,150,105,0.3); color: var(--accent-2); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-top: 12px; }
.switch-link { margin-top: 16px; font-size: 13px; color: var(--text-dim); }
.switch-link a { color: var(--accent); font-weight: 600; text-decoration: none; }

.credit-badge {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(0,150,160,0.1);
  border: 1px solid var(--panel-border); padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 14px;
}

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 9px 6px; font-size: 13.5px; border-bottom: 1px solid var(--panel-border); }
th { color: var(--text-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
tr:hover td { background: var(--row-hover); }