:root {
  --auth-bg: #0e0f0e;
  --auth-panel: #171815;
  --auth-card: #f0eee7;
  --auth-ink: #11120f;
  --auth-white: #f6f4ee;
  --auth-muted: rgba(246,244,238,.55);
  --auth-line: rgba(255,255,255,.1);
  --auth-orange: #ff571c;
  --auth-ease: cubic-bezier(.16,1,.3,1);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--auth-bg);
  color: var(--auth-white);
  font-family: Manrope, Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.auth-page {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(460px,.92fr);
  overflow: hidden;
}
.auth-stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(24px,3vw,48px);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background:
    radial-gradient(circle at calc(50% + var(--px,0) * 9%) calc(48% + var(--py,0) * 9%), rgba(255,87,28,.16), transparent 26%),
    linear-gradient(145deg,#151613 0%,#0d0e0d 64%);
}
.auth-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .23;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom,black,transparent 88%);
}
.auth-stage::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  min-width: 560px;
  min-height: 560px;
  left: 52%;
  top: 48%;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 78px rgba(255,255,255,.018), 0 0 0 156px rgba(255,255,255,.012);
}
.auth-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.auth-logo { display: inline-flex; align-items: center; text-decoration: none; }
.auth-logo img { width: clamp(122px,9vw,156px); height: auto; display: block; }
.auth-top-actions { display: flex; align-items: center; gap: 8px; }
.auth-top-link {
  min-height: 38px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.67);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  transition: .3s var(--auth-ease);
}
.auth-top-link:hover { color:#fff; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.07); transform:translateY(-1px); }
.auth-stage-copy {
  position: relative;
  z-index: 4;
  width: min(680px,100%);
  margin-top: auto;
  margin-bottom: clamp(18px,3vw,46px);
}
.auth-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: rgba(255,255,255,.52);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}
.auth-eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--auth-orange); box-shadow:0 0 0 6px rgba(255,87,28,.11); }
.auth-stage h1 {
  margin: 0;
  max-width: 660px;
  white-space: pre-line;
  font-family: Unbounded, Manrope, sans-serif;
  font-size: clamp(42px,5vw,76px);
  font-weight: 700;
  line-height: .97;
  letter-spacing: -.065em;
}
.auth-stage-copy>p {
  max-width: 545px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.55);
  font-size: clamp(13px,1.1vw,17px);
  line-height: 1.45;
}
.auth-visual {
  --px: 0;
  --py: 0;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 45%;
  width: min(40vw,640px);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  transition: transform .8s var(--auth-ease);
}
.auth-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  border-radius: 31px;
  transform: translate(calc(-50% + var(--px) * 12px),calc(-50% + var(--py) * 12px)) rotate(-7deg);
  background: var(--auth-orange);
  box-shadow: 0 34px 85px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition: transform .45s var(--auth-ease);
}
.auth-core img { width: 76px; filter: brightness(0) invert(1); }
.auth-orbit {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.auth-orbit--a { width: 54%; height: 54%; animation: auth-spin 28s linear infinite; }
.auth-orbit--b { width: 82%; height: 82%; animation: auth-spin-reverse 42s linear infinite; }
.auth-orbit--c { width: 100%; height: 100%; border-style: solid; opacity:.42; }
.auth-role {
  position: absolute;
  min-width: 112px;
  height: 38px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(25,26,23,.78);
  box-shadow: 0 15px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.76);
  font-size: 10px;
  font-weight: 700;
  transform: translate(calc(var(--px) * var(--mx,8px)),calc(var(--py) * var(--my,8px)));
  transition: transform .55s var(--auth-ease),border-color .3s,background .3s;
}
.auth-role::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--auth-orange); box-shadow:0 0 0 4px rgba(255,87,28,.09); }
.auth-role:hover { border-color:rgba(255,87,28,.32); background:rgba(37,31,26,.92); }
.auth-role--1 { top:18%; left:11%; --mx:-16px; --my:-8px; }
.auth-role--2 { top:22%; right:4%; --mx:15px; --my:-10px; }
.auth-role--3 { bottom:18%; left:2%; --mx:-13px; --my:13px; }
.auth-role--4 { bottom:15%; right:7%; --mx:17px; --my:12px; }
.auth-status-chip {
  position:absolute;
  left:50%; top:50%;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.42);
  font: 700 8px/1 Manrope,sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translate(-50%,88px);
}
.auth-status-chip::before { content:""; display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:50%; background:#68d391; box-shadow:0 0 0 4px rgba(104,211,145,.08); vertical-align:1px; }
.auth-panel-wrap {
  min-height: 100svh;
  padding: clamp(14px,1.5vw,24px);
  background: #0a0b0a;
  display: flex;
}
.auth-panel {
  position: relative;
  width: 100%;
  min-height: calc(100svh - clamp(28px,3vw,48px));
  overflow: hidden;
  border-radius: clamp(22px,2vw,34px);
  background: var(--auth-card);
  color: var(--auth-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px,5vw,76px);
}
.auth-panel::before {
  content:"";
  position:absolute;
  width:240px; height:240px;
  right:-105px; top:-105px;
  border-radius:50%;
  border:1px solid rgba(17,18,15,.08);
  box-shadow:0 0 0 42px rgba(17,18,15,.025),0 0 0 84px rgba(17,18,15,.018);
}
.auth-panel::after {
  content:"RR";
  position:absolute;
  right:-12px;
  bottom:-46px;
  color:rgba(17,18,15,.025);
  font-family:Unbounded,sans-serif;
  font-size:168px;
  font-weight:800;
  letter-spacing:-.12em;
  pointer-events:none;
}
.auth-form-shell { position:relative; z-index:2; width:min(440px,100%); margin:auto; }
.auth-form-eyebrow { color:rgba(17,18,15,.42); font-size:9px; font-weight:800; letter-spacing:.14em; }
.auth-form-shell h2 { margin:18px 0 8px; font-size:clamp(36px,3.3vw,54px); line-height:1; letter-spacing:-.055em; font-weight:700; }
.auth-form-shell>p { margin:0 0 34px; color:rgba(17,18,15,.52); font-size:13px; line-height:1.45; }
.auth-form { display:grid; gap:17px; }
.auth-field { display:grid; gap:8px; }
.auth-field__top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.auth-field label { color:rgba(17,18,15,.74); font-size:10px; font-weight:800; }
.auth-forgot { padding:0; border:0; background:none; color:rgba(17,18,15,.48); font-size:9px; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.auth-forgot:hover { color:var(--auth-orange); }
.auth-input-wrap { position:relative; }
.auth-input {
  width:100%;
  height:58px;
  padding:0 48px 0 17px;
  outline:0;
  border:1px solid rgba(17,18,15,.12);
  border-radius:14px;
  background:rgba(255,255,255,.55);
  color:#11120f;
  font-size:13px;
  font-weight:600;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.auth-input::placeholder { color:rgba(17,18,15,.29); font-weight:500; }
.auth-input:hover { background:rgba(255,255,255,.72); }
.auth-input:focus { border-color:rgba(255,87,28,.56); background:#fff; box-shadow:0 0 0 4px rgba(255,87,28,.08); }
.auth-eye {
  position:absolute;
  right:9px; top:50%;
  width:38px; height:38px;
  margin-top:-19px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:rgba(17,18,15,.42);
  display:grid; place-items:center;
  cursor:pointer;
}
.auth-eye:hover,.auth-eye.is-active { color:#11120f; background:rgba(17,18,15,.055); }
.auth-eye svg { width:18px; height:18px; }
.auth-submit {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:58px;
  margin-top:4px;
  padding:0 18px;
  border:0;
  border-radius:14px;
  background:#11120f;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  transition:transform .28s var(--auth-ease),box-shadow .28s var(--auth-ease),background .28s;
}
.auth-submit::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,var(--auth-orange),#ff743f);
  transform:translateX(-101%);
  transition:transform .55s var(--auth-ease);
}
.auth-submit:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(17,18,15,.16); }
.auth-submit:hover::before { transform:translateX(0); }
.auth-submit:disabled { cursor:wait; opacity:.72; transform:none; }
.auth-submit.is-loading::after { content:""; width:15px; height:15px; border:2px solid rgba(255,255,255,.24); border-top-color:#fff; border-radius:50%; animation:auth-spin-loader .7s linear infinite; }
.auth-submit.is-loading .auth-submit__arrow { display:none; }
.auth-submit__arrow { width:29px; height:29px; border-radius:9px; background:rgba(255,255,255,.09); display:grid; place-items:center; font-size:14px; }
.auth-message { min-height:0; margin:0!important; padding:11px 12px; border-radius:11px; font-size:10px!important; font-weight:700; line-height:1.4!important; }
.auth-message[data-tone="error"] { color:#a9341c; background:rgba(197,61,32,.09); border:1px solid rgba(197,61,32,.13); }
.auth-message[data-tone="success"] { color:#28754a; background:rgba(40,117,74,.08); border:1px solid rgba(40,117,74,.12); }
.auth-note { margin-top:20px; color:rgba(17,18,15,.39); font-size:9px; line-height:1.45; }
.auth-security {
  position:absolute;
  left:clamp(32px,5vw,76px);
  bottom:clamp(26px,3vw,42px);
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(17,18,15,.3);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.auth-security::before { content:""; width:6px; height:6px; border-radius:50%; background:rgba(17,18,15,.25); }
@keyframes auth-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes auth-spin-reverse { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes auth-spin-loader { to { transform:rotate(360deg); } }
@media (max-width: 980px) {
  .auth-page { grid-template-columns:1fr; overflow:visible; }
  .auth-stage { min-height:390px; padding:24px; }
  .auth-stage-copy { margin:190px 0 0; }
  .auth-stage h1 { font-size:clamp(38px,7vw,60px); }
  .auth-visual { width:390px; left:auto; right:-70px; top:50%; transform:translateY(-50%); opacity:.74; }
  .auth-panel-wrap { min-height:auto; padding:0 14px 14px; background:var(--auth-bg); }
  .auth-panel { min-height:650px; }
}
@media (max-width: 620px) {
  .auth-stage { min-height:320px; padding:18px 17px; }
  .auth-top-link[data-back-link] { display:none; }
  .auth-logo img { width:112px; }
  .auth-stage-copy { margin:150px 0 0; }
  .auth-eyebrow { margin-bottom:11px; font-size:8px; }
  .auth-stage h1 { max-width:360px; font-size:clamp(31px,10vw,43px); }
  .auth-stage-copy>p { max-width:360px; margin-top:14px; font-size:11px; }
  .auth-visual { width:300px; right:-96px; top:46%; opacity:.54; }
  .auth-role { min-width:88px; height:31px; padding:0 9px; font-size:8px; }
  .auth-core { width:86px; height:86px; border-radius:24px; }
  .auth-core img { width:58px; }
  .auth-status-chip { transform:translate(-50%,67px); font-size:6px; }
  .auth-panel-wrap { padding:0 8px 8px; }
  .auth-panel { min-height:calc(100svh - 8px); border-radius:23px; padding:34px 21px 82px; }
  .auth-form-shell { margin:auto 0; }
  .auth-form-shell h2 { font-size:39px; }
  .auth-form-shell>p { margin-bottom:28px; }
  .auth-security { left:21px; bottom:27px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-orbit--a,.auth-orbit--b,.auth-submit.is-loading::after { animation:none; }
  .auth-role,.auth-core,.auth-submit,.auth-top-link { transition:none; }
}

/* ─────────────────────────────────────────────────────────────
   MODERRNO Workspace demo — login signature interaction
   Figma / iOS inspired, rendered as real DOM for crisp Retina UI.
   ───────────────────────────────────────────────────────────── */
.auth-visual {
  width: min(43vw, 680px);
  height: min(31vw, 470px);
  aspect-ratio: auto;
  top: 39%;
  perspective: 1100px;
}
.auth-orbit--b { width: 84%; height: 118%; animation: auth-spin-reverse 56s linear infinite; opacity:.58; }
.auth-orbit--c { width: 112%; height: 156%; opacity:.34; }
.auth-role {
  z-index: 7;
  min-width: 102px;
  height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  background: rgba(20,21,19,.74);
  border-color: rgba(255,255,255,.095);
  box-shadow: 0 16px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);
  color: rgba(255,255,255,.62);
  font-size: 9px;
  letter-spacing: -.01em;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  transition: transform .65s var(--auth-ease), opacity .5s var(--auth-ease), border-color .35s, background .35s, color .35s, box-shadow .35s;
}
.auth-role::before { display:none; }
.auth-role__dot { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--auth-orange); box-shadow:0 0 0 4px rgba(255,87,28,.08); transition:.4s var(--auth-ease); }
.auth-role.is-active {
  color:#fff;
  border-color:rgba(255,87,28,.38);
  background:rgba(37,29,24,.92);
  box-shadow:0 16px 45px rgba(0,0,0,.28),0 0 0 1px rgba(255,87,28,.07) inset,0 0 28px rgba(255,87,28,.08);
}
.auth-role.is-active .auth-role__dot { box-shadow:0 0 0 7px rgba(255,87,28,.09),0 0 16px rgba(255,87,28,.42); }
.auth-role.is-consumed { opacity:.4; transform:translate(calc(var(--px) * var(--mx,8px)),calc(var(--py) * var(--my,8px))) scale(.96); }
.auth-role--1 { top:5%; left:7%; --mx:-13px; --my:-7px; }
.auth-role--2 { top:9%; right:0; --mx:14px; --my:-8px; }
.auth-role--3 { bottom:3%; left:1%; --mx:-12px; --my:11px; }
.auth-role--4 { bottom:7%; right:2%; --mx:14px; --my:10px; }

.workspace-demo {
  --demo-rx:0deg;
  --demo-ry:0deg;
  --demo-x:0px;
  --demo-y:0px;
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:min(82%, 535px);
  transform:translate(calc(-50% + var(--demo-x)),calc(-50% + var(--demo-y))) rotateX(var(--demo-rx)) rotateY(var(--demo-ry));
  transform-style:preserve-3d;
  transition:transform .65s var(--auth-ease);
  will-change:transform;
}
.workspace-demo__glow {
  position:absolute;
  z-index:-2;
  left:12%; right:12%; top:12%; bottom:-3%;
  border-radius:38px;
  background:radial-gradient(circle at 50% 34%,rgba(255,87,28,.2),rgba(255,87,28,.055) 35%,transparent 68%);
  filter:blur(30px);
  opacity:.72;
  animation:workspace-breathe 5.6s ease-in-out infinite;
}
.workspace-demo__window {
  position:relative;
  overflow:hidden;
  border-radius:21px;
  border:1px solid rgba(255,255,255,.115);
  background:linear-gradient(145deg,rgba(36,37,34,.94),rgba(19,20,18,.95));
  box-shadow:
    0 38px 90px rgba(0,0,0,.44),
    0 8px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(28px) saturate(1.12);
  -webkit-backdrop-filter:blur(28px) saturate(1.12);
}
.workspace-demo__window::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.035),transparent 28%,transparent 72%,rgba(255,87,28,.025));
}
.workspace-demo__topbar {
  height:36px;
  padding:0 11px 0 13px;
  display:grid;
  grid-template-columns:60px 1fr 60px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.018);
}
.workspace-demo__traffic { display:flex; gap:5px; }
.workspace-demo__traffic i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.13); }
.workspace-demo__traffic i:first-child { background:rgba(255,87,28,.66); }
.workspace-demo__title { justify-self:center; display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.72); font-size:7px; font-weight:800; letter-spacing:.03em; white-space:nowrap; }
.workspace-demo__title b { color:rgba(255,255,255,.28); font-weight:700; }
.workspace-demo__mark { width:15px; height:15px; border-radius:5px; display:grid; place-items:center; background:var(--auth-orange); color:#fff; font-size:7px; font-weight:800; transform:rotate(-5deg); }
.workspace-demo__presence { justify-self:end; display:flex; align-items:center; gap:4px; color:rgba(255,255,255,.32); font-size:6px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.workspace-demo__presence i,.workspace-demo__online i,.workspace-demo__mini-status i { width:4px; height:4px; border-radius:50%; background:#68d391; box-shadow:0 0 0 3px rgba(104,211,145,.07); }
.workspace-demo__body { min-height:258px; display:grid; grid-template-columns:43px 1fr; }
.workspace-demo__sidebar {
  padding:11px 7px 9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  border-right:1px solid rgba(255,255,255,.065);
  background:rgba(9,10,9,.18);
}
.workspace-demo__sidebar button {
  width:28px; height:28px; padding:0; border:0; border-radius:9px; display:grid; place-items:center;
  background:transparent; color:rgba(255,255,255,.27);
}
.workspace-demo__sidebar button.is-active { background:rgba(255,255,255,.075); color:rgba(255,255,255,.77); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.workspace-demo__sidebar svg { width:13px; height:13px; fill:currentColor; }
.workspace-demo__sidebar>span { flex:1; }
.workspace-demo__avatar { width:25px; height:25px; border-radius:9px; display:grid; place-items:center; color:#fff; font-size:6px; font-weight:800; background:linear-gradient(145deg,#443831,#211f1c); border:1px solid rgba(255,255,255,.08); }
.workspace-demo__main { position:relative; min-width:0; padding:13px 14px 10px; display:flex; flex-direction:column; }
.workspace-demo__hello { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:29px; }
.workspace-demo__hello>div:first-child { display:flex; flex-direction:column; gap:2px; min-width:0; }
.workspace-demo__hello small { color:rgba(255,255,255,.28); font-size:5px; font-weight:800; letter-spacing:.12em; }
.workspace-demo__hello strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.84); font-size:9px; font-weight:700; letter-spacing:-.02em; }
.workspace-demo__online { display:flex; align-items:center; gap:5px; height:20px; padding:0 7px; border:1px solid rgba(255,255,255,.06); border-radius:7px; background:rgba(255,255,255,.025); color:rgba(255,255,255,.32); font-size:6px; font-weight:700; white-space:nowrap; }

.workspace-demo__composer {
  position:absolute;
  left:14px; right:14px; top:58px;
  transition:opacity .5s var(--auth-ease),transform .65s var(--auth-ease),filter .55s var(--auth-ease);
}
.workspace-demo__composer-label { margin-bottom:7px; color:rgba(255,255,255,.45); font-size:7px; font-weight:700; }
.workspace-demo__input {
  position:relative;
  height:51px;
  padding:0 47px 0 12px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-radius:14px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 24px rgba(0,0,0,.09);
  color:rgba(255,255,255,.78);
  font-size:8px;
  font-weight:600;
}
.workspace-demo__input::before { content:""; position:absolute; left:12px; right:50px; bottom:8px; height:1px; opacity:.12; background:linear-gradient(90deg,var(--auth-orange),transparent); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--auth-ease); }
.workspace-demo[data-phase="typing"] .workspace-demo__input::before { transform:scaleX(1); }
.workspace-demo__caret { width:1px; height:11px; margin-left:2px; background:var(--auth-orange); animation:workspace-caret .9s steps(1) infinite; }
.workspace-demo__input button {
  position:absolute; right:8px; width:34px; height:34px; border:0; border-radius:10px; display:grid; place-items:center;
  background:#f1eee6; color:#171815; box-shadow:0 5px 14px rgba(0,0,0,.18); transition:background .3s,color .3s,transform .35s var(--auth-ease);
}
.workspace-demo__input button.is-tapped { background:var(--auth-orange); color:#fff; }
.workspace-demo__input svg { width:14px; height:14px; }

.workspace-demo__task {
  position:absolute;
  left:14px; right:14px; top:53px;
  min-height:157px;
  padding:11px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.057),rgba(255,255,255,.03));
  box-shadow:0 14px 32px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.025);
  opacity:0;
  pointer-events:none;
}
.workspace-demo__task-top { height:35px; display:flex; align-items:center; gap:8px; }
.workspace-demo__task-icon { width:30px; height:30px; border-radius:9px; flex:0 0 30px; display:grid; place-items:center; color:var(--auth-orange); background:rgba(255,87,28,.1); border:1px solid rgba(255,87,28,.11); }
.workspace-demo__task-icon svg { width:14px; height:14px; }
.workspace-demo__task-name { min-width:0; display:flex; flex-direction:column; gap:1px; }
.workspace-demo__task-name small { color:rgba(255,255,255,.25); font-size:5px; font-weight:800; letter-spacing:.11em; }
.workspace-demo__task-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.79); font-size:8px; font-weight:700; }
.workspace-demo__badge { margin-left:auto; height:19px; padding:0 7px; display:flex; align-items:center; border-radius:7px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,.42); font-size:5.5px; font-weight:800; transition:.4s var(--auth-ease); }
.workspace-demo[data-phase="working"] .workspace-demo__badge { color:#ffd1c1; background:rgba(255,87,28,.1); border-color:rgba(255,87,28,.16); }
.workspace-demo[data-phase="done"] .workspace-demo__badge { color:#a7e7c4; background:rgba(104,211,145,.09); border-color:rgba(104,211,145,.13); }
.workspace-demo__team,.workspace-demo__estimate,.workspace-demo__progress,.workspace-demo__result { transition:opacity .48s var(--auth-ease),transform .55s var(--auth-ease),filter .45s var(--auth-ease); }
.workspace-demo__team { height:40px; margin-top:9px; padding:0 8px; display:flex; align-items:center; border-radius:10px; background:rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.035); opacity:0; transform:translateY(7px); }
.workspace-demo__team>span { width:49px; color:rgba(255,255,255,.3); font-size:6px; font-weight:700; }
.workspace-demo__avatars { display:flex; padding-left:4px; }
.workspace-demo__avatars i,.workspace-demo__teamstack i { font-style:normal; display:grid; place-items:center; color:#fff; font-weight:800; border:1.5px solid #252622; }
.workspace-demo__avatars i { width:25px; height:25px; margin-left:-5px; border-radius:9px; font-size:6px; opacity:0; }
.workspace-demo__avatars i:nth-child(1),.workspace-demo__teamstack i:nth-child(1){ background:linear-gradient(145deg,#ff713e,#bc3c11); }
.workspace-demo__avatars i:nth-child(2),.workspace-demo__teamstack i:nth-child(2){ background:linear-gradient(145deg,#4a5d8b,#273044); }
.workspace-demo__avatars i:nth-child(3),.workspace-demo__teamstack i:nth-child(3){ background:linear-gradient(145deg,#50664f,#293729); }
.workspace-demo__avatars i.is-in { opacity:1; }
.workspace-demo__team>b { margin-left:auto; color:rgba(255,255,255,.38); font-size:5.5px; font-weight:700; }
.workspace-demo__estimate {
  position:absolute; left:11px; right:11px; bottom:10px; height:42px; padding:0 7px 0 10px; display:flex; align-items:center; gap:9px;
  border-radius:11px; background:rgba(255,255,255,.047); border:1px solid rgba(255,255,255,.055); opacity:0; transform:translateY(8px);
}
.workspace-demo__estimate>span { display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.42); font-size:6px; font-weight:700; }
.workspace-demo__estimate>span i { width:5px; height:5px; border-radius:50%; background:var(--auth-orange); box-shadow:0 0 0 4px rgba(255,87,28,.08); }
.workspace-demo__estimate strong { margin-left:auto; color:rgba(255,255,255,.76); font-size:8px; }
.workspace-demo__estimate em { color:rgba(255,255,255,.38); font-size:6px; font-style:normal; font-weight:700; }
.workspace-demo__estimate button { height:26px; padding:0 9px; border:0; border-radius:8px; background:#f1eee6; color:#181916; font-size:5.5px; font-weight:800; box-shadow:0 5px 12px rgba(0,0,0,.16); }
.workspace-demo__progress { position:absolute; left:11px; right:11px; bottom:13px; opacity:0; transform:translateY(8px); }
.workspace-demo__progress>div { margin-bottom:7px; display:flex; justify-content:space-between; color:rgba(255,255,255,.33); font-size:6px; font-weight:700; }
.workspace-demo__progress b { color:rgba(255,255,255,.7); }
.workspace-demo__progress>i { display:block; height:7px; padding:2px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.04); }
.workspace-demo__progress u { display:block; width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--auth-orange),#ff895f); box-shadow:0 0 10px rgba(255,87,28,.22); text-decoration:none; }
.workspace-demo__result { position:absolute; left:11px; right:11px; bottom:8px; min-height:48px; padding:7px 7px; display:flex; align-items:center; gap:8px; border-radius:11px; background:rgba(104,211,145,.055); border:1px solid rgba(104,211,145,.09); opacity:0; transform:translateY(8px); }
.workspace-demo__check { width:29px; height:29px; flex:0 0 29px; border-radius:10px; display:grid; place-items:center; color:#98e0b8; background:rgba(104,211,145,.1); }
.workspace-demo__check svg { width:15px; height:15px; }
.workspace-demo__result>div:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:2px; }
.workspace-demo__result small { color:rgba(152,224,184,.6); font-size:4.8px; font-weight:800; letter-spacing:.08em; }
.workspace-demo__result strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.73); font-size:6px; }
.workspace-demo__filechips { margin-left:auto; display:flex!important; flex-direction:row!important; gap:4px!important; }
.workspace-demo__filechips i { height:20px; padding:0 6px; display:flex; align-items:center; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.05); color:rgba(255,255,255,.42); font-size:4.8px; font-weight:700; font-style:normal; }
.workspace-demo__footer { margin-top:auto; min-height:27px; display:flex; align-items:flex-end; gap:7px; color:rgba(255,255,255,.24); font-size:5.5px; }
.workspace-demo__teamstack { display:flex; padding-left:3px; }
.workspace-demo__teamstack i { width:19px; height:19px; margin-left:-4px; border-radius:7px; font-size:4.7px; }
.workspace-demo__teamstack i:last-child { background:#32332f; color:rgba(255,255,255,.5); }
.workspace-demo__footer>span { margin-bottom:5px; white-space:nowrap; }
.workspace-demo__mini-status { margin-left:auto; margin-bottom:3px; height:20px; padding:0 7px; display:flex; align-items:center; gap:5px; border-radius:7px; background:rgba(255,255,255,.026); border:1px solid rgba(255,255,255,.04); color:rgba(255,255,255,.28); white-space:nowrap; }

.workspace-demo[data-phase="task"] .workspace-demo__composer,
.workspace-demo[data-phase="team"] .workspace-demo__composer,
.workspace-demo[data-phase="estimate"] .workspace-demo__composer,
.workspace-demo[data-phase="working"] .workspace-demo__composer,
.workspace-demo[data-phase="done"] .workspace-demo__composer { opacity:0; transform:translateY(-9px) scale(.97); filter:blur(5px); }
.workspace-demo[data-phase="task"] .workspace-demo__task,
.workspace-demo[data-phase="team"] .workspace-demo__task,
.workspace-demo[data-phase="estimate"] .workspace-demo__task,
.workspace-demo[data-phase="working"] .workspace-demo__task,
.workspace-demo[data-phase="done"] .workspace-demo__task { opacity:1; }
.workspace-demo[data-phase="team"] .workspace-demo__team,
.workspace-demo[data-phase="estimate"] .workspace-demo__team,
.workspace-demo[data-phase="working"] .workspace-demo__team,
.workspace-demo[data-phase="done"] .workspace-demo__team { opacity:1; transform:translateY(0); }
.workspace-demo[data-phase="estimate"] .workspace-demo__estimate { opacity:1; transform:translateY(0); }
.workspace-demo[data-phase="working"] .workspace-demo__progress { opacity:1; transform:translateY(0); }
.workspace-demo[data-phase="done"] .workspace-demo__result { opacity:1; transform:translateY(0); }

.auth-status-chip {
  z-index:8;
  top:auto;
  bottom:-5px;
  transform:translateX(-50%);
  background:rgba(19,20,18,.76);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

@keyframes workspace-breathe { 0%,100%{ transform:scale(.96); opacity:.5 } 50%{ transform:scale(1.06); opacity:.85 } }
@keyframes workspace-caret { 0%,46%{opacity:1} 47%,100%{opacity:.18} }

@media (max-width: 1220px) and (min-width: 981px) {
  .auth-visual { width:min(45vw,590px); height:410px; top:38%; }
  .workspace-demo { width:min(84%,485px); }
  .auth-role--1 { left:1%; }
  .auth-role--2 { right:-3%; }
  .auth-role--3 { left:-4%; }
  .auth-role--4 { right:-2%; }
}
@media (max-width: 980px) {
  .auth-stage { min-height:500px; }
  .auth-stage-copy { margin:300px 0 0; max-width:62%; }
  .auth-visual { width:520px; height:360px; left:auto; right:-95px; top:44%; transform:translateY(-50%); opacity:.88; }
  .workspace-demo { width:455px; }
  .auth-role--1,.auth-role--3 { left:-1%; }
  .auth-role--2,.auth-role--4 { right:-1%; }
}
@media (max-width: 620px) {
  .auth-stage { min-height:430px; }
  .auth-stage-copy { margin:260px 0 0; max-width:100%; }
  .auth-visual { width:410px; height:290px; right:-128px; top:38%; opacity:.61; }
  .workspace-demo { width:345px; }
  .workspace-demo__body { min-height:220px; grid-template-columns:37px 1fr; }
  .workspace-demo__main { padding:10px 10px 8px; }
  .workspace-demo__composer { left:10px;right:10px;top:52px; }
  .workspace-demo__task { left:10px;right:10px;top:48px; min-height:135px; }
  .workspace-demo__footer { display:none; }
  .workspace-demo__sidebar { padding-inline:5px; }
  .workspace-demo__sidebar button { width:25px;height:25px; }
  .auth-role { display:none; }
  .auth-status-chip { bottom:-2px; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-demo,.workspace-demo__glow,.workspace-demo__caret,.workspace-demo__composer,.workspace-demo__team,.workspace-demo__estimate,.workspace-demo__progress,.workspace-demo__result { animation:none!important; transition:none!important; }
}

/* MODERRNO Workspace demo v2.1 — larger, crisp and position-stable */
.workspace-demo {
  opacity: 1;
  transition: opacity .42s var(--auth-ease);
}
.workspace-demo.is-resetting { opacity: .18; }

@media (min-width: 1221px) {
  .auth-visual {
    width: min(49vw, 780px);
    top: 34%;
    display: grid;
    place-items: center;
  }

  .workspace-demo {
    position: relative;
    left: auto;
    top: auto;
    width: min(90%, 690px);
    transform: none !important;
    transform-style: flat;
    will-change: auto;
  }

  .workspace-demo__window {
    border-radius: 24px;
    backdrop-filter: blur(12px) saturate(1.06);
    -webkit-backdrop-filter: blur(12px) saturate(1.06);
  }
  .workspace-demo__topbar {
    height: 44px;
    padding: 0 14px 0 16px;
    grid-template-columns: 74px 1fr 74px;
  }
  .workspace-demo__traffic { gap: 6px; }
  .workspace-demo__traffic i { width: 7px; height: 7px; }
  .workspace-demo__title { gap: 8px; font-size: 9px; }
  .workspace-demo__mark { width: 19px; height: 19px; border-radius: 6px; font-size: 8px; }
  .workspace-demo__presence { gap: 5px; font-size: 7.5px; }
  .workspace-demo__presence i,.workspace-demo__online i,.workspace-demo__mini-status i { width: 5px; height: 5px; }

  .workspace-demo__body { min-height: 316px; grid-template-columns: 54px 1fr; }
  .workspace-demo__sidebar { padding: 14px 9px 11px; gap: 9px; }
  .workspace-demo__sidebar button { width: 35px; height: 35px; border-radius: 11px; }
  .workspace-demo__sidebar svg { width: 16px; height: 16px; }
  .workspace-demo__avatar { width: 31px; height: 31px; border-radius: 10px; font-size: 8px; }

  .workspace-demo__main { padding: 16px 18px 13px; }
  .workspace-demo__hello { gap: 14px; min-height: 36px; }
  .workspace-demo__hello>div:first-child { gap: 3px; }
  .workspace-demo__hello small { font-size: 6.8px; letter-spacing: .115em; }
  .workspace-demo__hello strong { font-size: 11.5px; }
  .workspace-demo__online { gap: 6px; height: 25px; padding: 0 9px; border-radius: 9px; font-size: 7.5px; }

  .workspace-demo__composer { left: 18px; right: 18px; top: 70px; }
  .workspace-demo__composer-label { margin-bottom: 9px; font-size: 9px; }
  .workspace-demo__input { height: 62px; padding: 0 58px 0 15px; border-radius: 16px; font-size: 11px; }
  .workspace-demo__input::before { left: 15px; right: 60px; bottom: 10px; }
  .workspace-demo__caret { height: 14px; }
  .workspace-demo__input button { right: 10px; width: 40px; height: 40px; border-radius: 12px; }
  .workspace-demo__input svg { width: 17px; height: 17px; }

  .workspace-demo__task { left: 18px; right: 18px; top: 64px; min-height: 196px; padding: 14px; border-radius: 18px; }
  .workspace-demo__task-top { height: 43px; gap: 10px; }
  .workspace-demo__task-icon { width: 37px; height: 37px; flex-basis: 37px; border-radius: 11px; }
  .workspace-demo__task-icon svg { width: 17px; height: 17px; }
  .workspace-demo__task-name { gap: 2px; }
  .workspace-demo__task-name small { font-size: 6.5px; }
  .workspace-demo__task-name strong { font-size: 10.5px; }
  .workspace-demo__badge { height: 24px; padding: 0 9px; border-radius: 8px; font-size: 7px; }

  .workspace-demo__team { height: 49px; margin-top: 11px; padding: 0 10px; border-radius: 12px; }
  .workspace-demo__team>span { width: 62px; font-size: 7.8px; }
  .workspace-demo__avatars { padding-left: 5px; }
  .workspace-demo__avatars i { width: 31px; height: 31px; margin-left: -6px; border-radius: 10px; font-size: 7.5px; }
  .workspace-demo__team>b { font-size: 7px; }

  .workspace-demo__estimate { left: 14px; right: 14px; bottom: 13px; height: 52px; padding: 0 9px 0 12px; gap: 11px; border-radius: 13px; }
  .workspace-demo__estimate>span { gap: 7px; font-size: 7.8px; }
  .workspace-demo__estimate>span i { width: 6px; height: 6px; }
  .workspace-demo__estimate strong { font-size: 10px; }
  .workspace-demo__estimate em { font-size: 7.5px; }
  .workspace-demo__estimate button { height: 33px; padding: 0 12px; border-radius: 10px; font-size: 7px; }

  .workspace-demo__progress { left: 14px; right: 14px; bottom: 17px; }
  .workspace-demo__progress>div { margin-bottom: 9px; font-size: 8px; }
  .workspace-demo__progress>i { height: 9px; padding: 2.5px; }

  .workspace-demo__result { left: 14px; right: 14px; bottom: 11px; min-height: 61px; padding: 9px; gap: 10px; border-radius: 13px; }
  .workspace-demo__check { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
  .workspace-demo__check svg { width: 18px; height: 18px; }
  .workspace-demo__result>div:nth-child(2) { gap: 3px; }
  .workspace-demo__result small { font-size: 6.3px; }
  .workspace-demo__result strong { font-size: 8.3px; }
  .workspace-demo__filechips { gap: 5px !important; }
  .workspace-demo__filechips i { height: 25px; padding: 0 8px; border-radius: 7px; font-size: 6.5px; }

  .workspace-demo__footer { min-height: 34px; gap: 9px; font-size: 7px; }
  .workspace-demo__teamstack { padding-left: 4px; }
  .workspace-demo__teamstack i { width: 24px; height: 24px; margin-left: -5px; border-radius: 8px; font-size: 6px; }
  .workspace-demo__footer>span { margin-bottom: 6px; }
  .workspace-demo__mini-status { margin-bottom: 4px; height: 25px; padding: 0 9px; gap: 6px; border-radius: 8px; }

  .auth-role { min-width: 128px; height: 42px; padding: 0 15px; border-radius: 13px; font-size: 11px; }
  .auth-role--1 { top: 1%; left: 2%; }
  .auth-role--2 { top: 4%; right: -1%; }
  .auth-role--3 { bottom: 1%; left: -1%; }
  .auth-role--4 { bottom: 4%; right: 0; }
  .auth-status-chip { bottom: -11px; }
}

@media (max-width: 1220px) and (min-width: 981px) {
  .auth-visual { width:min(48vw,640px); top:36%; display:grid; place-items:center; }
  .workspace-demo { position:relative; left:auto; top:auto; width:min(88%,545px); transform:none!important; transform-style:flat; will-change:auto; }
}

@media (min-width:1221px) {
  .auth-status-chip { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-demo { transition:none!important; }
}