/* Teksura app — split-screen auth (login / register / forgot / set-password)
   Стиль вдохновлён Linear / Vercel / HubSpot / Retool: value слева, форма справа.
*/
:root{
  --bg:#faf7f0; --card:#fff; --ink:#0f172a; --muted:#5f6b7c; --muted2:#8b95a3;
  --line:#e6e2d6; --line2:#eeece1;
  --accent:#ffc94a; --accent-hover:#ffbf28; --accent-ink:#1a1a1a;
  --panel-bg:#0f172a; --panel-ink:#f8fafc;
  --ok:#12b76a; --warn:#f79009; --err:#e11d48;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.03);
  --shadow-lg: 0 24px 48px rgba(0,0,0,.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --radius: 12px; --radius-lg: 20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* Layout: split-screen */
.auth-layout{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
}
.auth-panel{
  background:var(--panel-bg);
  color:var(--panel-ink);
  padding:56px 56px 40px;
  display:flex; flex-direction:column;
  position:relative;
  overflow:hidden;
}
.auth-panel::before{
  content:""; position:absolute; top:-140px; right:-140px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(255,201,74,0.22), transparent 65%);
  pointer-events:none;
}
.auth-panel::after{
  content:""; position:absolute; bottom:-100px; left:-80px; width:340px; height:340px;
  background:radial-gradient(circle, rgba(120,161,255,0.18), transparent 65%);
  pointer-events:none;
}
.auth-form-wrap{
  padding:56px 56px 40px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}
@media (max-width:900px){
  .auth-layout{grid-template-columns:1fr}
  .auth-panel{padding:32px 24px 28px; order:2}
  .auth-form-wrap{padding:32px 20px; order:1; min-height:auto}
  .auth-panel::before,.auth-panel::after{display:none}
}

/* Brand + top-nav */
.auth-brand{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--panel-ink); font-family:var(--font-display); font-weight:800;
  font-size:20px; letter-spacing:-0.01em; position:relative; z-index:1;
}
.auth-brand img{height:32px; filter:brightness(0) invert(1)}
.auth-form-wrap .auth-brand{color:var(--ink)}
.auth-form-wrap .auth-brand img{filter:none}
.auth-topbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:36px; position:relative; z-index:1;
}
.auth-topbar__link{
  color:var(--muted); text-decoration:none; font-size:14px;
}
.auth-topbar__link b{color:var(--ink); font-weight:600}
.auth-topbar__link:hover b{color:var(--accent-hover)}

/* Left panel content */
.auth-panel__inner{position:relative; z-index:1; flex:1; display:flex; flex-direction:column; gap:32px}
.auth-panel h1{
  font-family:var(--font-display); font-weight:800;
  font-size:38px; line-height:1.15; letter-spacing:-0.02em; margin:0;
  max-width:520px;
}
.auth-panel h1 .hl{background:linear-gradient(180deg, transparent 60%, rgba(255,201,74,0.4) 60%); padding:0 4px}
.auth-panel .sub{color:rgba(248,250,252,0.78); font-size:16px; max-width:480px; margin:0}

/* Feature bullets */
.auth-features{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px}
.auth-features li{display:flex; gap:12px; align-items:flex-start; color:rgba(248,250,252,0.9); font-size:15px; line-height:1.5}
.auth-features li svg{flex:0 0 20px; width:20px; height:20px; color:var(--accent); margin-top:1px}

/* Testimonial */
.auth-quote{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:14px; padding:20px 22px;
  backdrop-filter:blur(8px);
}
.auth-quote__stars{color:var(--accent); letter-spacing:2px; font-size:14px; margin-bottom:8px}
.auth-quote__text{margin:0 0 12px; font-size:15px; line-height:1.55; color:rgba(248,250,252,0.92)}
.auth-quote__author{display:flex; align-items:center; gap:10px; color:rgba(248,250,252,0.7); font-size:13px}
.auth-quote__avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#ffc94a,#ff8a00); flex:0 0 32px; display:grid; place-items:center; font-weight:700; color:#1a1a1a; font-size:13px}

/* Trust logos */
.auth-trust{border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; margin-top:auto}
.auth-trust__label{color:rgba(248,250,252,0.55); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px}
.auth-trust__row{display:flex; gap:22px; align-items:center; flex-wrap:wrap; color:rgba(248,250,252,0.55); font-size:14px; font-weight:600}
.auth-trust__row span{opacity:0.8}

