/* Sign in / register — the fortax.in palette, on the app's own domain. Light or dark, as the visitor asks. */
:root {
  --bg: #F6F5F1; --bg-2: #EEEDE7; --surface: #FFFFFF; --surface-2: #FAFAF7;
  --ink: #0E1220; --ink-2: #3A4053; --muted: #6B7184;
  --line: rgba(14,18,32,.10); --line-2: rgba(14,18,32,.16);
  --royal: #3257E0; --royal-2: #2340B8; --royal-soft: rgba(50,87,224,.10);
  --danger: #D9344C; --seal: #15B877;
  --shadow-1: 0 1px 2px rgba(14,18,32,.04), 0 4px 16px rgba(14,18,32,.06);
  --shadow-2: 0 2px 6px rgba(14,18,32,.05), 0 18px 48px rgba(14,18,32,.10);
  --radius: 18px; --font: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #06070B; --bg-2: #0B0D14; --surface: #10131C; --surface-2: #0C0F17;
  --ink: #F1F3F9; --ink-2: #C2C7D6; --muted: #8A91A6;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --royal-soft: rgba(80,120,255,.16);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45);
  --shadow-2: 0 10px 40px rgba(0,0,0,.55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--royal); }

.auth { min-height: 100%; display: grid; grid-template-columns: 1.05fr 1fr; }

/* brand side */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the brand side: deep ink, slow light, and the drop that does the work */
.side { position: relative; overflow: hidden; padding: 44px 52px 40px; color: #fff; display: flex; flex-direction: column; gap: 22px;
  background: radial-gradient(120% 90% at 8% 0%, #1B2350 0%, #0D1230 46%, #070A1C 100%); }

.side .glow { position: absolute; inset: -20% -10%; pointer-events: none; filter: blur(46px); opacity: .85; }
.side .glow i { position: absolute; display: block; border-radius: 50%; }
.side .glow i:first-child { width: 58%; padding-top: 58%; left: -8%; top: 4%;
  background: radial-gradient(circle at 50% 50%, rgba(50,87,224,.72), rgba(50,87,224,0) 68%); animation: drift1 22s ease-in-out infinite; }
.side .glow i:last-child { width: 52%; padding-top: 52%; right: -6%; bottom: -4%;
  background: radial-gradient(circle at 50% 50%, rgba(120,88,255,.5), rgba(120,88,255,0) 68%); animation: drift2 27s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(7%,6%,0) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.06); } 50% { transform: translate3d(-8%,-5%,0) scale(.94); } }

