/* =============================================================================
 * WHITE-LABEL PORTAL KIT — GATE STYLES (refined)
 * -----------------------------------------------------------------------------
 * Neutral and unbranded by default. All palette values are CSS variables set
 * at runtime by portal-gate.js from portal.config.js (brand.colors). The
 * defaults below are a clean dark "secure terminal" look that suits any site.
 * ========================================================================== */
:root {
  --pk-accent:      #6e7681;
  --pk-accent-dark: #565d66;
  --pk-bg:          #0d0f12;
  --pk-surface:     #16191f;
  --pk-text:        #f4f5f7;
  --pk-muted:       #8b929c;
  --pk-success:     #3fb950;
  --pk-danger:      #e5534b;

  --pk-radius:      18px;
  --pk-key:         66px;
  --pk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
             Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* ---------- overlay ---------- */
#pk-gate {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  font-family: var(--pk-font);
  color: var(--pk-text);
  background:
    radial-gradient(120% 80% at 50% -10%,
      color-mix(in srgb, var(--pk-accent) 14%, transparent), transparent 60%),
    var(--pk-bg);
  -webkit-tap-highlight-color: transparent;
  animation: pk-fade .25s ease both;
}
#pk-gate[hidden] { display: none; }
#pk-gate.pk-blur { backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }
@keyframes pk-fade { from { opacity: 0 } to { opacity: 1 } }

/* ---------- card ---------- */
.pk-card {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 36px 28px 30px;
  background: color-mix(in srgb, var(--pk-surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--pk-text) 9%, transparent);
  border-radius: var(--pk-radius);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.65), inset 0 1px 0 color-mix(in srgb, var(--pk-text) 6%, transparent);
  animation: pk-rise .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pk-rise { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }

/* ---------- header ---------- */
.pk-clock {
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  font-size: .72rem; color: var(--pk-muted); min-height: 1em;
}
.pk-logo {
  width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pk-accent) 18%, transparent);
  color: var(--pk-text);
}
.pk-logo svg, .pk-logo img { width: 60%; height: 60%; }
.pk-word { text-align: center; }
.pk-name { font-size: 1rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.pk-sub  { margin-top: 6px; font-size: .6rem; font-weight: 500; letter-spacing: .3em;
           text-transform: uppercase; color: var(--pk-muted); }

/* ---------- status (aria-live) ---------- */
.pk-status {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pk-muted); min-height: 1.1em; transition: color .2s;
}
#pk-gate.pk-state-error   .pk-status { color: var(--pk-danger); }
#pk-gate.pk-state-success .pk-status { color: var(--pk-success); }

/* ---------- dots ---------- */
.pk-dots { display: flex; gap: 15px; height: 14px; }
.pk-dots i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--pk-text) 28%, transparent);
  transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
}
.pk-dots i.fill {
  background: var(--pk-accent); border-color: var(--pk-accent);
  transform: scale(1.12);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pk-accent) 18%, transparent);
}
#pk-gate.pk-state-success .pk-dots i.fill {
  background: var(--pk-success); border-color: var(--pk-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pk-success) 22%, transparent);
}
.pk-dots.shake { animation: pk-shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes pk-shake {
  10%,90% { transform: translateX(-1px) }
  20%,80% { transform: translateX(2px) }
  30%,50%,70% { transform: translateX(-5px) }
  40%,60% { transform: translateX(5px) }
}

/* ---------- keypad ---------- */
.pk-keypad {
  display: grid; grid-template-columns: repeat(3, var(--pk-key)); gap: 14px;
  transition: opacity .2s;
}
#pk-gate.pk-busy .pk-keypad { opacity: .4; pointer-events: none; }

.pk-k {
  position: relative; overflow: hidden;
  height: var(--pk-key); width: var(--pk-key); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--pk-text) 12%, transparent);
  background: color-mix(in srgb, var(--pk-text) 4%, transparent);
  color: var(--pk-text); cursor: pointer; font-family: var(--pk-font);
  transition: transform .08s, background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.pk-k .pk-d { font-size: 1.55rem; font-weight: 500; line-height: 1; }
.pk-k .pk-l { font-size: .5rem; font-weight: 600; letter-spacing: .18em;
              color: var(--pk-muted); margin-top: 3px; height: .6em; }
.pk-k:hover  { background: color-mix(in srgb, var(--pk-text) 8%, transparent); }
.pk-k:active { transform: scale(.94); background: color-mix(in srgb, var(--pk-accent) 30%, transparent); }
.pk-k:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; }

.pk-k.pk-util {
  background: transparent; border-color: transparent; color: var(--pk-muted);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
}
.pk-k.pk-util .pk-d { font-size: 1.1rem; }
.pk-k.pk-util:hover { color: var(--pk-text); background: color-mix(in srgb, var(--pk-text) 6%, transparent); }

/* ripple */
.pk-k .pk-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: color-mix(in srgb, var(--pk-text) 22%, transparent);
  animation: pk-ripple .5s ease-out; pointer-events: none;
}
@keyframes pk-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- footer bits ---------- */
.pk-hint { font-size: .68rem; color: var(--pk-muted); text-align: center; max-width: 240px; line-height: 1.4; }

/* ---------- light theme ---------- */
#pk-gate.pk-light {
  --pk-bg: #f2f3f5; --pk-surface: #ffffff; --pk-text: #1a1d21; --pk-muted: #6b727c;
  color: var(--pk-text);
}
#pk-gate.pk-light .pk-card { box-shadow: 0 24px 60px -24px rgba(0,0,0,.28); }

/* ---------- motion / contrast safety ---------- */
@media (prefers-reduced-motion: reduce) {
  #pk-gate, .pk-card, .pk-dots.shake, .pk-k .pk-ripple { animation: none !important; }
  .pk-k:active { transform: none; }
}

/* Fallback for browsers without color-mix() */
@supports not (background: color-mix(in srgb, red, blue)) {
  .pk-card  { background: var(--pk-surface); border-color: rgba(255,255,255,.1); }
  .pk-k     { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
  .pk-k:active { background: var(--pk-accent-dark); }
  .pk-dots i.fill { box-shadow: none; }
}