:root {
  --red:#c9152c;
  --red-dark:#ad1930;
  --paper:#f5f3ef;
  --ink:#252525;
  --muted:#74716d;
  --line:#e2ded7;
  --blue:#1975a0;
  --green:#42b48d;
  --green-ink:#237557;
  --pale-blue:#eef6f9;
  --pale-green:#eef8f4;
  font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--ink);
  background:#fff;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:wait;
  opacity:.55
}

a {
  color:inherit
}

button:focus-visible,a:focus-visible {
  outline:3px solid #bd6575;
  outline-offset:4px
}

input:focus,select:focus,textarea:focus {
  outline:none;
  border-color:#bd6575;
  box-shadow:0 0 0 3px #c9152c12
}

button {
  border:0;
  background:none
}

.red {
  color:var(--red)
}

.muted-copy {
  color:var(--muted);
  font-size:13px
}

.eyebrow {
  font-size:11px;
  letter-spacing:1.8px;
  font-weight:650
}

.brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
  text-decoration:none
}

.brand img {
  width:116px;
  height:auto;
  display:block
}

.brand span {
  font-size:14px;
  letter-spacing:2px;
  font-weight:600
}

.text-button {
  color:var(--muted);
  padding:4px 0;
  font-size:12px
}

.text-button:hover {
  color:var(--red)
}

[hidden] {
  display:none!important
}

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

.login-view {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  min-height:100dvh
}

.login-story {
  padding:56px 8%;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  position:relative;
  border-right:1px solid var(--line)
}

.story-content {
  margin:auto 0;
  padding:70px 0
}

.story-content .eyebrow {
  color:var(--blue);
  margin-bottom:26px
}

.story-content h1 {
  font-size:clamp(30px,3.1vw,47px);
  line-height:1.6;
  letter-spacing:-1.5px;
  font-weight:650;
  margin:0 0 24px;
  white-space:nowrap
}

.story-description {
  font-size:14px;
  line-height:2;
  color:var(--muted)
}

.flow-illustration {
  max-width:335px;
  margin-top:42px
}

.flow-node {
  display:flex;
  align-items:center;
  gap:20px;
  border:1px solid #d8dedb;
  background:#fff;
  padding:15px 20px;
  font-size:13px
}

.node-index {
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}

.node-check {
  margin-left:auto;
  color:var(--green-ink)
}

.flow-node.current {
  border-color:#42b48d;
  background:var(--pale-green)
}

.flow-node.current .node-index {
  color:var(--green-ink)
}

.flow-node.muted {
  background:transparent;
  color:#999;
  border-color:var(--line)
}

.flow-node.muted>span:last-child {
  margin-left:auto
}

.node-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px #42b48d20;
  margin-left:auto
}

.flow-line {
  height:16px;
  margin-left:33px;
  border-left:1px solid #b9c9c2
}

.story-footer {
  font-size:10px;
  letter-spacing:1px;
  color:#8f8a83;
  display:flex;
  justify-content:space-between;
  margin:0
}

.login-panel {
  padding:60px 45px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}

.login-card {
  width:100%;
  max-width:405px;
  border-top:4px solid var(--red);
  padding-top:34px
}

.login-card h2 {
  font-size:28px;
  font-weight:600;
  letter-spacing:-.7px;
  margin:14px 0 10px
}

.login-card>.muted-copy {
  margin:0 0 34px;
  font-size:14px
}

.login-card label {
  display:block;
  font-size:13px;
  font-weight:550;
  margin-bottom:10px
}

.login-card input,.login-card select {
  width:100%;
  height:49px;
  padding:0 14px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:5px;
  margin-bottom:24px;
  font-size:14px
}

.login-card input::placeholder {
  color:#aba7a2
}

.password-label {
  display:flex;
  justify-content:space-between;
  align-items:baseline
}

.password-label .text-button {
  font-size:11px
}

.login-card select {
  color:var(--blue);
  background:#fafcfd;
  margin-bottom:7px
}

.field-note {
  font-size:11px;
  color:var(--muted);
  margin:0 0 24px;
  line-height:1.6
}

.primary-button {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  height:50px;
  color:#fff;
  background:var(--red-dark);
  padding:0 18px;
  border-radius:5px;
  font-size:14px;
  font-weight:550
}

.primary-button:hover {
  background:#951428
}

.primary-button>span:last-child {
  font-size:21px
}

.login-trust {
  margin-top:25px;
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:var(--muted)
}