.side .dots { position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size: 26px 26px;
  mask-image: radial-gradient(90% 70% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 40%, #000 0%, transparent 78%); }

.side > *:not(.glow):not(.dots) { position: relative; z-index: 1; }
.side .logo { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font-weight: 700; font-size: 25px; letter-spacing: -.02em; }
.side .drop { width: 34px; height: 34px; }

/* the mascot, breathing */
.side .stage { margin: 8px 0 4px; display: grid; gap: 20px; justify-items: center; text-align: center; }
.side .figure { position: relative; width: 168px; height: 182px; display: grid; place-items: center; }
.side .figure .big-drop { width: 150px; height: 150px; filter: drop-shadow(0 22px 40px rgba(20,40,140,.55)); animation: bob 6.5s ease-in-out infinite; }
.side .figure .big-drop .m-body { transform-origin: 50% 62%; animation: breathe 4.2s ease-in-out infinite; }
.side .figure .big-drop .m-eyes { transform-origin: 50% 52%; animation: blink 7.4s steps(1, end) infinite; }
.side .figure .shadow { position: absolute; bottom: 2px; width: 108px; height: 14px; border-radius: 50%;
  background: radial-gradient(50% 50%, rgba(0,0,0,.45), rgba(0,0,0,0) 70%); animation: shade 6.5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes blink { 0%,95%,100% { transform: scaleY(1); } 96.5%,98% { transform: scaleY(.08); } }
@keyframes shade { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(.82); opacity: .32; } }

.side .says .who { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(191,208,255,.82); }
.side .says .line { margin: 0 auto; max-width: 34ch; min-height: 3.2em; font: 600 clamp(18px, 1.5vw, 22px)/1.45 var(--font); letter-spacing: -.01em;
  color: #EAF0FF; transition: opacity .4s ease; }

.side .pts { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 15px; }
.side .pts li { display: grid; gap: 3px; padding-left: 16px; border-left: 2px solid rgba(140,170,255,.35); }
.side .pts b { font-size: 15px; }
.side .pts span { color: rgba(255,255,255,.7); font-size: 13.5px; line-height: 1.55; }
.side .fine { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.58); }

.side .fine a { color: rgba(255,255,255,.9); }

/* form side */
.panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 24px; }
.box { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-2); padding: 26px 28px 28px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg-2); border-radius: 14px; padding: 5px; margin-bottom: 20px; }
.tab { border: 0; background: transparent; color: var(--muted); font: 600 14px var(--font); padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.pane { display: none; }
.pane.on { display: block; }
.pane h2 { margin: 0 0 16px; font: 700 21px/1.25 var(--font); letter-spacing: -.02em; }
label { display: block; font-size: 12.5px; color: var(--muted); margin: 14px 0 6px; }
.box input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  width: 100%; padding: 12px 14px; font: 400 15px var(--font); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 13px; outline: none;
}
input:focus { border-color: var(--royal); box-shadow: 0 0 0 4px var(--royal-soft); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }
.pw { position: relative; }
.pw input { padding-right: 62px; }
.peek { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); font: 500 12px var(--font); cursor: pointer; padding: 6px 8px; }
.go { width: 100%; margin-top: 20px; padding: 13px 16px; border: 0; border-radius: 13px; background: var(--royal); color: #fff;
      font: 600 15px var(--font); cursor: pointer; transition: background .2s, opacity .2s; }
