* { box-sizing: border-box; font-family: "Noto Sans TC", "PingFang TC", sans-serif; }
body { margin: 0; display: flex; min-height: 100vh; background: #f3f5f8; color: #16202e; }
#sidebar { width: 200px; flex: 0 0 200px; background: #16202e; color: #fff; padding: 20px; }
#sidebar h1 { font-size: 20px; line-height: 1.4; }
#workbenchNav { margin: 24px -8px; display: grid; gap: 6px; }
.nav-item { text-align: left; background: transparent; border: 1px solid transparent; color: #dce8f2; margin: 0; }
.nav-item.active, .nav-item:focus { border-color: #75c9bd; background: #24534f; }
.nav-item:disabled { opacity: .55; cursor: not-allowed; }
.status-text, .document-status { display: inline-block; font-size: 12px; margin-left: 4px; }
.privacy-note { color: #5c6b7a; font-size: 12px; }
.document-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.document-toolbar h2 { margin-right:auto; }
.document-editor { display:grid; gap:14px; }
.editor-group { border:1px solid #dde3ec; border-radius:6px; padding:12px; }
.editor-group h3 { margin:0 0 8px; font-size:14px; }
.editor-group textarea { width:100%; min-height:56px; }
.editor-group input[type=date] { min-width:150px; }
.locked-field { background:#eef1f4; color:#66717d; }
.line-table { min-width:760px; }
#previewFrame { width: 100%; min-height: 520px; border: 1px solid #dde3ec; }
main { flex: 1; padding: 24px; max-width: 1100px; min-width: 0; }
.card { background: #fff; border-radius: 8px; padding: 18px 22px; margin-bottom: 16px;
        box-shadow: 0 1px 4px rgba(22,32,46,.08); overflow-x: auto; }
.card h2 { margin-top: 0; font-size: 16px; color: #16202e; }
label { display: inline-block; margin: 4px 12px 4px 0; font-size: 13px; }
input { padding: 4px 6px; border: 1px solid #cbd4e0; border-radius: 5px; }
table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: 13px; }
th, td { border: 1px solid #dde3ec; padding: 4px 6px; text-align: center; }
td input { width: 100%; min-width: 72px; border: none; text-align: inherit; }
.badge-hit { color: #0a7a41; font-weight: bold; }
.badge-miss { color: #a36a00; font-weight: bold; }
ul.red li { color: #c0392b; } ul.yellow li { color: #a36a00; }
button { padding: 6px 14px; border: 0; border-radius: 6px; background: #1d7a6f;
         color: #fff; cursor: pointer; margin: 4px 4px 4px 0; }
button:disabled { background: #9db3c8; cursor: not-allowed; }

#ticketWidget {
  --ticket-rail-width: 48px;
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1000;
  pointer-events: none;
}
#ticketWidget:not([hidden]) { display: block; }
#ticketToggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--ticket-rail-width);
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: #1d7a6f;
  color: #fff;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  font-weight: bold;
  pointer-events: auto;
}
#ticketToggle:focus-visible { outline: 3px solid #ffd54f; outline-offset: -4px; }
#ticketDrawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--ticket-rail-width);
  display: flex;
  flex-direction: column;
  width: 620px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-left: 1px solid #d5dde5;
  box-shadow: -6px 0 18px rgba(22,32,46,.16);
  pointer-events: auto;
}
#ticketDrawer[hidden] { display: none; }
#ticketDrawerHeader {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid #d5dde5;
}
#ticketDrawerHeader h2 { margin: 0; font-size: 20px; }
#ticketClose {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #eef3f3;
  color: #16202e;
  font-size: 20px;
  line-height: 1;
}
#ticketFrame {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  background: #fff;
}

.login-main { margin: auto; width: min(380px, 92vw); }
.login-error { color: #c0392b; min-height: 1.2em; }

@media (max-width: 760px) {
  body { display: block; }
  #sidebar { width: 100%; min-height: auto; padding: 12px 16px; }
  #sidebar h1 { margin: 0; }
  #workbenchNav { display:flex; overflow-x:auto; margin:10px -4px; }
  .nav-item { white-space:nowrap; }
  main { padding: 12px; }
  .card { padding: 14px; }
  label { display: block; margin-right: 0; }
  label > input { width: 100%; margin-top: 4px; }
  label > textarea, label > select { width: 100%; margin-top: 4px; }
  .document-toolbar label { display: block; width: 100%; }
  #ticketWidget { --ticket-rail-width: 40px; }
  #ticketDrawer {
    width: calc(100vw - var(--ticket-rail-width));
  }
}