.login-trust p {
  margin:0;
  font-size:11px;
  line-height:1.9
}

.lock-icon {
  font-size:21px;
  color:var(--blue);
  line-height:1
}

.login-caption {
  margin-top:45px;
  font-size:10px;
  color:#aaa6a0;
  letter-spacing:.8px
}

.error-message {
  color:#a11d2d;
  background:#fcf0f1;
  border:1px solid #f2d9dd;
  padding:12px 14px;
  font-size:13px;
  line-height:1.7;
  border-radius:5px;
  margin:0 0 20px
}

.workspace {
  display:grid;
  grid-template-columns:242px minmax(0,1fr);
  min-height:100dvh
}

.sidebar {
  border-right:1px solid var(--line);
  background:#faf9f7;
  padding:33px 22px 20px;
  display:flex;
  flex-direction:column;
  position:fixed;
  width:242px;
  height:100dvh
}

.sidebar .brand {
  padding:0 12px;
  gap:14px
}

.sidebar .brand img {
  width:110px
}

.sidebar .brand span {
  font-size:13px
}

.new-chat {
  margin:43px 0 30px;
  border:1px solid #c9c4bc;
  border-radius:5px;
  display:flex;
  align-items:center;
  gap:18px;
  height:46px;
  text-align:left;
  padding:0 15px;
  font-size:13px;
  background:#fff
}

.new-chat:hover {
  border-color:var(--red);
  color:var(--red)
}

.new-chat>span {
  font-size:21px;
  line-height:1
}

.nav-caption {
  font-size:10px;
  color:#9a958e;
  letter-spacing:1px;
  margin:0 12px 13px
}

.nav-item {
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 12px;
  font-size:12px;
  text-align:left;
  border-radius:4px;
  margin-bottom:4px;
  color:#706b64
}

.nav-item>span:first-child {
  font-size:17px;
  width:20px;
  color:#8b979d
}

.nav-item.active {
  background:var(--pale-blue);
  color:var(--blue);
  font-weight:550
}

.nav-item:hover {
  background:#eeeae4
}

.nav-arrow {
  margin-left:auto;
  font-size:14px;
  color:var(--blue)
}

.sidebar-note {
  display:flex;
  gap:10px;
  border-top:1px solid var(--line);
  margin-top:35px;
  padding:21px 12px;
  color:#9a958e
}

.sidebar-note p {
  font-size:11px;
  line-height:1.85;
  margin:0
}

.note-symbol {
  border:1px solid #a7aaa8;
  border-radius:50%;
  font-size:10px;
  width:14px;
  height:14px;
  display:grid;
  place-content:center;
  margin-top:3px;
  flex:none
}

.sidebar-bottom {
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:var(--muted);
  padding:0 12px
}

.version {
  margin-left:auto;
  letter-spacing:1px;
  font-size:9px
}

.green-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  flex:none
}

.main {
  grid-column:2;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100dvh
}

.workspace-header {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:0 38px;
  gap:20px
}

.header-title {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:12px
}

.header-mark {
  width:5px;
  height:17px;
  background:var(--red);
  display:block
}

.header-account {
  display:flex;
  align-items:center;
  gap:19px
}

.environment-badge {
  font-size:10px;
  padding:6px 10px;
  border:1px solid #c9e0e9;
  background:var(--pale-blue);
  color:var(--blue);
  border-radius:3px;
  white-space:nowrap
}

.environment-badge.production {
  color:var(--red-dark);
  border-color:#ead1d5;
  background:#fcf1f3
}

.identity {
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:11px;
  text-align:right
}

.identity strong {
  font-weight:550
}

.identity>span {
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted)
}

.preview-badge {
  font-size:9px;
  background:#fff6dc;
  color:#967024;
  border:1px solid #eddfb6;
  padding:4px 7px;
  white-space:nowrap
}

.content {
  overflow:auto;
  padding:0 46px;
  flex:1;
  scroll-behavior:smooth
}

.welcome {
  max-width:960px;
  margin:0 auto;
  padding-top:65px;
  display:grid;
  grid-template-columns:1fr 215px
}

.welcome-heading>.eyebrow {
  font-size:10px;
  color:#8e8780;
  margin:0 0 22px;
  letter-spacing:1.5px
}

.welcome h1 {
  font-size:clamp(33px,3.3vw,50px);
  font-weight:600;
  line-height:1.44;
  letter-spacing:-1.5px;
  margin:0
}