/* Form */
.auth-form{width:100%; max-width:400px}
.auth-form h2{font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-0.01em; margin:0 0 6px}
.auth-form .sub{color:var(--muted); font-size:14px; margin:0 0 28px}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:13px; font-weight:600; color:var(--ink)}
.field .required{color:var(--err); margin-left:2px}
.field input, .field select, .field textarea{
  font:inherit; padding:12px 14px; border-radius:var(--radius);
  border:1px solid var(--line); background:#fff; color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:#1a1a1a; box-shadow:0 0 0 3px rgba(255,201,74,0.35);
}
.field input:disabled{background:#f7f5f0; color:var(--muted); cursor:not-allowed}
.field-inline{display:flex; align-items:center; justify-content:space-between; margin:-6px 0 12px}
.field-inline label{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); cursor:pointer; font-weight:500}
.field-inline input[type="checkbox"]{width:16px; height:16px; accent-color:var(--accent)}
.field-inline a{font-size:13px; color:var(--ink); text-decoration:none; font-weight:600}
.field-inline a:hover{color:var(--accent-hover)}

/* Password field w/ eye toggle */
.field-password{position:relative}
.field-password input{padding-right:44px}
.field-password button.eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; padding:6px; color:var(--muted2); cursor:pointer; border-radius:6px;
}
.field-password button.eye:hover{background:#f5f2ea; color:var(--ink)}
.field-password button.eye svg{width:20px; height:20px; display:block}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--radius); border:0;
  font:inherit; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer;
  transition:transform .05s ease, background .15s, box-shadow .15s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent); color:var(--accent-ink)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--primary:disabled{background:#ecebe4; color:var(--muted2); cursor:wait}
.btn--ghost{background:#fff; border:1px solid var(--line); color:var(--ink)}
.btn--ghost:hover{background:#faf7f0; border-color:#d5d0bd}
.btn--wide{width:100%}
.btn--big{padding:14px 22px; font-size:15px}
.btn--link{background:transparent; border:0; color:var(--ink); padding:0; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.btn--link:hover{color:var(--accent-hover)}

/* SSO row (Google-like buttons, готовые заглушки) */
.auth-sso{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.btn-sso{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 16px; border-radius:var(--radius); border:1px solid var(--line);
  background:#fff; color:var(--ink); font-weight:600; font-size:14px;
  cursor:pointer; transition:background .15s, border-color .15s;
  text-decoration:none;
}
.btn-sso:hover{background:#faf7f0; border-color:#d5d0bd}
.btn-sso svg, .btn-sso img{width:18px; height:18px}

/* Divider «или» */
.auth-divider{
  display:flex; align-items:center; gap:12px;
  color:var(--muted2); font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
  margin:18px 0;
}
.auth-divider::before, .auth-divider::after{
  content:""; flex:1; height:1px; background:var(--line);
}

/* Bottom Bitrix24 shortcut */
.auth-bitrix-hint{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted); line-height:1.5;
}
.auth-bitrix-hint a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px dashed var(--muted2)}
.auth-bitrix-hint a:hover{color:var(--accent-hover); border-color:var(--accent-hover)}

/* Switch (login <-> register) */
.auth-switch{
  margin-top:22px; text-align:center; font-size:14px; color:var(--muted);
}
.auth-switch a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--accent)}
.auth-switch a:hover{color:var(--accent-hover)}

/* Notices */
.notice{
  padding:12px 14px; border-radius:var(--radius);
  background:#fff8dc; border:1px solid #f3d570; color:#3f2b00; font-size:13.5px;
  margin-bottom:14px; line-height:1.5;
}
.notice--ok{background:#e8f8ef; border-color:#98d3ae; color:#095b2f}
.notice--err{background:#fdecef; border-color:#f7a1af; color:#7a0b1e}
.notice a{color:inherit; text-decoration:underline}

/* Small legal at bottom */
.auth-legal{
  margin-top:20px; text-align:center;
  color:var(--muted2); font-size:12px; line-height:1.5;
}
.auth-legal a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}

/* CRM radio pills */
.crm-pills{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:6px}
.crm-pills label{
  display:flex; align-items:center; justify-content:center;
  padding:10px 8px; border:1.5px solid var(--line); border-radius:var(--radius);
  font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
  background:#fff; transition:border-color .15s, background .15s;
  text-align:center; user-select:none;
}
.crm-pills input{position:absolute; opacity:0; pointer-events:none}
.crm-pills label:hover{background:#faf7f0}
.crm-pills label:has(input:checked){border-color:#1a1a1a; background:#fff8dc}

/* Loader spinner */
.spin{
  display:inline-block; width:14px; height:14px; border:2px solid rgba(0,0,0,0.2);
  border-top-color:currentColor; border-radius:50%; animation:sp 0.7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}