/* The sign-in screen.

   Linked only on /login, like the print sheets: it sets rules on body, and admin.css
   sets body to the app shell (flex, full height, no overflow). Two layouts cannot
   share one element, so this sheet stays off every other screen.

   One panel in the middle of a branded ground, replacing the two-column split ported
   from mocks/admin/login.html. The split was measured at 1718px wide: a 400px card
   adrift in an 859px empty field, with the other half selling the product to somebody
   who has already decided to use it. A centred panel has no empty half at any width.

   .brand-logo and .brand-name are taken by the brand cards in products.css, which is
   linked everywhere and would win here - so everything on this page is prefixed lg-. */

body{margin:0;display:block;height:auto;overflow:auto;background:var(--dark);
     font-family:"Almarai",system-ui,sans-serif}

/* ── the ground ── */
/* Two very soft pools of brand colour rather than a flat black. They sit at opposite
   corners so the panel in the middle stays on the darkest part of the field, which is
   what a white card needs behind it. */
.login-shell{min-height:100vh;display:grid;place-items:center;padding:40px 20px;
             position:relative;overflow:hidden;
             background:
               radial-gradient(900px 620px at 82% -10%, rgba(0,163,224,.20), transparent 62%),
               radial-gradient(760px 560px at 12% 108%, rgba(0,51,160,.30), transparent 60%),
               var(--dark)}

.lg-stage{position:relative;z-index:1;width:100%;max-width:430px}
.lg-panel{display:grid;gap:22px}

/* ── the mark ── */
/* Inside the card, at the top of it. What Soter uploads is a full lockup - the ribbon
   with "Soter Cosmetics" set under it, measured 221x348 - and a lockup is not an icon:
   at 48px its lettering was a smudge, and its dark type was being put on a dark ground
   it was never drawn for. The card is white and 374px wide inside its padding, which
   is the surface and the room the artwork already expects.

   Height, not width: these are uploaded at whatever proportion the brand was drawn in,
   and fixing the height is the only way a tall lockup and a wide one both come out the
   same weight on the page. 104px reads the wordmark without the mark becoming the page. */
.lg-mark{display:flex;justify-content:center;margin-bottom:20px}
.lg-mark img{height:104px;width:auto;max-width:100%;object-fit:contain;display:block}

/* Nothing uploaded yet. A glyph on its own says nothing about whose system this is,
   so the name is set beside it - the one case where the caption has to carry it. */
.lg-mark.is-fallback{align-items:center;gap:11px}
.lg-logo{width:44px;height:44px;border-radius:13px;flex-shrink:0;
         background:linear-gradient(135deg,var(--primary),var(--accent));
         display:grid;place-items:center;font-size:21px;color:#fff}
.lg-mark.is-fallback strong{font-size:19px;font-weight:800;color:var(--text);line-height:1.4}

/* ── the card ── */
.login-card{background:var(--card);border-radius:18px;padding:28px;
            box-shadow:0 24px 60px rgba(0,0,0,.36)}
.login-head{margin-bottom:22px}
.login-head h2{font-size:22px;font-weight:800;margin:0 0 6px;line-height:1.45}
.login-head p{font-size:13px;color:var(--muted);margin:0;line-height:1.7}

.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;line-height:1.5}
.inp{position:relative;display:flex;align-items:center}
.inp>i{position:absolute;inset-inline-start:13px;color:var(--muted);font-size:16px;pointer-events:none}
.inp input{width:100%;padding:12px 42px;border:1px solid var(--border);border-radius:10px;
           font-size:14px;font-family:inherit;color:var(--text);background:var(--card);
           outline:none;transition:.15s}
.inp input:focus{border-color:var(--primary);box-shadow:var(--ring)}
.inp input::placeholder{color:#A9B7CE}

.btn-login{width:100%;margin-top:6px;padding:13px;border:0;border-radius:10px;
           background:var(--primary);color:#fff;font-size:14px;font-weight:800;
           font-family:inherit;cursor:pointer;display:flex;align-items:center;
           justify-content:center;gap:8px;transition:.15s}
.btn-login:hover{background:var(--primary-d)}
.btn-login:disabled{opacity:.6;cursor:not-allowed}

.alert{display:none;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:10px;
       font-size:13px;line-height:1.75;margin-bottom:16px}
.alert.show{display:flex}
.alert i{font-size:16px;flex-shrink:0;margin-top:1px}
.alert-danger{background:var(--danger-ll);border:1px solid var(--danger-l);color:var(--danger)}

/* What somebody at this door actually needs: how long they get, that they are being
   recorded, and who to call. It used to be a hint beside the button, a foot line and a
   paragraph on the dark half - three places for three sentences of the same kind. */
.lg-facts{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--border);
          display:grid;gap:10px}
.lg-facts li{display:flex;align-items:flex-start;gap:9px;font-size:12px;
             color:var(--muted);line-height:1.6}
.lg-facts i{font-size:14px;color:var(--slate);flex-shrink:0;margin-top:1px}

.lg-foot{text-align:center;font-size:12px;color:#6C82A6;line-height:1.8}

@media (max-width:480px){
  .login-shell{padding:28px 16px}
  .login-card{padding:24px 20px}
}