.welcome-description {
  font-size:13px;
  line-height:1.9;
  color:#8a847c;
  margin-top:23px
}

.mobile-break {
  display:none
}

.workflow-emblem {
  margin-top:30px;
  align-self:center;
  padding:24px 20px;
  border-top:2px solid #303735;
  background:var(--paper);
  transform:rotate(-3deg)
}

.emblem-top {
  display:flex;
  justify-content:space-between;
  font-size:26px;
  font-weight:550;
  letter-spacing:-1px
}

.emblem-top>span:last-child {
  color:var(--blue);
  font-size:23px
}

.emblem-track {
  display:flex;
  align-items:center;
  margin:26px 0
}

.emblem-track>span {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border:1px solid #cfcac2;
  border-radius:50%;
  font-size:10px;
  color:#aaa
}

.emblem-track>span.completed {
  border:1px solid #8ecfb8;
  color:var(--green-ink);
  background:#fff
}

.emblem-track>span.current {
  background:var(--green);
  border-color:var(--green);
  color:white;
  box-shadow:0 0 0 5px #42b48d14
}

.emblem-track>i {
  height:1px;
  background:#cbd9d3;
  flex:1
}

.workflow-emblem>p {
  font-size:9px;
  color:#8b867e;
  margin:0;
  letter-spacing:.4px
}

.context-bar {
  grid-column:1/-1;
  border-top:1px solid #35322f;
  border-bottom:1px solid var(--line);
  padding:17px 0;
  margin:39px 0 30px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:10px
}

.context-bar>div {
  display:flex;
  align-items:center;
  gap:9px
}

.context-bar .text-button {
  font-size:10px;
  margin-left:8px
}

.context-bar>div:last-child {
  color:var(--muted)
}

.context-icon {
  color:var(--blue);
  font-size:13px
}

.prompt-heading {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  margin-bottom:15px
}

.prompt-heading .muted-copy {
  font-size:10px
}

.prompt-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-column:1/-1;
  gap:13px;
  padding-bottom:30px
}

.prompt-card {
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
  padding:20px;
  text-align:left;
  position:relative;
  transition:border-color .15s,transform .15s
}

.prompt-card:hover {
  border-color:var(--blue);
  transform:translateY(-2px)
}

.prompt-number {
  font-size:9px;
  letter-spacing:.8px;
  color:#999187;
  display:block;
  margin-bottom:15px
}

.prompt-card strong {
  font-size:14px;
  font-weight:500;
  line-height:1.8
}

.prompt-arrow {
  position:absolute;
  bottom:19px;
  right:19px;
  color:var(--blue);
  font-size:19px
}

.composer-area {
  background:#fff;
  padding:18px 46px 19px
}

.composer {
  max-width:960px;
  margin:0 auto;
  border:1px solid #cfcac2;
  box-shadow:0 4px 20px #25252506;
  border-radius:8px;
  display:flex;
  align-items:flex-end;
  padding:14px 15px 14px 20px;
  gap:15px;
  background:#fff
}

.composer:focus-within {
  border-color:#b58f95;
  box-shadow:0 0 0 2px #c9152c06
}

.composer textarea {
  resize:none;
  border:0;
  box-shadow:none;
  width:100%;
  max-height:140px;
  padding:8px 0;
  background:transparent;
  font-size:13px;
  line-height:1.7;
  color:var(--ink)
}

.composer textarea::placeholder {
  color:#a5a098
}

.composer textarea:focus {
  box-shadow:none
}

.send-button {
  width:37px;
  height:37px;
  border-radius:5px;
  background:var(--red);
  color:white;
  display:grid;
  place-items:center;
  flex:none
}

.send-button:hover {
  background:var(--red-dark)
}

.composer-note {
  text-align:center;
  font-size:9px;
  letter-spacing:.2px;
  color:#aaa39b;
  margin:12px 0 0
}

.messages {
  max-width:960px;
  margin:0 auto
}

.message {
  padding:30px 0;
  border-bottom:1px solid #eeeae4
}

.message.user {
  display:flex;
  justify-content:flex-end;
  padding:27px 0 7px;
  border-bottom:0
}

