/* Buddy System UrFU / Auth v0.6 — self-contained UI layer.
   All selectors are auth-prefixed so the rest of the app is untouched. */
:root {
  --auth-ink: #17284c;
  --auth-deep: #233d87;
  --auth-blue: #2656b3;
  --auth-blue-hover: #1c479e;
  --auth-muted: #66748a;
  --auth-border: #d9e2ee;
  --auth-bg: #f4f7fb;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--auth-ink);
  background: #fff;
}

/* Brand wing */
.auth-brand-pane {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-width: 0;
  overflow: hidden;
  padding: clamp(32px, 4.35vw, 76px) clamp(35px, 5vw, 90px) 30px;
  background: #f0f5fc;
  border-right: 1px solid #e2eaf6;
}
.auth-brand-pane::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 770px;
  height: 770px;
  left: -400px;
  bottom: -485px;
  border: 1px solid rgba(67, 103, 173, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 75px rgba(113, 147, 212, .025), 0 0 0 165px rgba(113, 147, 212, .022);
  pointer-events: none;
}
.auth-brand-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.auth-logo-img {
  display: block;
  width: clamp(150px, 15vw, 218px);
  height: auto;
  object-fit: contain;
}
.auth-mark-holder { min-height: 100px; }
.auth-image-fallback { display: none; color: #244797; font-size: 25px; font-weight: 800; letter-spacing: -.05em; }
.auth-image-holder.has-broken-image img, .auth-mobile-brand.has-broken-image img { display: none; }
.auth-image-holder.has-broken-image .auth-image-fallback, .auth-mobile-brand.has-broken-image .auth-image-fallback { display: block; }
.auth-brand-kicker {
  margin-top: 2px;
  color: #6d7b96;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .19em;
}
.auth-brand-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: clamp(18px, 4vh, 42px) 0 38px;
}
.auth-brand-main h2 {
  margin: 0;
  font-size: clamp(37px, 3.1vw, 56px);
  line-height: 1.125;
  letter-spacing: -.05em;
  font-weight: 780;
  max-width: 640px;
  text-wrap: balance;
}
.auth-brand-main h2 em { color: var(--auth-blue); font-style: normal; }
.auth-brand-main > p {
  max-width: 560px;
  margin: 23px 0 30px;
  color: #596b85;
  font-size: clamp(14px, 1.08vw, 16px);
  line-height: 1.75;
  text-wrap: pretty;
}
.auth-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 550px);
  min-height: 215px;
  overflow: hidden;
  padding: 28px 38px 20px;
  background: rgba(255,255,255,.88);
  border: 1px solid #dce7f6;
  border-radius: 24px;
  box-shadow: 0 26px 56px -35px rgba(30,62,129,.27), 0 2px 4px rgba(40,75,137,.035);
}
.auth-visual::after {
  content: '';
  width: 340px;
  height: 340px;
  position: absolute;
  right: -220px;
  top: -240px;
  border-radius: 50%;
  background: #e4edfc;
  pointer-events: none;
}
.auth-visual-corner {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 24px;
  height: 24px;
  border-left: 2px solid #8db0e9;
  border-top: 2px solid #8db0e9;
  opacity: .65;
}
.auth-symbol-holder {
  display: grid;
  place-items: center;
  width: min(100%, 360px);
  margin: 8px auto 8px;
  position: relative;
  z-index: 1;
}
.auth-symbol-img { width: 100%; max-height: 165px; object-fit: contain; }
.auth-symbol-holder .auth-image-fallback { font-size: 21px; text-align: center; }
.auth-visual-bottom {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8292ae;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
}
.auth-visual-rule { width: 18px; height: 1px; background: #a4b8d9; }
.auth-brand-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #8995a8;
  font-size: 11px;
  letter-spacing: .025em;
  font-weight: 600;
}
.auth-brand-separator { width: 3px; height: 3px; background: #91a0ba; border-radius: 50%; }

/* Form wing */
.auth-right-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: 60px clamp(28px, 5vw, 100px) 42px;
  background: #fff;
}
.auth-panel {
  width: 100%;
  max-width: 420px;
  margin: auto 0;
  animation: auth-appear .32s ease-out both;
}
.auth-section-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6980a6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  margin: 0 0 17px;
}
.auth-section-dot { width: 7px; height: 7px; border-radius: 50%; background: #3472d3; box-shadow: 0 0 0 4px #edf4ff; }
.auth-panel h1 {
  margin: 0;
  color: #132343;
  font-size: clamp(30px, 2.45vw, 39px);
  line-height: 1.18;
  letter-spacing: -.048em;
  font-weight: 770;
}
.auth-subtitle {
  margin: 12px 0 0;
  color: #6a778b;
  font-size: 14px;
  line-height: 1.6;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 4px;
  margin: 32px 0 31px;
  padding: 5px;
  border-radius: 13px;
  background: #eef2f7;
  border: 1px solid #e8edf4;
}
.auth-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  background: transparent;
  color: #69758b;
  font-size: 13px;
  font-weight: 670;
  transition: background-color .17s ease, color .17s ease, box-shadow .17s ease;
}
.auth-tabs button:hover { color: #254c9e; }
.auth-tabs button[aria-selected="true"] {
  background: #fff;
  color: #1d3e81;
  box-shadow: 0 1px 4px rgba(33,59,107,.1);
}
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-field { display: flex; flex-direction: column; gap: 8px; }
.auth-field label {
  font-size: 13px;
  font-weight: 720;
  color: #2f3e59;
}
.auth-input-wrap { display: flex; position: relative; }
.auth-input-wrap input {
  width: 100%;
  min-height: 54px;
  border: 1px solid #d5e0ec;
  border-radius: 12px;
  background: #fbfcfe;
  padding: 0 16px;
  color: #182b4c;
  font-size: 15px;
  outline: none;
  transition: border-color .17s ease, background-color .17s ease, box-shadow .17s ease;
}
.auth-input-wrap input[type="password"] { padding-right: 60px; }
.auth-input-wrap input::-ms-reveal, .auth-input-wrap input::-ms-clear { display: none; }
.auth-input-wrap input:not([type="password"]):has(+.auth-password-toggle) { padding-right: 60px; }
.auth-input-wrap input::placeholder { color: #9ca9bb; }
.auth-input-wrap input:hover { border-color: #b5c8df; }
.auth-input-wrap input:focus {
  background: #fff;
  border-color: #3a71cd;
  box-shadow: 0 0 0 4px rgba(60,116,207,.115);
}
.auth-input-wrap input[aria-invalid="true"] { border-color: #c34a5a; background: #fff9f9; }
.auth-input-wrap input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(195,74,90,.1); }
.auth-input-wrap input:disabled { color: #7b8799; background: #f1f4f8; }
.auth-hint { display: none; font-size: 12px; color: #b33044; line-height: 1.45; }
.auth-hint:not(:empty) { display: block; }
.auth-password-toggle {
  position: absolute;
  right: 7px; top: 7px;
  display: grid; place-items: center;
  width: 41px; height: 40px;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #7888a2;
  transition: background .16s ease, color .16s ease;
}
.auth-password-toggle:hover { background: #edf2fa; color: #2854a8; }
.auth-password-toggle svg { width: 20px; height: 20px; }
.auth-feedback {
  display: none;
  padding: 12px 14px;
  border-radius: 11px;
  color: #a73549;
  font-size: 13px;
  font-weight: 540;
  line-height: 1.55;
  background: #fff1f2;
  border: 1px solid #f2d6dc;
}
.auth-feedback.is-visible { display: block; }
.auth-feedback.is-success { background: #ebf8f1; border-color: #c9ecda; color: #1b7455; }
.auth-feedback.is-info { background: #edf4ff; border-color: #d2e1fc; color: #2953a1; }
.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  margin-top: 4px;
  border: 1px solid #2355b3;
  border-radius: 12px;
  background: #2555b2;
  color: white;
  box-shadow: 0 6px 14px rgba(38,82,165,.13);
  font-size: 15px;
  font-weight: 770;
  transition: background-color .18s ease, transform .16s ease, box-shadow .16s ease;
}
.auth-submit:not(:disabled):hover { background: #1c499f; box-shadow: 0 9px 16px rgba(38,82,165,.21); transform: translateY(-1px); }
.auth-submit:not(:disabled):active { transform: translateY(0); }
.auth-submit:disabled { cursor: wait; opacity: .73; transform: none; }
.auth-submit-arrow { position: absolute; right: 18px; font-size: 21px; font-weight: 400; }
.auth-spinner { width: 16px; height: 16px; border: 2px solid #c9d8fa; border-top-color: #fff; border-radius: 50%; animation: auth-spin .7s linear infinite; }
.auth-form-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #edf0f4;
}
.auth-secure-sign { display: flex; align-items: center; gap: 7px; color: #8a98ab; font-size: 12px; }
.auth-secure-sign .icon { width: 14px; height: 14px; }
.auth-bottom-note {
  margin-top: 35px;
  color: #a1acbc;
  font-size: 11px;
  letter-spacing: .02em;
  text-align: center;
}
.auth-bottom-note span { margin: 0 6px; }
.auth-mobile-brand { display: none; }

@keyframes auth-appear { from { opacity: .4; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-spin { to { transform: rotate(360deg); } }

@media (min-width: 1480px) {
  .auth-brand-main { padding-top: 24px; }
  .auth-visual { min-height: 248px; }
  .auth-symbol-img { max-height: 185px; }
}
@media (max-width: 1180px) {
  .auth-layout { grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); }
  .auth-brand-pane { padding: 32px 35px 24px; }
  .auth-brand-main h2 { font-size: 36px; }
  .auth-brand-main > p { font-size: 14px; }
  .auth-visual { padding: 22px 25px; }
  .auth-right-pane { padding: 42px 34px 28px; }
}
@media (max-width: 850px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); background: #f8fafe; }
  .auth-brand-pane { display: none; }
  .auth-right-pane {
    min-height: 100dvh;
    padding: 22px 24px 28px;
    justify-content: flex-start;
    background: #f8fafe;
  }
  .auth-mobile-brand {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-self: center;
    width: min(100%, 430px);
    margin: 0 0 22px;
    min-height: 72px;
  }
  .auth-mobile-brand img { width: 135px; height: auto; }
  .auth-mobile-brand .auth-image-fallback { font-size: 19px; }
  .auth-panel {
    max-width: 430px;
    background: #fff;
    padding: 29px 25px 25px;
    border: 1px solid #e3eaf4;
    border-radius: 22px;
    box-shadow: 0 14px 42px rgba(31,69,138,.06);
    margin: 0;
  }
  .auth-panel h1 { font-size: 29px; }
  .auth-tabs { margin-top: 26px; }
  .auth-bottom-note { margin-top: 23px; }
}
@media (max-width: 520px) {
  .auth-right-pane { padding: 15px 15px 27px; }
  .auth-mobile-brand { min-height: 66px; margin-bottom: 15px; }
  .auth-mobile-brand img { width: 122px; }
  .auth-panel { padding: 26px 19px 21px; border-radius: 20px; }
  .auth-panel h1 { font-size: 27px; }
  .auth-subtitle { font-size: 13px; }
  .auth-tabs { grid-template-columns: 1fr 1.65fr; gap: 2px; }
  .auth-tabs button { font-size: 12px; padding: 7px 4px; }
  .auth-input-wrap input { min-height: 52px; font-size: 16px; }
  .auth-field { gap: 7px; }
  .auth-form { gap: 16px; }
  .auth-submit { min-height: 52px; }
}
@media (max-width: 355px) {
  .auth-right-pane { padding: 9px 10px 20px; }
  .auth-panel { padding: 22px 14px 20px; }
  .auth-tabs button { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-panel, .auth-spinner { animation: none; }
  .auth-submit, .auth-tabs button, .auth-input-wrap input { transition: none; }
}


/* v0.6.1 auth cleanup */
.auth-brand-kicker,.auth-brand-bottom,.auth-section-kicker,.auth-form-footer,.auth-bottom-note{display:none !important;}
.auth-brand-pane{justify-content:flex-start;padding-bottom:42px;background:linear-gradient(180deg,#edf2f9 0%,#f4f7fb 100%);}
.auth-brand-main--visual{padding:24px 0 0;justify-content:flex-start;align-items:center;}
.auth-hero-visual{width:min(100%,780px);margin:12px auto 0;display:flex;align-items:center;justify-content:center;}
.auth-hero-image{display:block;width:100%;height:auto;object-fit:contain;filter:none;}
.auth-hero-visual.has-broken-image .auth-hero-image{display:none;}
.auth-hero-visual .auth-image-fallback{display:none;font-size:24px;font-weight:800;color:#244797;text-align:center;}
.auth-hero-visual.has-broken-image .auth-image-fallback{display:block;}
.auth-mobile-brand{margin-bottom:18px;}
.auth-mobile-brand img{width:166px;height:auto;display:block;}
.auth-panel{max-width:470px;}
.auth-subtitle{margin:14px 0 0;}

@media (min-width: 901px){
  .auth-brand-pane{padding-top:46px;}
  .auth-brand-head{margin-bottom:10px;}
  .auth-brand-main--visual{min-height:0;flex:1;}
}
@media (max-width: 900px){
  .auth-brand-pane{display:none;}
  .auth-right-pane{padding-top:42px;}
  .auth-mobile-brand{display:flex;justify-content:center;width:100%;}
}


/* v0.6.2 — integrated identity background; no nested hero card */
.auth-brand-pane--integrated {
  background-color:#f1f5fc;
  background-image:url('/assets/auth-hero-integrated.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  border-right:1px solid #e3eaf6;
  padding:0;
}
.auth-brand-pane--integrated::before { content:none; }
@media(max-width:1120px){
  .auth-layout{grid-template-columns: minmax(0,1fr);}
  .auth-brand-pane--integrated{display:none;}
  .auth-right-pane{min-height:100dvh;padding:32px 24px;}
  .auth-mobile-brand{display:flex;align-items:center;justify-content:center;width:min(100%,430px);margin:0 0 22px;}
  .auth-panel{margin:0 auto;}
}