:root {
  color-scheme: light;
  --navy: #0d2d62;
  --navy-deep: #08234e;
  --ink: #142f50;
  --muted: #687e98;
  --line: #d9e4f0;
  --blue: #2458ef;
  --cyan: #3ed3df;
  --page: #f3f6fb;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }

.app-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(300px, 20.5%) minmax(0, 1fr);
  background: var(--page);
}
.company-panel {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 34px clamp(28px, 3.2vw, 54px) 48px;
  color: #fff;
  background: linear-gradient(155deg, #123a78 0%, var(--navy) 55%, var(--navy-deep) 100%);
}
.panel-content { position: relative; z-index: 2; width: 100%; max-width: 410px; }
.site-domain-title {
  margin: 0 0 clamp(48px, 8vh, 78px);
  color: #fff;
  font-size: clamp(23px, 2.05vw, 31px);
  font-weight: 700;
  letter-spacing: -.035em;
}
.panel-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 19px; color: #78e4eb; font-size: 10px; font-weight: 850; letter-spacing: .11em; line-height: 1.5; text-transform: uppercase; }
.panel-eyebrow span { width: 21px; height: 2px; flex: 0 0 auto; background: var(--cyan); }
.company-panel h1 { max-width: 410px; margin: 0; color: #fff; font-size: clamp(36px, 3.35vw, 53px); font-weight: 760; letter-spacing: -.055em; line-height: 1.07; }
.company-panel h1 em { display: block; color: #72d9ec; font-style: normal; font-weight: 500; }
.panel-intro { max-width: 385px; margin: 22px 0 30px; color: #d2def0; font-size: 14px; line-height: 1.75; }
.project-status { position: relative; display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid rgba(204,225,255,.2); border-radius: 10px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.status-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(112,220,235,.33); border-radius: 9px; color: #7ee1e9; background: rgba(29,177,197,.12); }
.status-icon svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.project-status div:nth-child(2) { display: grid; gap: 4px; }
.project-status div:nth-child(2) span { color: #aebfd8; font-size: 10px; }
.project-status strong { color: #fff; font-size: 13px; }
.status-pulse { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(62,211,223,.13); }
.panel-rule { width: 52px; height: 1px; margin: 23px 0 14px; background: rgba(133,211,228,.6); }
.panel-caption { max-width: 300px; margin: 0; color: #aebfd8; font-size: 11px; line-height: 1.65; }
.panel-art { position: absolute; right: -7px; bottom: 0; width: 230px; height: 230px; opacity: .55; }
.art-ring { position: absolute; border: 1px solid rgba(121,207,231,.25); border-radius: 50%; }
.art-ring-one { right: -60px; bottom: 7px; width: 225px; height: 225px; }
.art-ring-two { right: -22px; bottom: 44px; width: 145px; height: 145px; }
.art-bar { position: absolute; bottom: 0; width: 19px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #20becb, #398be2); }
.art-bar-one { left: 16px; height: 45px; }
.art-bar-two { left: 47px; height: 68px; }
.art-bar-three { left: 78px; height: 53px; }
.art-bar-four { left: 123px; height: 61px; }

.main-column { min-width: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 76px minmax(490px, 1fr) auto; }
.site-header { position: sticky; z-index: 30; top: 0; min-width: 0; grid-row: 1; background: rgba(255,255,255,.98); border-bottom: 1px solid #e2e9f1; box-shadow: 0 3px 16px rgba(15,45,89,.045); backdrop-filter: blur(12px); }
.header-inner { width: calc(100% - 56px); min-height: 76px; margin: 0 auto; display: flex; align-items: center; gap: 15px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; width: 108px; height: auto; }
.header-divider { width: 1px; height: 30px; flex: 0 0 auto; background: #d8e2ec; }
.header-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #dfe8f2; border-radius: 7px; color: #506b87; font-size: 11px; font-weight: 700; white-space: nowrap; }
.header-status i, .footer-meta i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #21bd94; box-shadow: 0 0 0 3px rgba(33,189,148,.12); }
.header-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.header-domain { display: inline-flex; align-items: center; gap: 6px; color: #68809a; font-size: 11px; font-weight: 600; white-space: nowrap; }
.header-domain svg { width: 15px; height: 15px; fill: none; stroke: #00a4b8; stroke-width: 1.6; }
.version-badge { min-width: 39px; padding: 7px 8px; border: 1px solid #dbe5f0; border-radius: 6px; color: #4d6783; font-size: 10px; font-weight: 750; text-align: center; }

.main-content { min-width: 0; min-height: 0; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px clamp(28px, 5.2vw, 78px) 30px; background: radial-gradient(ellipse at 50% 42%, #fff 0, #f6f8fc 56%, #f0f4f9 100%); }
.login-card { width: min(100%, 478px); padding: 31px 32px 24px; border: 1px solid #dbe5ef; border-radius: 12px; background: #fff; box-shadow: 0 18px 52px rgba(19,47,83,.10); animation: card-arrive 3500ms cubic-bezier(.2,.72,.28,1) both; }
@keyframes card-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-eyebrow { margin: 0; color: #2458db; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.online-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 6px; color: #426957; background: #eaf8f2; font-size: 10px; font-weight: 700; white-space: nowrap; }
.online-badge i { width: 7px; height: 7px; border-radius: 50%; background: #26bf92; }
.login-card h2 { margin: 12px 0 0; color: #142f50; font-size: 25px; font-weight: 760; letter-spacing: -.04em; line-height: 1.2; }
.card-intro { margin: 8px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.55; }
#access-form { display: flex; flex-direction: column; }
#access-form > label, .label-row label { margin: 0 0 7px; color: #25415e; font-size: 12px; font-weight: 750; }
.input-wrap { min-height: 46px; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 11px; border: 1px solid #d7e2ef; border-radius: 7px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
.input-wrap:focus-within { border-color: #3976e9; box-shadow: 0 0 0 3px rgba(57,118,233,.12); }
.input-wrap > svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: #64809d; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.input-wrap input::placeholder { color: #9aaabd; }
.label-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 7px; }
.label-row label { margin: 0; }
.secure-note { display: inline-flex; align-items: center; gap: 5px; color: #8092a8; font-size: 9px; }
.secure-note svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.password-wrap { margin-bottom: 0; }
.password-toggle { width: 27px; height: 27px; flex: 0 0 auto; padding: 4px; border: 0; color: #607c98; background: transparent; cursor: pointer; }
.password-toggle svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.form-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; }
.remember-row { display: flex; align-items: center; gap: 8px; color: #617890; font-size: 11px; line-height: 1.4; cursor: pointer; }
.remember-row input { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; accent-color: #2458ef; cursor: pointer; }
.submit-button { width: 100%; min-height: 47px; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; border: 0; border-radius: 7px; color: #fff; background: linear-gradient(100deg, #1768e8, #294be9); box-shadow: 0 8px 18px rgba(37,83,221,.18); font-size: 13px; font-weight: 760; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.submit-button:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(37,83,221,.24); }
.submit-button:focus-visible, .password-toggle:focus-visible, .domain-disclosure:focus-visible { outline: 3px solid rgba(48,119,238,.34); outline-offset: 3px; }
.form-message { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 11px; padding: 10px 11px; border: 1px solid #c4d8f4; border-left: 3px solid #3976e9; border-radius: 7px; color: #355777; background: #f0f6ff; font-size: 11px; line-height: 1.5; }
.form-message[hidden] { display: none; }
.form-message p { margin: 0; }
.message-close { width: 23px; height: 23px; flex: 0 0 23px; margin: -3px -3px 0 0; padding: 0; border: 0; border-radius: 5px; color: #55718c; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
.message-close:hover { background: #dce9fa; }
.card-disclaimer { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5ebf2; }
.card-disclaimer svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: #7289a0; stroke-width: 1.7; stroke-linecap: round; }
.card-disclaimer p { margin: 0; color: #73869b; font-size: 11px; line-height: 1.5; }
.content-note { display: flex; align-items: center; gap: 8px; margin-top: 17px; color: #8292a5; font-size: 10px; text-align: center; }
.note-dot { width: 6px; height: 6px; border-radius: 50%; background: #29b5c7; }

.site-footer { min-width: 0; grid-row: 3; padding: 13px 24px 12px; border-top: 1px solid #e0e7ef; background: #fff; }
.footer-inner { width: min(100%, 1440px); margin: 0 auto; display: flex; align-items: center; gap: 18px; }
.footer-brand { display: grid; gap: 3px; }
.footer-brand strong { color: #294866; font-size: 10px; }
.footer-brand strong b { padding: 0 3px; color: #8aa0b7; }
.footer-brand span { color: #8798aa; font-size: 9px; }
.footer-meta { display: flex; align-items: center; gap: 15px; margin-left: auto; color: #6b8298; font-size: 9px; white-space: nowrap; }
.footer-meta span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.footer-meta i { width: 6px; height: 6px; }
.domain-disclosure { display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px; border: 0; border-radius: 5px; color: #496782; background: transparent; font-size: 10px; white-space: nowrap; cursor: pointer; }
.domain-disclosure:hover { background: #f1f5f9; }
.domain-disclosure svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s ease; }
.domain-disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }
.domain-identity { width: min(100%, 1440px); margin: 12px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 13px 15px; border: 1px solid #e1e9f1; border-radius: 7px; color: #58718a; background: #f8fafc; font-size: 10px; }
.domain-identity[hidden] { display: none; }
.domain-identity > p { margin: 0; line-height: 1.5; }
.domain-identity > p strong, .domain-owner strong { color: #294b6a; }
.domain-owner { display: grid; gap: 3px; text-align: right; }
.domain-owner span { color: #7c8fa2; font-size: 9px; }
.domain-owner strong { font-size: 10px; }
.copyright { width: min(100%, 1440px); margin: 9px auto 0; color: #98a6b4; font-size: 9px; }

@media (max-width: 1000px) and (min-width: 701px) {
  .app-shell { grid-template-columns: minmax(270px, 22%) minmax(0, 1fr); }
  .company-panel { padding-right: 25px; padding-left: 25px; }
  .header-inner { width: calc(100% - 34px); gap: 10px; }
  .brand img { width: 96px; }
  .header-status { padding: 7px 8px; font-size: 10px; }
  .header-tools { gap: 8px; }
  .main-content { padding-right: 24px; padding-left: 24px; }
  .login-card { padding-right: 25px; padding-left: 25px; }
  .footer-inner { gap: 10px; }
  .footer-meta { gap: 9px; font-size: 8px; }
  .domain-disclosure { padding-right: 3px; padding-left: 3px; font-size: 9px; }
}
@media (max-width: 700px) {
  body { padding-top: 66px; overflow-x: clip; }
  .app-shell { min-height: 0; display: flex; flex-direction: column; }
  .main-column { display: contents; }
  .site-header { position: fixed; top: 0; left: 0; right: 0; min-height: 66px; }
  .header-inner { width: calc(100% - 24px); min-height: 66px; gap: 7px; }
  .brand img { width: 82px; }
  .header-divider { height: 23px; }
  .header-status { gap: 5px; padding: 6px 7px; font-size: 8px; }
  .header-status i { width: 6px; height: 6px; }
  .header-tools { gap: 6px; }
  .header-domain { gap: 4px; font-size: 8px; }
  .header-domain svg { width: 12px; height: 12px; }
  .version-badge { min-width: 31px; padding: 6px 5px; font-size: 8px; }
  .main-content { order: 1; min-height: 0; align-items: stretch; justify-content: flex-start; padding: 22px 15px 23px; }
  .login-card { width: min(100%, 480px); align-self: center; padding: 26px 23px 21px; border-radius: 11px; }
  .login-card h2 { font-size: 23px; }
  .content-note { justify-content: center; margin: 13px auto 0; font-size: 9px; }
  .company-panel { order: 2; min-height: 0; padding: 28px 24px 42px; }
  .panel-content { max-width: 560px; }
  .site-domain-title { margin-bottom: 22px; font-size: 23px; }
  .company-panel h1 { max-width: 540px; font-size: clamp(30px, 8vw, 42px); }
  .panel-intro { margin: 15px 0 20px; font-size: 13px; }
  .project-status { max-width: 420px; padding: 12px; }
  .panel-rule, .panel-caption { display: none; }
  .panel-art { right: 0; width: 190px; height: 150px; opacity: .38; }
  .art-ring-one { width: 160px; height: 160px; }
  .art-ring-two { width: 100px; height: 100px; }
  .art-bar { width: 14px; }
  .art-bar-one { height: 29px; }
  .art-bar-two { height: 43px; }
  .art-bar-three { height: 34px; }
  .art-bar-four { height: 39px; }
  .site-footer { order: 3; padding: 13px 15px 12px; }
  .footer-inner { flex-wrap: wrap; gap: 9px 12px; }
  .footer-brand { flex: 1 1 130px; }
  .footer-meta { order: 2; flex: 1 1 auto; margin-left: 0; gap: 12px; font-size: 8px; }
  .domain-disclosure { order: 3; margin-left: auto; padding-right: 0; font-size: 9px; }
  .domain-identity { align-items: flex-start; flex-direction: column; gap: 9px; }
  .domain-owner { text-align: left; }
}
@media (max-width: 380px) {
  .header-inner { width: calc(100% - 16px); gap: 5px; }
  .brand img { width: 72px; }
  .header-status { padding: 5px; font-size: 7px; }
  .header-tools { gap: 4px; }
  .header-domain { font-size: 7px; }
  .version-badge { min-width: 28px; padding: 5px 3px; }
  .main-content { padding-right: 11px; padding-left: 11px; }
  .login-card { padding-right: 17px; padding-left: 17px; }
  .secure-note { font-size: 8px; }
  .remember-row { font-size: 10px; }
  .footer-meta { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .login-card { animation: none; }
}