.go:hover { background: var(--royal-2); }
.go[disabled] { opacity: .45; cursor: not-allowed; }
.go.small { width: auto; margin: 0; padding: 9px 16px; font-size: 14px; }
.alt { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.link { border: 0; background: none; color: var(--royal); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.err { margin: 0 0 14px; padding: 11px 13px; border-radius: 12px; font-size: 14px; color: var(--ink);
       background: rgba(217,52,76,.08); border: 1px solid rgba(217,52,76,.35); }

.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role { display: block; margin: 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; background: var(--surface-2); }
.role.on { border-color: var(--royal); box-shadow: 0 0 0 4px var(--royal-soft); }
.role input { position: absolute; opacity: 0; pointer-events: none; }
.role b { display: block; font-size: 14.5px; color: var(--ink); }
.role span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.agree { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.ck { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.ck input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--royal); }
.ck input[disabled] { opacity: .5; }
.gate { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.gate.done { color: var(--seal); }
.foot { margin: 0; font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: center; }

/* the document sheet */
.sheet { position: fixed; inset: 0; background: rgba(6,7,11,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50; }
.sheet[hidden] { display: none; }
.sheet-box { width: min(760px, 100%); max-height: min(82vh, 760px); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; overflow: hidden; }
.sheet-box header, .sheet-box footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; }
.sheet-box header { border-bottom: 1px solid var(--line); }
.sheet-box footer { border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.sheet-box h3 { margin: 0; font: 700 17px var(--font); letter-spacing: -.01em; }
.x { border: 0; background: var(--bg-2); color: var(--ink-2); font: 500 13px var(--font); padding: 7px 12px; border-radius: 10px; cursor: pointer; }
.sheet-body { overflow: auto; padding: 4px 24px 24px; }
.sheet-body:focus { outline: none; }
.sheet-body h2 { font: 700 18px/1.3 var(--font); margin: 22px 0 8px; }
.sheet-body h3 { font: 600 15px/1.3 var(--font); margin: 16px 0 6px; }
.sheet-body p, .sheet-body li { color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.sheet-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0 18px; }
.sheet-body th, .sheet-body td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sheet-body th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.sheet-body .toc, .sheet-body blockquote { display: none; }
.sheet-body .updated { font-size: 12.5px; color: var(--muted); }
.loading { color: var(--muted); }

/* the light / dark switch: in the corner of the panel, clear of the card */
.panel { position: relative; }
.tsw { position: absolute; top: 22px; right: 26px; width: 38px; height: 38px; border-radius: 50%;
       border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
       display: grid; place-items: center; cursor: pointer; padding: 0;
       box-shadow: var(--shadow-1); transition: color .2s, border-color .2s, transform .2s; }
.tsw:hover { color: var(--royal); border-color: var(--royal); transform: translateY(-1px); }
.tsw svg { width: 19px; height: 19px; grid-area: 1 / 1; }
.tsw .tsw-moon { display: none; }
:root[data-theme="dark"] .tsw .tsw-sun { display: none; }
:root[data-theme="dark"] .tsw .tsw-moon { display: block; }

/* the consent step */
.agree { transition: border-color .25s, background .25s; }
.agree.ready { border-color: var(--seal); background: rgba(21,184,119,.06); }
.readbtn { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
           background: var(--surface); border: 1px dashed var(--royal); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.readbtn:hover { background: var(--royal-soft); }
.readbtn[hidden] { display: none; }
.rb-ico { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--royal); color: #fff;
          font: 600 13px/26px var(--font); text-align: center; }
.rb-txt { flex: 1; display: grid; gap: 2px; }
.rb-txt b { font-size: 14px; color: var(--ink); }
.rb-txt small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.rb-go { font: 600 13px var(--font); color: var(--royal); }
.ck { cursor: pointer; }
.agree.ready .ck input { accent-color: var(--seal); }
.sheet-box footer .go.small { min-width: 150px; }

/* Narrow screens, last so these win: the brand panel steps aside and the card takes the screen. */
@media (prefers-reduced-motion: reduce) {
  .side .glow i, .side .figure .big-drop, .side .figure .big-drop .m-body,
  .side .figure .big-drop .m-eyes, .side .figure .shadow { animation: none; }
}

@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }
  /* the panel becomes a slim brand bar: the drop still greets, the rest folds away */
  .side { padding: 30px 20px 26px; gap: 14px; text-align: center; align-items: center; }
  .side .dots, .side .pts, .side .fine { display: none; }
  .side .stage { margin: 0; gap: 12px; }
  .side .figure { width: 96px; height: 100px; }
  .side .figure .big-drop { width: 82px; height: 82px; }
  .side .figure .shadow { width: 62px; height: 9px; }
  .side .says .line { font-size: 15.5px; min-height: 3em; max-width: 30ch; }
  .panel { padding: 26px 16px 40px; justify-content: flex-start; }
  .box { border-radius: 22px; padding: 22px 20px 24px; }
  .tsw { position: fixed; top: 14px; right: 14px; z-index: 5; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
}

/* hiSAI wordmark on top of the card */
.brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 18px; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand span { font: 700 22px/1 var(--font); letter-spacing: -.02em; color: var(--ink); }
.brand small { font: 500 12px/1 var(--font); color: var(--muted); align-self: flex-end; margin-bottom: 3px; }

/* sign-in helpers: forgot password, "or", email link */
.forgot { margin: 8px 0 0; text-align: right; font-size: 13px; }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.go.ghost { margin-top: 12px; background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.go.ghost:hover { background: var(--surface-2); }
.pane .sub { margin: -6px 0 6px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.note { margin: 0 0 14px; padding: 11px 13px; border-radius: 12px; font-size: 14px; color: var(--ink);
        background: rgba(21,184,119,.09); border: 1px solid rgba(21,184,119,.35); }
@media (max-width: 380px) { .role { padding: 11px 11px; } .role span { font-size: 12px; } }