*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --clr-bg:        #f4f5f7;
  --clr-surface:   #ffffff;
  --clr-border:    #dde1e7;
  --clr-primary:   #1a73e8;
  --clr-primary-h: #1558b0;
  --clr-danger:    #d93025;
  --clr-success:   #1e8e3e;
  --clr-warning:   #f9ab00;
  --clr-text:      #202124;
  --clr-muted:     #5f6368;
  --clr-badge-bg:  #ea4335;
  --radius:        6px;
  --shadow:        0 1px 4px rgba(0,0,0,.12);
  --font:          'Segoe UI', system-ui, -apple-system, sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--clr-text);
  background: var(--clr-bg);
}

a { color: var(--clr-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  cursor: pointer;
  font: inherit;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  background: var(--clr-surface);
  padding: 5px 12px;
  color: var(--clr-text);
  transition: background .15s;
}
button:hover { background: var(--clr-bg); }
button.primary {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
}
button.primary:hover { background: var(--clr-primary-h); }
button.danger { color: var(--clr-danger); border-color: var(--clr-danger); }
button:disabled { opacity: .5; cursor: default; }

input[type="text"], input[type="password"], select, textarea {
  font: inherit;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 6px 10px;
  outline: none;
  background: var(--clr-surface);
  color: var(--clr-text);
  width: 100%;
}
input:focus, select:focus { border-color: var(--clr-primary); }

table { border-collapse: collapse; width: 100%; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--clr-border); }
th { font-weight: 600; background: var(--clr-bg); color: var(--clr-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: #f8f9ff; }

.hidden { display: none !important; }
.error-msg { color: var(--clr-danger); font-size: 13px; margin-top: 8px; }
.muted { color: var(--clr-muted); }
.badge { display: inline-block; background: var(--clr-badge-bg); color: #fff; border-radius: 20px; padding: 1px 7px; font-size: 11px; font-weight: 700; }

.env-badge {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 9999;
  background: var(--clr-warning);
  color: #000;
  padding: 2px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 0 0 6px 6px;
  pointer-events: none;
}