/* ==========================================================================
   Tritek ERP — sign-in gate and save indicator
   Palette matches ../erp/demo/erp.css so the gate and the app are one piece.
   ========================================================================== */

/* Hide the app until the gate clears. Visibility rather than display so the
   layout is already measured when it is revealed — no reflow flash. */
html.tk-locked #app { visibility: hidden; }
html.tk-locked, html.tk-locked body { overflow: hidden; }

.tk-gate{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(58% 42% at 82% 14%, rgba(53,172,227,.30), transparent 62%),
    radial-gradient(46% 34% at 8% 90%, rgba(53,172,227,.13), transparent 60%),
    linear-gradient(165deg,#060B14 0%,#111E63 54%,#1B2C86 100%);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

.tk-card{
  width:min(400px,100%);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:34px 32px 26px;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 80px rgba(0,0,0,.42);
  color:#E6EFF8;
}

.tk-brand{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.tk-mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,#35ACE3,#1B2C86);
  display:grid;place-items:center;
  font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;font-size:16px;color:#fff;
}
.tk-word{font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;color:#fff}
.tk-word em{color:#8ED2F0;font-style:normal;font-weight:500}

.tk-card h1{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 7px;color:#fff;
}
.tk-sub{font-size:13.5px;color:#A8BBD0;margin:0 0 24px;line-height:1.5}

.tk-card label{
  display:block;font-family:"Space Grotesk","Inter",sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:#8ED2F0;margin:0 0 7px;
}
.tk-card input{
  width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;padding:11px 14px;margin:0 0 18px;
  font-size:15px;color:#fff;outline:none;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.tk-card input:focus{
  border-color:#35ACE3;background:rgba(255,255,255,.10);
  box-shadow:0 0 0 3px rgba(53,172,227,.24);
}
.tk-card input::placeholder{color:#5A6B82}

.tk-card button{
  width:100%;border:0;border-radius:10px;padding:12px 16px;
  background:linear-gradient(135deg,#35ACE3,#1B2C86);
  color:#fff;font-family:"Space Grotesk","Inter",sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.02em;cursor:pointer;
  transition:transform .12s, filter .16s; margin-top:4px;
}
.tk-card button:hover{filter:brightness(1.12)}
.tk-card button:active{transform:translateY(1px)}

.tk-err{
  min-height:17px;margin-top:11px;font-size:12.5px;color:#FF9E8F;text-align:center;
}
.tk-note{
  margin-top:14px;padding:9px 12px;border-radius:9px;
  background:rgba(53,172,227,.13);border:1px solid rgba(53,172,227,.28);
  font-size:12px;color:#8ED2F0;line-height:1.45;
}
.tk-foot{
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.10);
  font-size:11px;color:#5A6B82;text-align:center;letter-spacing:.02em;
}

/* ---------------------------------------------------------- save toast -- */
.tk-flash{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  z-index:9998;pointer-events:none;
  background:#0B1220;color:#E6EFF8;
  border:1px solid rgba(53,172,227,.42);border-radius:99px;
  padding:9px 18px;font-size:12.5px;font-weight:500;
  font-family:"Inter",-apple-system,Helvetica,Arial,sans-serif;
  box-shadow:0 12px 34px rgba(11,18,32,.4);
  opacity:0;transition:opacity .22s, transform .22s;
}
.tk-flash.on{opacity:1;transform:translate(-50%,0)}
.tk-flash.bad{border-color:rgba(192,57,43,.6);color:#FFC9C1}

@media (max-width:480px){
  .tk-card{padding:28px 22px 22px;border-radius:16px}
  .tk-card h1{font-size:23px}
}

.tk-hint{
  margin-top:12px;padding:9px 12px;border-radius:9px;text-align:center;
  background:rgba(53,172,227,.11);border:1px dashed rgba(53,172,227,.38);
  font-size:12px;color:#8ED2F0;line-height:1.45;
}
.tk-hint b{color:#fff;font-weight:600;letter-spacing:.02em}