.user-bubble {
  background:var(--paper);
  border-radius:8px 8px 0 8px;
  max-width:85%;
  padding:13px 18px;
  font-size:13px;
  line-height:1.8;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

.assistant-label {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:#8a837a;
  letter-spacing:1px;
  margin-bottom:15px
}

.assistant-icon {
  color:var(--red);
  font-size:12px;
  font-weight:650;
  letter-spacing:0
}

.answer-text {
  font-size:14px;
  line-height:1.95;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0
}

.form-list {
  display:grid;
  gap:10px;
  margin-top:24px
}

.form-card {
  border:1px solid var(--line);
  border-radius:5px;
  padding:17px 19px;
  background:#fff
}

.form-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:11px
}

.serial-button {
  padding:0;
  color:var(--blue);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2px;
  text-align:left
}

.serial-button:hover {
  text-decoration:underline
}

.status-badge {
  color:var(--green-ink);
  background:var(--pale-green);
  border:1px solid #cce5da;
  font-size:9px;
  border-radius:3px;
  padding:4px 8px;
  white-space:nowrap
}

.status-badge.closed {
  color:#777;
  background:#f4f4f2;
  border-color:#e3e1db
}

.form-title {
  font-size:13px;
  margin:0 0 13px;
  font-weight:500
}

.form-meta {
  display:flex;
  flex-wrap:wrap;
  gap:7px 19px;
  font-size:11px;
  color:#8e877e;
  line-height:1.7
}

.form-meta .approver {
  color:#5d6970
}

.form-link {
  margin-left:auto;
  color:var(--blue);
  text-decoration:none;
  font-size:10px
}

.form-link:hover {
  text-decoration:underline
}

.source-note {
  font-size:9px;
  color:#a29b92;
  margin-top:18px;
  line-height:1.8
}

.reply-warning {
  margin-top:17px;
  border-left:3px solid #d9ad53;
  background:#fffaf0;
  padding:11px 14px;
  font-size:12px;
  line-height:1.8;
  color:#8a6b34;
  white-space:pre-wrap
}

.loading {
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px
}

.loading-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  animation:pulse 1.4s infinite
}

.history-list {
  margin-top:20px;
  border-top:1px solid var(--line);
  padding-top:16px
}

.history-list h3 {
  font-size:12px;
  font-weight:550;
  margin:0 0 14px
}

.history-step {
  padding:10px 0 10px 15px;
  border-left:2px solid #bcdccc;
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 10px;
  font-size:11px
}

.history-step p {
  margin:0;
  color:#8e877e;
  font-size:10px;
  grid-column:1/-1
}

.history-step>span:last-of-type {
  color:var(--green-ink)
}

@keyframes pulse {
  50% {
    opacity:.3;
    transform:scale(.75)
  }
}

@media(min-width:1500px) {
  .welcome {
    padding-top:90px
  }
  .prompt-grid {
    padding-bottom:50px
  }
  .welcome h1 {
    font-size:54px
  }
  .workspace-header {
    padding:0 55px
  }
  .content {
    padding:0 70px
  }
  .composer-area {
    padding-right:70px;
    padding-left:70px
  }
}

@media(max-width:1100px) {
  .workspace {
    grid-template-columns:210px minmax(0,1fr)
  }
  .sidebar {
    width:210px;
    padding:30px 16px 20px
  }
  .workspace-header {
    padding:0 25px
  }
  .content {
    padding:0 30px
  }
  .composer-area {
    padding:15px 30px
  }
  .welcome {
    grid-template-columns:1fr 170px;
    padding-top:45px
  }
  .workflow-emblem {
    padding:20px 15px
  }
  .header-account {
    gap:12px
  }
  .prompt-card {
    padding:16px
  }
  .story-content h1 {
    font-size:34px
  }
  .login-story {
    padding:42px 7%
  }
  .login-panel {
    padding:45px 35px
  }
}

@media(max-width:800px) {
  .workspace {
    grid-template-columns:1fr
  }
  .sidebar {
    display:none
  }
  .main {
    grid-column:1
  }
  .workspace-header {
    min-height:72px
  }
  .welcome {
    padding-top:38px
  }
  .welcome h1 {
    font-size:39px
  }
  .login-view {
    grid-template-columns:1fr
  }
  .login-story {
    padding:25px 28px;
    border:0;
    border-bottom:1px solid var(--line)
  }
  .login-story .brand {
    flex-direction:row;
    align-items:center;
    gap:22px
  }
  .login-story .brand img {
    width:98px
  }
  .story-content {
    padding:32px 0 10px
  }
  .story-content h1 {
    font-size:29px;
    line-height:1.55
  }
  .story-content .eyebrow {
    font-size:9px;
    margin-bottom:15px
  }
  .story-description {
    font-size:12px
  }
  .flow-illustration,.story-footer {
    display:none
  }
  .login-panel {
    padding:30px 28px 20px
  }
  .login-card {
    max-width:430px;
    padding-top:24px
  }
  .login-card h2 {
    font-size:25px
  }
  .login-card>.muted-copy {
    margin-bottom:25px
  }
  .login-caption {
    margin-top:25px
  }
}

