:root {
  --brand-bg: #0f172a;
  --brand-fg: #f8fafc;
  --brand-muted: #94a3b8;
  --pad-bg: #f1f5f9;
  --key-bg: #ffffff;
  --key-fg: #0f172a;
  --key-active: #dbeafe;
  --fn-bg: #e2e8f0;
  --accent: #2563eb;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--pad-bg);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.login { display: flex; height: 100vh; height: 100dvh; }

/* 30% brand panel */
.brand {
  flex: 0 0 30%;
  background: var(--brand-bg);
  color: var(--brand-fg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
.brand-logo { width: min(60%, 180px); height: auto; }
.brand-name { margin: 24px 0 0; font-size: clamp(20px, 2.6vw, 34px); font-weight: 600; }
.brand-version { margin: 8px 0 0; color: var(--brand-muted); font-size: 14px; letter-spacing: .05em; }

/* 70% keypad panel */
.pad-area {
  flex: 1 1 70%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pad-wrap { width: min(100%, 420px); }
.display {
  height: 72px; margin-bottom: 20px;
  background: var(--key-bg); border: 2px solid #cbd5e1; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; letter-spacing: .4em; color: var(--key-fg);
}
.prompt {
  margin: 0 0 10px; text-align: center;
  font-size: 18px; font-weight: 600; color: var(--key-fg);
}
.prompt.error { color: #dc2626; }
.display.shake { animation: shake .3s; border-color: #dc2626; }
@keyframes shake { 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.keypad button {
  aspect-ratio: 4 / 3;
  border: none; border-radius: 14px;
  background: var(--key-bg); color: var(--key-fg);
  font-size: clamp(22px, 3vw, 32px); font-weight: 500;
  box-shadow: 0 1px 3px rgba(15,23,42,.12);
  cursor: pointer;
}
.keypad button:active { background: var(--key-active); transform: scale(.97); }
.keypad button.fn { background: var(--fn-bg); font-size: clamp(16px, 2vw, 22px); }

/* Phones in portrait: stack, brand on top */
@media (max-width: 640px) and (orientation: portrait) {
  .login { flex-direction: column; }
  .brand { flex: 0 0 30%; }
  .brand-logo { width: 72px; }
  .brand-name { margin-top: 12px; }
}

/* MagnaTech company logo (white background artwork) */
.company-card { width: min(82%, 340px); background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.company-card img { display: block; width: 100%; height: auto; }
.brand-version { margin-top: 18px; }
@media (max-width: 700px) { .company-card { width: 70%; padding: 8px; border-radius: 12px; } }
.brand { position: relative; }
.login-contact { position: absolute; left: 16px; right: 16px; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.login-contact strong { font-size: 15px; margin-bottom: 2px; }
.login-contact a { color: var(--brand-muted); text-decoration: none; }
.login-contact a:hover { color: #fff; }
.company-card.lugma-card { background: #262626; padding: 26px 30px; }