/* =========================================================================
   Login screen — layout mirrors Figma node 2767:16272 ("Log in")
   Two full-height panels: dark hero (left) / light dialog (right).

   NOTE on the hero illustration: the exact PNG exported from Figma
   (laptop + floating stat cards) could not be downloaded into this build
   environment (no network route to figma.com from the sandbox that
   produced this code). The composition below is a hand-built CSS/SVG
   approximation — same layout, same colors, same floating elements —
   not a pixel export. Swap in the real asset any time by replacing the
   contents of .hero-illustration with an <img>.
   ========================================================================= */

.login-page{
  display:flex;
  min-height:100vh;
  width:100%;
}

.login-page .panel{
  flex: 1 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:24px;
}

.panel-hero{
  background: var(--surface-900);
  position:relative;
  overflow:hidden;
}

.panel-form{
  background: var(--primary-300);
}

/* ---------------------------------------------------------------------
   Hero illustration (left panel)
   --------------------------------------------------------------------- */
.hero-illustration{
  position:relative;
  width:min(650px, 90vw);
  aspect-ratio: 1 / 1;
}

.hero-glow{
  position:absolute;
  border-radius:50%;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.hero-glow.g1{ width:88%; height:88%; background:radial-gradient(circle, rgba(138,212,255,0.16) 0%, rgba(138,212,255,0.05) 60%, rgba(138,212,255,0) 100%); }
.hero-glow.g2{ width:65%; height:65%; background:radial-gradient(circle, rgba(138,212,255,0.22) 0%, rgba(138,212,255,0) 100%); }

.hero-shadow{
  position:absolute;
  left:50%; bottom:16%;
  transform:translateX(-50%);
  width:78%; height:14%;
  background:radial-gradient(ellipse, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 72%);
}

/* --- laptop mockup --- */
.hero-laptop{
  position:absolute;
  left:50%; top:20%;
  transform:translateX(-50%);
  width:82%;
}
.laptop-screen{
  background:#1b1c33;
  border-radius:10px 10px 0 0;
  padding:6px 6px 0;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
}
.laptop-browser-bar{
  display:flex;
  align-items:center;
  gap:6px;
  background:#242547;
  border-radius:6px 6px 0 0;
  padding:6px 10px;
}
.laptop-browser-bar .dot{ width:7px; height:7px; border-radius:50%; }
.laptop-browser-bar .dot.r{ background:#ff6159; }
.laptop-browser-bar .dot.y{ background:#ffbd2e; }
.laptop-browser-bar .dot.g{ background:#28c941; }
.laptop-browser-bar .url{
  margin-left:8px;
  font-size:9px;
  color:#9fa3c9;
  background:rgba(255,255,255,0.06);
  border-radius:4px;
  padding:2px 8px;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.laptop-screen-content{
  background:#eaf6ff;
  border-radius:4px 4px 0 0;
  overflow:hidden;
  display:flex;
  min-height:200px;
  font-size:8px;
}
.laptop-sidebar{
  width:26%;
  background:#ffffff;
  padding:8px 6px;
  border-right:1px solid #e7ebf5;
}
.laptop-sidebar .brand{ display:flex; align-items:center; gap:4px; font-weight:700; color:#242547; font-size:9px; margin-bottom:10px; }
.laptop-sidebar .brand .dot{ width:6px; height:6px; border-radius:2px; background:#24aeff; }
.laptop-sidebar .item{ padding:4px 5px; border-radius:4px; color:#7b7f9e; margin-bottom:3px; }
.laptop-sidebar .item.active{ background:#e8f6ff; color:#1b6fa8; font-weight:600; }
.laptop-main{ flex:1; padding:8px; position:relative; }
.laptop-main .title{ font-weight:700; color:#242547; font-size:11px; margin-bottom:8px; text-align:center; }
.laptop-cards{ display:flex; gap:5px; margin-bottom:8px; flex-wrap:wrap; }
.laptop-card{
  background:#fff; border-radius:5px; padding:5px 7px; box-shadow:0 2px 6px rgba(20,20,50,0.08);
  flex:1; min-width:52px;
}
.laptop-card .lbl{ color:#8287ab; font-size:6.5px; margin-bottom:2px; }
.laptop-card .val{ font-weight:700; color:#242547; font-size:11px; }
.laptop-table{ background:#fff; border-radius:5px; padding:5px; box-shadow:0 2px 6px rgba(20,20,50,0.06); }
.laptop-table .row{ display:flex; justify-content:space-between; padding:2px 0; border-bottom:1px solid #f0f2f8; color:#5c6086; }
.laptop-table .row:last-child{ border-bottom:none; }
.laptop-table .status{ padding:1px 4px; border-radius:3px; font-weight:600; font-size:6px; }
.laptop-table .status.ok{ background:#e4f8ea; color:#1c8a44; }
.laptop-table .status.warn{ background:#fdeee0; color:#b0591a; }
.laptop-table .status.info{ background:#e6f1fd; color:#1c66b0; }
.laptop-base{
  height:9px;
  background:linear-gradient(#31324f,#1b1c33);
  border-radius:0 0 3px 3px;
  position:relative;
}
.laptop-base::after{
  content:"";
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:14%; height:3px; background:#0f1024; border-radius:0 0 4px 4px;
}

/* --- floating stat stickers (match the 3 cards + 4 corner icons) --- */
.hero-sticker{
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border-radius:8px;
  padding:6px 10px;
  box-shadow:0 10px 20px -6px rgba(0,0,0,0.25);
  font-size:9px;
  color:#4a4c7e;
  white-space:nowrap;
}
.hero-sticker .lbl{ font-size:7.5px; color:#8287ab; }
.hero-sticker .val{ font-weight:700; font-size:12px; color:#242547; }
.hero-sticker .ic{ width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.hero-sticker .ic.green{ background:#e4f8ea; color:#1c8a44; }
.hero-sticker .ic.red{ background:#fdeaec; color:#c23a4c; }
.hero-sticker .ic svg{ width:10px; height:10px; }

.st-active{ left:6%; top:37%; transform:rotate(-4deg); }
.st-suspended{ left:38%; top:30%; transform:rotate(2deg); }
.st-closed{ right:4%; top:37%; transform:rotate(-3deg); }

/* corner icon chips (trending-up / pie-chart / refresh / area-chart) */
.hero-chip{
  position:absolute;
  width:44px; height:44px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 18px -6px rgba(0,0,0,0.3);
}
.hero-chip svg{ width:22px; height:22px; }
.chip-refresh{ left:2%; top:6%; background:#cdeeff; color:#1a6f9e; transform:rotate(-14deg); }
.chip-trending{ right:6%; top:8%; background:#c9f5da; color:#1c8a44; transform:rotate(10deg); }
.chip-pie{ left:4%; bottom:6%; background:#e4dbfb; color:#6a3fc9; transform:rotate(-17deg); }
.chip-area{ right:8%; bottom:10%; background:#fdf0b0; color:#9a7a06; transform:rotate(9deg); }

/* ---------------------------------------------------------------------
   Sign-in dialog (right panel)
   --------------------------------------------------------------------- */
.dialog{
  width:350px;
  max-width:100%;
  background:var(--dialog-background);
  border:1px solid var(--dialog-border-color);
  border-radius:var(--dialog-border-radius);
  box-shadow:var(--dialog-shadow);
  overflow:hidden;
}

.dialog-header{
  display:flex;
  align-items:center;
  padding:var(--dialog-header-padding);
  gap:12px;
}
.dialog-header h1{
  flex:1;
  margin:0;
  font-weight:var(--dialog-title-font-weight);
  font-size:var(--dialog-title-font-size);
  color:var(--dialog-color);
}

.lang-select{
  display:flex;
  align-items:center;
  gap:8px;
}
.lang-select .flag{ width:16px; height:16px; flex:none; }
.lang-select select{
  appearance:none;
  background:var(--select-background) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4c7e' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  background-size:12px;
  border:1px solid var(--select-border-color);
  border-radius:var(--select-border-radius);
  box-shadow:var(--select-shadow);
  color:var(--cascadeselect-color);
  font-size:14px;
  padding:5px 26px 5px 9px;
  width:72px;
}

.dialog-content{ padding:0 17.5px 17.5px; }
.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-size:var(--app-font-size);
  color:var(--text-color);
  margin-bottom:7px;
}
.field-input{
  display:flex;
  align-items:center;
  gap:10.5px;
  background:var(--inputtext-background);
  border:1px solid var(--inputtext-border-color);
  border-radius:var(--inputtext-border-radius);
  box-shadow:var(--inputtext-shadow);
  padding:var(--inputtext-padding-y) var(--inputtext-padding-x);
}
.field-input.is-invalid{ border-color:var(--error-color); }
.field-input svg{ width:16px; height:16px; flex:none; color:#8287ab; }
.field-input input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  font-size:16px;
  color:var(--text-color);
  background:transparent;
}
.field-input input::placeholder{ color:var(--inputtext-placeholder-color); }
.eye-toggle{
  background:none; border:0; padding:0; display:flex; color:#8287ab;
}
.eye-toggle:hover{ color:var(--text-color); }

.field-error{
  font-size:12.5px;
  color:var(--error-color);
  margin-top:5px;
}

.form-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.checkbox{
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-size:16px;
  color:var(--text-color);
}
.checkbox input{ position:absolute; opacity:0; width:17.5px; height:17.5px; margin:0; cursor:pointer; }
.checkbox .box{
  width:17.5px; height:17.5px;
  border:1px solid var(--checkbox-border-color);
  border-radius:var(--checkbox-border-radius);
  background:var(--checkbox-background);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.checkbox input:checked + .box{ background:var(--button-text-primary-color); border-color:var(--button-text-primary-color); }
.checkbox .box svg{ width:12px; height:12px; color:#fff; opacity:0; }
.checkbox input:checked + .box svg{ opacity:1; }

.link-btn{
  background:none; border:0; padding:7px 10.5px;
  color:var(--button-text-primary-color);
  font-size:16px; font-weight:500;
}
.link-btn:hover{ text-decoration:underline; }

.dialog-footer{
  display:flex;
  justify-content:flex-end;
  padding:0 17.5px 17.5px;
}
.btn-primary{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:var(--button-gap);
  background:var(--button-help-background);
  border:1px solid var(--button-help-border-color);
  border-radius:var(--button-border-radius);
  color:var(--button-help-color);
  font-size:16px; font-weight:500;
  padding:var(--button-padding-y) var(--button-padding-x);
  transition:filter .15s ease;
}
.btn-primary:hover{ filter:brightness(0.96); }
.btn-primary:disabled{ opacity:.6; cursor:default; }
.btn-primary .spinner{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(0,0,0,0.25); border-top-color:#000;
  animation:spin .7s linear infinite;
  display:none;
}
.btn-primary.is-loading .spinner{ display:inline-block; }
.btn-primary.is-loading .btn-label{ opacity:.7; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form-banner{
  display:none;
  align-items:flex-start;
  gap:8px;
  background:var(--error-bg);
  color:var(--error-color);
  border-radius:6px;
  padding:10px 12px;
  font-size:13.5px;
  margin:0 17.5px 16px;
}
.form-banner.is-visible{ display:flex; }
.form-banner svg{ width:16px; height:16px; flex:none; margin-top:1px; }

@media (max-width: 860px){
  .panel-hero{ display:none; }
  .login-page .panel-form{ flex:1 0 100%; }
}