/* Own B sign-in — same type, tokens and glass buttons as the landing page. */
:root {
  --paper: #ffffff; --ink: #121417; --ink-2: #3b3f45; --muted: #70757d; --rule: #e4e6e9;
  --accent: #1f6b68; --accent-soft: #dff1ee; --bad: #b3261e;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --pastel: radial-gradient(60% 70% at 12% 20%, #b2ecd2 0%, rgba(178, 236, 210, 0) 70%),
            radial-gradient(55% 65% at 88% 15%, #d2c5fa 0%, rgba(210, 197, 250, 0) 70%),
            radial-gradient(60% 70% at 70% 92%, #a5def0 0%, rgba(165, 222, 240, 0) 70%),
            radial-gradient(50% 60% at 20% 95%, #c3d7fa 0%, rgba(195, 215, 250, 0) 70%),
            linear-gradient(135deg, #e6f7f0 0%, #ebe8ff 55%, #e2f2f9 100%);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* brand panel */
.login-art { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--pastel); padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; }
.login-logo { display: inline-block; line-height: 0; }
.login-logo img { height: 26px; width: auto; display: block; }
.login-logo.mobile { display: none; }
.login-products { position: relative; flex: 1; margin: 24px 0; }
.login-products .p { position: absolute; width: var(--w); height: auto; filter: drop-shadow(0 24px 30px rgba(40, 60, 110, .22)); animation: float 7s ease-in-out infinite alternate; }
.p1 { --w: 40%; left: 30%; top: 24%; animation-delay: -1s; z-index: 2; }
.p2 { --w: 26%; left: 6%; top: 8%; animation-delay: -3s; }
.p3 { --w: 20%; right: 10%; top: 6%; animation-delay: -5s; }
.p4 { --w: 23%; right: 9%; bottom: 8%; animation-delay: -2s; }
.p5 { --w: 21%; left: 10%; bottom: 10%; animation-delay: -4s; }
@keyframes float { from { transform: translateY(-8px) rotate(-1.5deg); } to { transform: translateY(8px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .login-products .p { animation: none; } }
.login-quote { margin: 0; max-width: 26rem; font-size: 1.35rem; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; }

/* form side */
.login-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px 24px; }
.login-card { width: 100%; max-width: 400px; margin: auto 0; }
.login-card h1 { font-size: 2.4rem; line-height: 1.15; font-weight: 700; letter-spacing: -.035em; margin: 0 0 .4rem; }
.login-sub { color: var(--ink-2); margin: 0 0 2rem; }

.field { display: block; margin-bottom: 1.1rem; }
.field > span:first-child { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .4rem; }
.field input { width: 100%; font: 500 1rem var(--font); color: var(--ink); padding: .8rem 1rem; border: 1px solid #d4d8dd; border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(31, 107, 104, .14); }
.pw { position: relative; display: block; }
.pw input { padding-right: 4.5rem; }
.pw-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font: 600 .78rem var(--font); color: var(--ink-2); background: none; border: 0; padding: .4rem .6rem; border-radius: 8px; cursor: pointer; }
.pw-toggle:hover { background: #f1f3f4; }

.login-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .2rem 0 1.4rem; }
.check { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.login-error { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 12px; background: #fdecea; color: var(--bad); font-size: .88rem; font-weight: 600; }

.btn { display: inline-flex; justify-content: center; align-items: center; width: 100%; font: 700 1rem var(--font); padding: .95rem 1.5rem; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.btn.primary { color: #fff; background: var(--ink); box-shadow: 0 12px 26px -12px rgba(18, 20, 23, .55); }
.btn.primary:hover { background: #24282d; transform: translateY(-1px); }
.btn.primary:active { transform: translateY(0) scale(.99); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }

/* demo accounts */
.demo-accounts { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.demo-accounts h2 { font-size: .95rem; margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; }
.tag { font: 700 .66rem var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: .2rem .5rem; border-radius: 999px; }
.demo-accounts p { margin: 0 0 .8rem; }
#demo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
#demo-list button { width: 100%; display: flex; align-items: center; gap: .75rem; text-align: left; font: inherit; color: inherit; padding: .55rem .7rem; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, .6); border: 1px solid var(--rule); transition: border-color .2s, background .2s, transform .2s var(--ease); }
#demo-list button:hover { border-color: rgba(18, 20, 23, .28); background: #fff; transform: translateY(-1px); }
.av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--ink); background: #e9ecef; }
.av[data-role="admin"] { background: #ddd3fb; }
.av[data-role="staff"] { background: #c4f1dc; }
.av[data-role="customer"] { background: #cfe0fb; }
.who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.who strong { font-size: .9rem; }
.who small { font-size: .76rem; color: var(--muted); }
.use { font-size: .78rem; font-weight: 700; color: var(--muted); }
#demo-list button:hover .use { color: var(--ink); }

.login-foot { width: 100%; max-width: 400px; display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin: 2rem 0 0; }
.login-foot a { text-decoration: none; font-weight: 600; color: var(--ink-2); }
.login-foot a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-logo.mobile { display: inline-block; align-self: flex-start; margin-bottom: 2rem; }
  .login-main { justify-content: flex-start; padding: 24px 16px; }
  .login-card { margin: 0; }
}

.field select { width: 100%; font: 500 1rem var(--font); color: var(--ink); padding: .8rem 1rem; border: 1px solid #d4d6d8; border-radius: 12px; background: #fff; }
.field textarea { width: 100%; font: 500 1rem var(--font); color: var(--ink); padding: .8rem 1rem; border: 1px solid #d4d6d8; border-radius: 12px; background: #fff; resize: vertical; box-sizing: border-box; }
.su-trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.su-terms { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: 1.1rem; font-size: .88rem; }
.login-signup { text-align: center; font-size: .88rem; margin: 1rem 0 0; color: var(--ink-2); }