/* KLMI login: the knitlab.pro landing page (kli/web/public/style.css, the .landing* rules and the shop palette),
   with the access controls replaced by the administrator login form. Only the login page loads this file. */
.klmi-login { margin: 0; font-family: Inter, Arial, Helvetica, sans-serif; color: #1f1d2e; background: #f3f2fe; font-synthesis: none; }
.klmi-login * { box-sizing: border-box; }
.landing { isolation: isolate; position: relative; display: flex; align-items: center; justify-content: center; min-height: 100svh; overflow: hidden; background: #f3f2fe; }
.ascii-fabric { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.landing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 34% 46% at 50% 50%, #f3f2fef5 0%, #f3f2fed9 48%, #f3f2fe20 100%); pointer-events: none; }
.landing-content { text-align: center; padding: 90px 24px 120px; max-width: 760px; width: 100%; }
.landing-content h1 { color: #5b4ecd; font-size: clamp(64px, 8.4vw, 112px); letter-spacing: -7px; line-height: 1; font-weight: 500; margin: 0; display: flex; align-items: flex-start; justify-content: center; gap: 13px; }
.landing-content h1 span { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; padding-top: 12px; }
.landing-motto { font-size: 12px; letter-spacing: 2px; color: #4f4c67; margin: 27px 0 36px; }
.landing-note { position: absolute; inset: auto 5% 30px; display: flex; justify-content: space-between; gap: 20px; font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; color: #7a72b0; }

/* The login form, in the frosted panel the landing page uses for its controls and notices. */
.login-panel { width: 100%; max-width: 360px; margin: 0 auto; padding: 26px 26px 22px; text-align: left; background: #ffffffd9; border: 1px solid #d3cdf2; border-radius: 22px; box-shadow: 0 6px 32px #5b4ecd0a; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.login-panel label { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; font-size: 12px; color: #4f4c67; }
.login-panel input { width: 100%; min-height: 46px; padding: 11px 14px; font: inherit; font-size: 15px; color: #1f1d2e; background: #fff; border: 1px solid #d3cdf2; border-radius: 12px; }
.login-panel input:focus { outline: 2px solid #5b4ecd; outline-offset: 1px; border-color: #5b4ecd; }
.login-panel button { width: 100%; min-height: 46px; margin-top: 6px; padding: 10px 23px; font: inherit; font-size: 13px; color: #fff; background: #5b4ecd; border: 1px solid #5b4ecd; border-radius: 28px; cursor: pointer; touch-action: manipulation; transition: background .2s; }
.login-panel button:hover { background: #4a3db7; }
.login-panel button:focus-visible { outline: 2px solid #5b4ecd; outline-offset: 3px; }
.login-panel .notice { margin: 0 0 16px; padding: 10px 14px; font-size: 13px; line-height: 1.5; border: 1px solid; border-radius: 12px; }
.login-panel .notice.ok { color: #157f3d; background: #e9f7ef; border-color: #b7e2c6; }
.login-panel .notice.err { color: #8f3f32; background: #fdecea; border-color: #f5c2bd; }
.login-panel .notice.warn { color: #9a6700; background: #fff8e5; border-color: #f0d68a; }
.login-hint { margin: 14px 0 0; font-size: 11px; line-height: 1.6; color: #7a72b0; text-align: center; }

@media (max-width: 650px) {
  .landing-content { padding: 80px 16px 120px; }
  .landing-content h1 { font-size: 76px; letter-spacing: -5px; gap: 9px; }
  .landing-content h1 span { font-size: 8px; padding-top: 8px; }
  .landing-motto { margin: 22px 0 28px; }
  .login-panel { padding: 22px 18px 18px; }
  .landing-note { left: 16px; right: 16px; bottom: 24px; font-size: 8px; line-height: 1.8; }
  .landing::before { background: radial-gradient(ellipse 70% 42% at 50% 50%, #f3f2fef5 0%, #f3f2fec9 50%, #f3f2fe20 100%); }
}
@media (prefers-reduced-motion: reduce) { .login-panel button { transition: none; } }