@media(max-width:520px) {
  .workspace-header {
    padding:0 18px;
    min-height:70px;
    gap:8px
  }
  .header-title {
    font-size:10px;
    gap:7px
  }
  .header-account {
    gap:9px
  }
  .identity {
    font-size:10px
  }
  .identity>span {
    font-size:8px
  }
  .header-account>.text-button {
    font-size:10px
  }
  .environment-badge {
    font-size:9px;
    padding:4px 6px
  }
  .content {
    padding:0 22px
  }
  .welcome {
    grid-template-columns:1fr;
    padding-top:31px
  }
  .welcome-heading>.eyebrow {
    font-size:8px;
    margin-bottom:18px
  }
  .welcome h1 {
    font-size:34px
  }
  .welcome-description {
    font-size:12px;
    margin-top:17px
  }
  .mobile-break {
    display:block
  }
  .workflow-emblem {
    display:none
  }
  .context-bar {
    font-size:9px;
    padding:13px 0;
    margin-top:26px;
    margin-bottom:24px;
    flex-wrap:wrap;
    gap:10px
  }
  .context-bar .text-button {
    font-size:9px
  }
  .prompt-heading {
    font-size:10px
  }
  .prompt-heading .muted-copy {
    font-size:9px
  }
  .prompt-grid {
    gap:8px
  }
  .prompt-card {
    padding:13px 11px
  }
  .prompt-number {
    font-size:8px;
    letter-spacing:0;
    margin-bottom:12px
  }
  .prompt-card strong {
    font-size:11px
  }
  .prompt-arrow {
    font-size:14px;
    right:10px;
    bottom:9px
  }
  .composer-area {
    padding:12px 18px 15px
  }
  .composer {
    padding:11px 12px 11px 14px;
    gap:10px
  }
  .composer textarea {
    font-size:12px
  }
  .composer-note {
    font-size:8px;
    line-height:1.7
  }
  .preview-badge {
    display:none
  }
  .answer-text {
    font-size:13px
  }
  .form-card {
    padding:15px
  }
  .form-meta {
    gap:5px 11px;
    font-size:10px
  }
  .form-link {
    margin-left:0
  }
  .serial-button {
    font-size:11px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

@media(max-height:800px) and (min-width:801px) {
  .welcome {
    padding-top:34px
  }
  .welcome h1 {
    font-size:40px;
    line-height:1.35
  }
  .welcome-heading>.eyebrow {
    margin-bottom:16px
  }
  .welcome-description {
    margin-top:16px
  }
  .context-bar {
    margin:24px 0 22px;
    padding:13px 0
  }
  .prompt-card {
    padding:17px
  }
  .prompt-number {
    margin-bottom:11px
  }
  .prompt-grid {
    padding-bottom:20px
  }
  .composer-area {
    padding-top:12px;
    padding-bottom:14px
  }
}

.mobile-toolbar {
  display:none
}

.form-content {
  margin-top:20px;
  border-top:1px solid var(--line);
  padding-top:16px
}

.form-content h3 {
  font-size:12px;
  font-weight:550;
  margin:0 0 15px
}

.form-content dl {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:10px 16px;
  font-size:12px;
  line-height:1.9;
  margin:0
}

.form-content dt {
  color:var(--muted)
}

.form-content dd {
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

@media(max-width:800px) {
  .mobile-toolbar {
    display:flex;
    justify-content:flex-end;
    padding:8px 22px;
    border-bottom:1px solid #eeeae4;
    min-height:36px
  }
  .mobile-toolbar .text-button {
    font-size:10px
  }
}

@media(max-width:520px) {
  .header-title {
    flex-wrap:wrap;
    max-width:146px;
    row-gap:4px
  }
  .header-title .preview-badge {
    display:block;
    font-size:8px;
    line-height:1.4;
    margin-left:12px
  }
  .form-content dl {
    grid-template-columns:70px 1fr;
    font-size:11px
  }
}