/* The sign-in pages: the admin panel's (smsadmin/index.jsp) and the client portal's sign-in,
   register and reset password (portal/jspclasses/signin.jsp). One layout, two faces: a split
   screen whose left side shows what that panel is for - live routes for the operators
   (.si-dark + .si-board), messages with their delivery status for customers (.si-thread) -
   and a plain form on the right. Colours come from the theme custom properties each page
   writes first (smsadmin/jspclasses/themes.jsp themeVars), so both follow the system theme.
   Below 900px the visual is dropped and the brand becomes a short strip above the form. */
*,*:before,*:after {box-sizing:border-box;}
html,body {height:100%;}
body {margin:0;background:#f5f6fa;color:#18212c;
      font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;}

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

.si-visual {position:relative;overflow:hidden;padding:44px 56px;display:flex;flex-direction:column;color:#fff;
            background:var(--cs-accent-darker);}
.si-visual:before {content:"";position:absolute;top:0;right:0;bottom:0;left:0;
            background:radial-gradient(120% 80% at 0% 0%,var(--cs-accent) 0%,transparent 62%),
                       radial-gradient(90% 70% at 100% 100%,rgba(0,0,0,.28) 0%,transparent 60%);}
.si-visual.si-dark {background:#141c25;}
.si-visual.si-dark:before {background:radial-gradient(90% 70% at 0% 0%,var(--cs-accent-soft) 0%,transparent 65%),
                                      radial-gradient(70% 60% at 100% 100%,var(--cs-accent-soft) 0%,transparent 70%);}
.si-visual > * {position:relative;}
.si-brand {display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.12em;font-size:13px;}
.si-brand img {width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.18);padding:4px;}
.si-copy {margin:auto 0 34px;max-width:450px;}
.si-copy h1 {font-size:42px;line-height:1.08;font-weight:800;letter-spacing:-.025em;margin:0 0 14px;}
.si-copy p {font-size:16px;line-height:1.6;opacity:.86;margin:0;}
.si-copy:last-child {margin:auto 0;}   /* no picture under it (the verification-code step): centre it */

.si-bar {height:4px;border-radius:4px;background:#e8ecf1;margin-top:9px;overflow:hidden;}
.si-bar i {display:block;height:100%;width:var(--w,96%);background:var(--cs-accent);border-radius:4px;animation:si-fill 2.4s ease-out .5s both;}

/* customers: three messages, each with the status they would see */
.si-thread {display:grid;gap:12px;max-width:430px;margin-bottom:auto;}
.si-msg {background:rgba(255,255,255,.97);color:#18212c;border-radius:18px 18px 18px 5px;padding:12px 16px 13px;
         box-shadow:0 14px 34px -14px rgba(0,0,0,.45);animation:si-rise .6s cubic-bezier(.2,.7,.2,1) both;}
.si-msg:nth-child(2) {margin-left:40px;animation-delay:.18s;}
.si-msg:nth-child(3) {animation-delay:.36s;}
.si-to {display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8793a0;}
.si-msg p {margin:4px 0 8px;font-size:14.5px;font-weight:600;line-height:1.4;}
.si-st {display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;}
.si-st:before {content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.si-ok {color:#1d8348;}
.si-go {color:var(--cs-accent-dark);}

/* operators: what the panel covers. Deliberately no figures, numbers or names - this page is
   public, and nothing on it may look like real traffic or a real vendor. */
.si-board {max-width:450px;margin-bottom:auto;padding:14px 18px 4px;border-radius:18px;
           background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
           box-shadow:0 20px 50px -24px rgba(0,0,0,.6);animation:si-rise .6s cubic-bezier(.2,.7,.2,1) both;}
.si-board-h {display:flex;align-items:center;gap:9px;margin-bottom:4px;font-size:10.5px;font-weight:800;
             letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);}
.si-live {width:8px;height:8px;border-radius:50%;background:#3ddc84;animation:si-pulse 2s ease-out infinite;}
.si-route {display:grid;grid-template-columns:34px 1fr;align-items:center;gap:0 12px;padding:12px 0 13px;
           border-top:1px solid rgba(255,255,255,.08);animation:si-rise .6s cubic-bezier(.2,.7,.2,1) both;}
.si-route:first-of-type {border-top:0;}
.si-route:nth-of-type(2) {animation-delay:.12s;}
.si-route:nth-of-type(3) {animation-delay:.24s;}
.si-ico {display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
         background:rgba(255,255,255,.08);color:#fff;font-size:15px;}
.si-route b {display:block;font-size:14.5px;font-weight:800;}
.si-route b + span {display:block;font-size:12.5px;color:rgba(255,255,255,.66);margin-top:1px;}

@keyframes si-rise {from {opacity:0;transform:translateY(14px);} to {opacity:1;transform:none;}}
@keyframes si-fill {from {width:6%;}}
@keyframes si-pulse {0% {box-shadow:0 0 0 0 rgba(61,220,132,.55);} 70%,100% {box-shadow:0 0 0 9px rgba(61,220,132,0);}}
@media (prefers-reduced-motion:reduce) {.si-msg,.si-board,.si-bar i,.si-live {animation:none;}}

.si-main {display:flex;align-items:center;justify-content:center;padding:48px 32px;}
.si-panel {width:100%;max-width:380px;}
.si-panel h2 {font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;}
.si-sub {color:#6b7684;font-size:15px;margin:0 0 28px;}

.si-field {margin-bottom:16px;}
.si-field label {display:block;font-size:13px;font-weight:700;color:#35404c;margin-bottom:7px;}
.si-input {position:relative;}
.si-input i {position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9aa4af;font-size:15px;}
.si-input input {width:100%;height:50px;padding:0 16px 0 44px;border:1.5px solid #dfe3ea;border-radius:12px;background:#fff;
                 font:inherit;font-size:15px;color:#18212c;transition:border-color .15s,box-shadow .15s;}
.si-input input:focus {outline:0;border-color:var(--cs-accent);box-shadow:0 0 0 4px var(--cs-accent-soft);}
.si-bad label {color:#b42318;}
.si-bad .si-input input {border-color:#f04438;}
.si-help {display:block;color:#b42318;font-size:12.5px;margin-top:6px;}

.si-btn {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:10px;border:0;
         border-radius:999px;background:var(--cs-accent);color:#fff;font:inherit;font-size:15.5px;font-weight:800;
         letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:background .15s;}
.si-btn:hover,.si-btn:focus {background:var(--cs-accent-darker);color:#fff;text-decoration:none;}
.si-btn:focus-visible {outline:3px solid var(--cs-accent-soft);outline-offset:3px;}
/* while the form is submitting (Sign in / Register / Verify): a spinner, so the click has
   visible feedback instead of the button just sitting there until the next page arrives */
.si-btn.si-loading {pointer-events:none;opacity:.92;}
.si-spin {display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.45);
          border-top-color:#fff;border-radius:50%;animation:si-spin .6s linear infinite;vertical-align:-3px;}
@keyframes si-spin {to {transform:rotate(360deg);}}

.si-err {display:flex;gap:10px;align-items:flex-start;background:#fef3f2;border:1px solid #fecdca;color:#b42318;
         border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.45;margin-bottom:20px;}
.si-err i {margin-top:2px;}
/* not everything above a sign-in form is a failure (smsadmin/jspclasses/signin-messages.jsp) */
.si-note {display:flex;gap:10px;align-items:flex-start;background:#f2f5f9;border:1px solid #dde4ec;color:#35404c;
          border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.45;margin-bottom:20px;}
.si-note i {margin-top:2px;color:var(--cs-accent-dark);}
.si-note.si-signedout {background:#edf7f0;border-color:#c5e5d0;color:#1f5f38;}
.si-note.si-signedout i {color:#1d8348;}
.si-input input::placeholder {color:#aab4c0;opacity:1;}
.si-links {display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:22px;font-size:14px;}
.si-links a {color:var(--cs-accent-dark);font-weight:700;text-decoration:none;}
.si-links a:hover,.si-links a:focus {color:var(--cs-accent-darker);text-decoration:underline;}
.si-done {font-size:15px;line-height:1.65;color:#35404c;margin-bottom:18px;}
.si-done p {margin:0 0 10px;}
.si-foot {margin:38px 0 0;font-size:12.5px;color:#9aa4af;}

@media (max-width:900px) {
  .si-shell {grid-template-columns:1fr;}
  .si-visual {padding:22px 22px 26px;}
  .si-copy {margin:22px 0 0;}
  .si-copy h1 {font-size:26px;}
  .si-copy p {font-size:14px;}
  .si-thread,.si-board {display:none;}
  .si-main {padding:28px 20px 40px;align-items:flex-start;}
  .si-foot {margin-top:28px;}
}