:root {
  --black: #111111;
  --black-2: #1b1b1b;
  --yellow: #ffc400;
  --yellow-dark: #e9ae00;
  --yellow-soft: #fff8da;
  --ink: #191919;
  --muted: #6f6f6f;
  --line: #e7e3d8;
  --surface: #faf9f5;
  --white: #ffffff;
  --danger: #c9364f;
  --shadow: 0 24px 70px rgba(31, 25, 5, .15);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--ink);
  background: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.auth-view {
  position: relative;
  display: grid;
  min-height: 100%;
  place-items: center;
  overflow: hidden;
  padding: 96px 24px 40px;
  background:
    radial-gradient(circle at 12% 82%, rgba(255,196,0,.25), transparent 28%),
    radial-gradient(circle at 91% 10%, rgba(255,196,0,.16), transparent 26%),
    linear-gradient(145deg, #fffdf7, #f7f5ec);
}
.auth-view::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .32;
  background-image: radial-gradient(#d9d1b7 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, black, transparent 74%);
}
.auth-brand {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.auth-brand > div { display: flex; flex-direction: column; }
.auth-brand strong { font-size: 20px; letter-spacing: -.03em; }
.auth-brand span { margin-top: 1px; color: var(--muted); font-size: 12px; }
.brand-logo { width: 48px; height: 48px; object-fit: contain; }
.brand-logo.small { width: 39px; height: 39px; }

.auth-card {
  position: relative;
  z-index: 2;
  width: min(448px, 100%);
  padding: 40px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 25px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}
.auth-card::before {
  position: absolute;
  top: 0;
  left: 38px;
  width: 74px;
  height: 5px;
  content: "";
  border-radius: 0 0 7px 7px;
  background: var(--yellow);
}
.eyebrow { color: #a77b00; font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.auth-card h1 { margin: 10px 0 8px; font-size: 29px; letter-spacing: -.04em; }
.auth-card > p { margin: 0 0 25px; color: var(--muted); }
.auth-card form { display: grid; gap: 15px; }
.auth-card.setup { width: min(720px, 100%); }
.auth-card.setup form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-card.setup #contact-email-row, .auth-card.setup #auth-submit { grid-column: 1 / -1; }
.auth-card label { display: grid; gap: 7px; color: #3f3c34; font-size: 13px; font-weight: 750; }
.auth-card input, .inline-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
  background: #fcfbf7;
  transition: .2s;
}
.auth-card input:focus, .inline-form input:focus {
  border-color: var(--yellow-dark);
  background: white;
  box-shadow: 0 0 0 3px rgba(255,196,0,.19);
}
.primary {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  color: var(--black);
  background: var(--yellow);
  box-shadow: 0 7px 17px rgba(207,155,0,.22);
  font-weight: 800;
}
.primary:hover { background: #ffd028; transform: translateY(-1px); }
.primary:disabled { opacity: .5; transform: none; cursor: not-allowed; }
.wide { width: 100%; margin-top: 5px; padding: 13px; }
.text-button { display: block; margin: 19px auto 0; border: 0; color: #876400; background: none; font-weight: 750; }
.auth-links { display: flex; align-items: center; justify-content: center; margin-top: 17px; gap: 8px 16px; flex-wrap: wrap; }
.auth-links .text-button { margin: 0; font-size: 12px; }
.auth-note { margin: 18px 0 0 !important; color: #969181 !important; font-size: 12px !important; text-align: center; }
.auth-start { margin: 24px 0 0; padding: 20px; border: 1px solid #e7c34e; border-radius: 16px; background: var(--yellow-soft); }
.auth-start h2 { margin: 0 0 6px; font-size: 21px; line-height: 1.4; }
.auth-start p { margin: 0 0 12px; color: #655a38; font-size: 14px; line-height: 1.6; }
.auth-start .primary { min-height: 52px; margin: 0; font-size: 16px; line-height: 1.5; }
.auth-start .auth-employee-tip { margin: 14px 0 0; font-size: 13px; }
.auth-back { display: block; min-height: 44px; margin: -8px 0 14px; padding: 8px 0; border: 0; background: none; color: #715500; text-align: left; font-weight: 750; }
.auth-help { margin: 20px 0 0; border: 1px solid var(--line); border-radius: 12px; background: #fcfbf7; }
.auth-help summary { padding: 14px 16px; min-height: 52px; cursor: pointer; font-size: 14px; font-weight: 750; line-height: 1.7; }
.auth-help-action { display: block; padding-left: 16px; color: #715500; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.auth-help[open] summary { border-bottom: 1px solid var(--line); }
.auth-help-body { padding: 16px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.auth-help-role { margin: 0 0 16px; }
.auth-help-steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: auth-step; }
.auth-help-steps li { position: relative; padding-left: 38px; counter-increment: auth-step; }
.auth-help-steps li::before { content: counter(auth-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); font-weight: 800; }
.auth-help-steps p { margin: 5px 0 0; color: #625e52; }
.auth-help-footer { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: #625e52; }
.auth-card .auth-field-help { font-size: 12px; line-height: 1.6; font-weight: 400; color: #625e52; }
.auth-card button:focus-visible, .auth-help summary:focus-visible { outline: 3px solid #876400; outline-offset: 3px; }
.auth-card { scroll-margin-top: 20px; }
.auth-card.setup #company-registry-status { grid-column: 1 / -1; }
.registration-result { margin-top: 15px; padding: 11px 13px; border: 1px solid #e4c85c; border-radius: 10px; color: #63500c; background: var(--yellow-soft); font-size: 12px; line-height: 1.5; }
.auth-provider {
  position: absolute;
  z-index: 2;
  bottom: 25px;
  left: 34px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 13px 7px 9px;
  border: 1px solid rgba(186,145,0,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px);
}
.auth-provider span { color: #8a816b; font-size: 10px; letter-spacing: .08em; writing-mode: vertical-rl; }
.auth-provider img { width: 76px; height: 76px; object-fit: contain; }
.auth-decoration { position: absolute; border: 1px solid rgba(215,164,0,.14); border-radius: 50%; }
.auth-decoration.one { bottom: -110px; left: -90px; width: 370px; height: 370px; box-shadow: 0 0 0 42px rgba(255,196,0,.04); }
.auth-decoration.two { top: -150px; right: -80px; width: 410px; height: 410px; box-shadow: 0 0 0 58px rgba(255,196,0,.035); }

.app-shell { position: fixed; inset: 0; display: grid; min-height: 0; overflow: hidden; grid-template-columns: 248px 1fr; background: #fff; }
.sidebar { display: flex; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; flex-direction: column; padding: 17px 12px 14px; color: white; background: var(--black); }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 7px 18px; }
.sidebar-brand > div { display: flex; min-width: 0; flex-direction: column; }
.sidebar-brand strong { color: white; font-size: 15px; letter-spacing: -.02em; }
.sidebar-brand span { margin-top: 1px; color: #8e8e8e; font-size: 10px; }
.sidebar-brand .icon-button { margin-left: auto; color: white; }
.new-chat {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 11px 14px;
  gap: 10px;
  border: 1px solid rgba(255,196,0,.42);
  border-radius: 11px;
  color: var(--black);
  background: var(--yellow);
  font-weight: 800;
  text-align: left;
}
.new-chat:hover { background: #ffd12f; }
.new-chat span { font-size: 20px; font-weight: 400; }
.workflow-nav { display: grid; width: 100%; align-items: center; margin-top: 8px; padding: 11px 12px; border: 1px solid #4f4319; border-radius: 11px; color: #f4f0df; background: linear-gradient(135deg,#29240f,#191919); grid-template-columns: 31px 1fr auto; gap: 8px; text-align: left; }
.workflow-nav:hover,.workflow-nav.active { border-color: var(--yellow); color: #fff; background: linear-gradient(135deg,#3a310d,#222); }
.workflow-nav-mark { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #151515; background: var(--yellow); font-size: 15px; }
.workflow-nav > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.workflow-nav strong { font-size: 12px; }
.workflow-nav small { margin-top: 2px; overflow: hidden; color: #827c68; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-nav b { color: var(--yellow); font-size: 20px; font-weight: 400; }
.work-nav{display:grid;width:100%;align-items:center;margin-top:8px;padding:10px 12px;border:1px solid #303030;border-radius:10px;color:#ddd;background:#1a1a1a;grid-template-columns:22px 1fr auto;text-align:left}
.work-nav:hover,.work-nav.active{border-color:#7d6615;color:var(--yellow);background:#24200f}
.work-nav small{color:#777}
.history-label { display:flex;align-items:center;justify-content:space-between;padding:18px 12px 8px; color: #777; font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.history-label button{padding:0 4px;border:0;color:#aaa;background:none;font-size:18px}
.history-label button:hover{color:var(--yellow)}
.sidebar-projects{flex:0 0 auto;min-width:0}
.project-label{color:#ccc;font-size:12px;letter-spacing:.04em}
.project-label > div{display:flex;gap:4px}
.project-label button{min-width:36px;min-height:36px}
.project-list{display:grid;min-height:44px;max-height:min(220px,24dvh);overflow-y:auto;overscroll-behavior:contain;align-content:start;gap:3px;scrollbar-gutter:stable}
.project-item{display:grid;width:100%;min-width:0;min-height:44px;align-items:center;padding:8px 10px;border:0;border-radius:8px;color:#ccc;background:none;grid-template-columns:22px minmax(0,1fr) auto;text-align:left}
.project-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.project-item:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.project-item:hover,.project-item.active{color:#fff;background:#232323}
.project-item small{color:#666;font-size:9px}
.sidebar-empty{padding:8px 12px;color:#555;font-size:10px}
.history-search { display: flex; flex: 0 0 auto; align-items: center; border: 1px solid #484848; border-radius: 8px; margin: 0 2px; background: #202020; }
.history-search input { width: 100%; min-width: 0; padding: 9px 10px; border: 0; color: #eee; background: none; font-size: 12px; }
.history-search input::-webkit-search-cancel-button { display: none; }
.history-search button { flex: none; width: 32px; min-height: 36px; border: 0; color: #ccc; background: none; }
.history-status { flex: none; margin: 6px 10px; color: #aaa; font-size: 10px; line-height: 1.5; }
.history-status.error { color: #ffcd82; }
.history-empty { margin: 8px 10px; color: #bbb; font-size: 12px; line-height: 1.5; }
.conversation-list { display: grid; min-height: 84px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 240px; align-content: start; grid-auto-rows: min-content; gap: 4px; scrollbar-gutter: stable; }
.conversation-item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 78px;
  box-sizing: border-box;
  overflow: hidden;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #aaa;
  background: none;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-open { display: grid; gap: 4px; min-width: 0; width: 100%; min-height: 88px; padding: 9px 48px 9px 10px; border: 0; border-radius: 8px; color: inherit; background: none; text-align: left; }
.conversation-title, .conversation-preview, .conversation-date { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.conversation-title { font-size: 12px; font-weight: 650; }
.conversation-preview { font-size: 11px; opacity: .85; }
.conversation-date { font-size: 10px; opacity: .8; }
.conversation-open:focus-visible, .conversation-actions button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.conversation-item:hover { color: white; background: #232323; }
.conversation-item.active { color: var(--black); background: var(--yellow-soft); }
.conversation-actions { position: absolute; top: 0; right: 0; display: grid; }
.conversation-actions button { width: 44px; min-height: 44px; padding: 4px; border: 0; color: inherit; background: none; opacity: .85; font-size: 18px; }
.conversation-actions .conversation-rename { font-size: 12px; font-weight: 700; }
.project-chat-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.project-chat-actions button { min-height: 44px; }
#rename-active-conversation { flex: 0 0 auto; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fffaf0; font-size: 13px; }
.chat-main.work-mode #rename-active-conversation { display: none; }
#rename-conversation-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
#rename-conversation-form label { display: block; margin-bottom: 8px; font-weight: 650; }
#conversation-name { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fcfbf7; font-size: 16px; }
#conversation-name:focus { outline: 2px solid var(--yellow-dark); outline-offset: 2px; }
#conversation-name-help { color: var(--muted); font-size: 13px; }
#rename-conversation-error { color: #a72d43; }
.rename-conversation-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.rename-conversation-buttons button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; }
.rename-conversation-buttons button:not(.primary) { background: white; color: var(--ink); }
.conversation-item:hover .conversation-delete, .conversation-delete:focus-visible, .conversation-item.active .conversation-delete { opacity: 1; }
.message.history-match .message-body { outline: 2px solid #d4a800; outline-offset: 3px; border-radius: 8px; }
.sidebar-footer { flex: 0 0 auto; margin-top: auto; padding-top: 10px; border-top: 1px solid #292929; }
.sidebar-action { width: 100%; padding: 10px; border: 0; border-radius: 8px; color: #ccc; background: none; text-align: left; }
.sidebar-action:hover { color: var(--yellow); background: #222; }
.sidebar-date { display: block; padding: 0 10px 9px; color: #898989; font-size: 10px; letter-spacing: .02em; }
.account-menu-wrap { position:relative; }
.account-row { display:flex;width:100%;align-items:center;margin-top:5px;padding:10px 7px;border:0;border-radius:10px;color:#eee;background:none;gap:10px;text-align:left; }
.account-row:hover,.account-row[aria-expanded="true"] { background:#202020; }
.account-details { display:flex;min-width:0;flex:1;flex-direction:column; }
.account-details strong,.account-details span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.account-details strong { font-size:13px; }
.account-details span { color:#7f7f7f;font-size:11px; }
.account-menu-chevron { flex:0 0 auto;color:#777!important;font-size:16px!important;transition:transform .18s; }
.account-row[aria-expanded="true"] .account-menu-chevron { transform:rotate(180deg); }
.account-menu { position:absolute;z-index:15;right:0;bottom:calc(100% + 8px);left:0;padding:7px;border:1px solid #363636;border-radius:14px;background:#1c1c1c;box-shadow:0 18px 50px rgba(0,0,0,.45); }
.account-menu-item { display:grid;width:100%;align-items:center;padding:10px 9px;border:0;border-radius:9px;color:#ddd;background:none;grid-template-columns:26px 1fr;gap:7px;text-align:left; }
.account-menu-item:hover { color:#fff;background:#2a2a2a; }
.account-menu-item > span:last-child { display:flex;min-width:0;flex-direction:column;gap:2px; }
.account-menu-item strong { overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap; }
.account-menu-item small { overflow:hidden;color:#777;font-size:9px;text-overflow:ellipsis;white-space:nowrap; }
.account-menu-icon { color:var(--yellow);font-size:16px;font-weight:800;text-align:center; }
.account-menu-divider { height:1px;margin:5px 4px;background:#333; }
.logout-menu-item .account-menu-icon,.logout-menu-item strong { color:#aaa; }
.avatar { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid #4d4d4d; border-radius: 10px; color: var(--yellow); background: #292929; font-size: 12px; font-weight: 850; }
.icon-button { padding: 5px; border: 0; border-radius: 7px; color: var(--muted); background: none; font-size: 19px; }
.icon-button:hover { background: rgba(128,128,128,.13); }

.chat-main { display: grid; min-width: 0; min-height: 0; overflow: hidden; grid-template-columns: minmax(0,1fr); grid-template-rows: 65px minmax(0,1fr) auto; background: #fff; }
.chat-main.work-mode{display:block;height:100%;overflow:auto;background:#f7f5ee}
.chat-main.work-mode .topbar{position:sticky;z-index:7;top:0}
.topbar { display: flex; height: 65px; align-items: center; justify-content: space-between; padding: 0 27px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.93); }
.topbar > div:first-of-type { display: flex; min-width: 0; flex-direction: column; }
.topbar strong { overflow: hidden; max-width: 50vw; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.topbar span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.status-pill { padding: 6px 10px; border: 1px solid #e7dfc6; border-radius: 30px; color: #5a5548; background: #fffaf0; font-size: 11px; }
.status-pill i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #26a75d; }
.status-pill.offline i { background: var(--yellow-dark); }
.messages { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 42px max(24px, calc((100% - 830px)/2)) 30px; scroll-behavior: smooth; }
.welcome { max-width: 830px; margin: 6vh auto 0; text-align: center; }
.welcome-mark { display: grid; width: 78px; height: 78px; margin: auto; place-items: center; border: 1px solid #eee7d0; border-radius: 24px; background: linear-gradient(145deg, #fffef9, #fff4c8); box-shadow: 0 14px 34px rgba(167,126,0,.14); }
.welcome-mark img { width: 64px; height: 64px; object-fit: contain; }
.welcome h2 { margin: 20px 0 6px; font-size: 29px; letter-spacing: -.04em; }
.welcome > p { margin: 0; color: var(--muted); }
.suggestions { display: grid; margin-top: 33px; grid-template-columns: 1fr 1fr; gap: 11px; }
.suggestions button { position: relative; padding: 16px 17px 16px 20px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: #fff; box-shadow: 0 4px 15px rgba(34,27,3,.04); text-align: left; }
.suggestions button::before { position: absolute; top: 17px; bottom: 17px; left: 0; width: 4px; content: ""; border-radius: 0 4px 4px 0; background: var(--yellow); }
.suggestions button:hover { border-color: #e2c55e; background: #fffdf6; transform: translateY(-1px); }
.suggestions span { display: block; margin-bottom: 5px; color: var(--ink); font-weight: 800; }
.message { display: grid; max-width: 830px; margin: 0 auto 27px; grid-template-columns: 38px 1fr; gap: 13px; }
.message.user { grid-template-columns: 1fr; }
.message.user .message-body { max-width: 78%; justify-self: end; padding: 11px 15px; border: 1px solid #f0d679; border-radius: 17px 17px 4px 17px; background: var(--yellow-soft); }
.message-avatar { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #eee3bf; border-radius: 12px; background: #fff9e1; }
.message-avatar img { width: 31px; height: 31px; object-fit: contain; }
.message-body { min-width: 0; font-size: 15px; line-height: 1.72; }
.message-body p { margin: 0 0 11px; }
.message-body h1, .message-body h2, .message-body h3 { margin: 17px 0 8px; line-height: 1.35; }
.message-body ul { margin: 5px 0 12px; padding-left: 22px; }
.message-diagram { margin:16px 0; padding:14px; max-width:100%; border:1px solid var(--line, #e5e1d5); border-radius:14px; background:#fff; }
.diagram-viewport { max-width:100%; }
.diagram-image { display:block; max-width:100%; height:auto; margin:auto; }
.diagram-save-help { display:block; color:#777; font-size:12px; margin-top:8px; }
.diagram-save-actions [aria-disabled="true"] { opacity:.5; pointer-events:none; }
.diagram-save-actions button, .diagram-save-actions a { min-height:44px; }
.message-diagram figcaption, .diagram-fallback > p { margin-top:10px; font-size:13px; color:#715800; }
.diagram-source, .diagram-words { margin-top:8px; font-size:13px; }
.diagram-source summary, .diagram-words summary { cursor:pointer; padding:6px 0; }
.message-code { max-width:100%; overflow:auto; padding:14px; border-radius:10px; background:#f5f5f3; color:#333; font-size:13px; line-height:1.6; white-space:pre; }
.diagram-fallback { margin:12px 0; padding:12px; border:1px solid #e8d28a; border-radius:12px; background:#fffbeb; }
@media (max-width:760px) {
  .message-diagram { padding:10px; }
  .diagram-image { max-width:100%; }
}
.message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.file-tag { padding: 5px 8px; border: 1px solid #e4d69c; border-radius: 8px; color: #655b3d; background: white; font-size: 11px; }
.generated-files { display: grid; max-width: 590px; margin-top: 14px; gap: 9px; }
.generated-file-card { display: grid; align-items: center; padding: 12px; border: 1px solid #dfc34e; border-radius: 13px; color: var(--ink); background: linear-gradient(135deg,#fffdf3,#fff7d5); box-shadow: 0 5px 16px rgba(113,84,0,.08); grid-template-columns: 48px 1fr auto; gap: 11px; text-decoration: none; }
.generated-file-card:hover { border-color: #bd9100; transform: translateY(-1px); }
.generated-file-icon { display: grid; height: 42px; place-items: center; border-radius: 9px; color: var(--yellow); background: #181818; font-size: 10px; font-weight: 850; }
.generated-file-card strong, .generated-file-card small { display: block; overflow-wrap: anywhere; }
.generated-file-card strong { font-size: 13px; }
.generated-file-card small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.generated-file-card > b { padding: 6px 10px; border-radius: 8px; color: #171717; background: var(--yellow); font-size: 11px; }
.export-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.export-actions > span { color: #918d82; font-size: 10px; }
.export-actions button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: #5e5b52; background: white; font-size: 11px; }
.export-actions button:hover { border-color: #e0bd39; color: #765800; background: #fffdf4; }
.generated-image { display: block; max-width: min(620px,100%); height:auto; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 8px 28px rgba(19,19,19,.1); }
.generated-image.preview-failed { display:none; }
.image-preview-status { padding:14px;background:#fff8e8;border:1px solid #e0ca86;border-radius:12px;font-size:14px;line-height:1.6; }
.image-save-actions { display: flex; flex-wrap: wrap; align-items: center; margin-top: 12px; gap: 8px; }
.image-save-actions button, .image-save-actions a { display: inline-flex; min-height: 35px; align-items: center; justify-content: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; color: #5e5b52; background: white; font-size: 11px; font-weight: 750; text-decoration: none; }
.image-save-actions .save-photo-button { border-color: #dfb915; color: #241d00; background: var(--yellow); }
.image-save-actions .save-photo-button:disabled { opacity: .55; cursor: wait; }
.image-save-help { display: block; margin-top: 7px; color: #8a8579; font-size: 10px; line-height: 1.55; }
.image-dimensions { display: block; max-width: 620px; margin-top: 8px; color: #665d43; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }

.composer-wrap { position: relative; min-width: 0; padding: 10px max(20px, calc((100% - 830px)/2)) 15px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 12%); }
.composer-wrap.drag-active::after { content: '放開即可上傳檔案'; position: absolute; z-index: 10; inset: 4px max(14px,calc((100% - 850px)/2)) 7px; display: grid; place-items: center; border: 2px dashed #d5a000; border-radius: 18px; color: #3d3000; background: rgba(255,248,205,.96); box-shadow: 0 10px 32px rgba(120,91,0,.18); font-size: 15px; font-weight: 850; pointer-events: none; }
.composer-wrap.drag-active .composer { border-color: #d5a000; background: #fffdf0; }
.composer { padding: 12px 12px 9px; border: 1px solid #cfcabf; border-radius: 18px; background: #fff; box-shadow: 0 9px 29px rgba(31,26,8,.1); }
.composer:focus-within { border-color: #d8ad17; box-shadow: 0 8px 30px rgba(215,166,0,.14); }
.composer textarea { width: 100%; min-height: 29px; max-height: 150px; padding: 2px 5px; resize: none; border: 0; outline: 0; color: var(--ink); line-height: 1.55; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.composer-actions > div { display: flex; align-items: center; gap: 7px; }
.attach-button { display: flex; height: 31px; align-items: center; padding: 0 9px; gap: 5px; border: 1px solid var(--line); border-radius: 9px; color: #5b5b5b; cursor: pointer; }
.attach-button span { font-size: 19px; line-height: 1; }
.attach-button b { font-size: 12px; font-weight: 700; }
.drag-upload-hint { color: #969083; font-size: 9px; font-weight: 650; }
.mode-button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: #696969; background: white; font-size: 12px; }
.mode-button.active { border-color: #e2bb2d; color: #684f00; background: var(--yellow-soft); }
.send-button { display: grid; width: 35px; height: 35px; padding: 0; place-items: center; flex: 0 0 35px; border: 0; border-radius: 10px; color: var(--black); background: var(--yellow); line-height: 1; }
.send-button svg { display: block; width: 21px; height: 21px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.send-button:hover { background: #ffd12c; }
.send-button:disabled { opacity: .45; cursor: wait; }
.disclaimer { margin: 8px 0 0; color: #99958a; font-size: 10px; text-align: center; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
.attachment-chip { display: flex; align-items: center; padding: 7px 9px; gap: 7px; border: 1px solid #e1d8b9; border-radius: 10px; background: #fffdf5; font-size: 11px; }
.attachment-chip button { padding: 0; border: 0; color: #8d8879; background: none; }
.upload-status { min-width: 0; margin-bottom: 7px; padding: 9px 11px; border: 1px solid #e1d18f; border-radius: 10px; color: #66500a; background: #fffbed; font-size: 12px; overflow-wrap: anywhere; }
.upload-status.success { display: flex; align-items: center; gap: 8px; padding: 0 0 0 11px; border-color: #bad8bd; color: #245c2b; background: #f2fbf3; }
.upload-status.success .upload-status-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-status-dismiss { flex: 0 0 44px; min-height: 44px; padding: 0; border: 0; border-radius: 9px; color: inherit; background: transparent; font-size: 22px; cursor: pointer; }
.upload-status-dismiss:focus-visible, .image-guide-summary:focus-visible { outline: 2px solid #866700; outline-offset: 2px; }
.upload-status.error { border-color: #e3b4bb; color: #9b2035; background: #fff4f6; white-space: normal; }
.image-guide { min-width: 0; margin-bottom: 8px; border: 1px solid #e1c34d; border-radius: 12px; background: linear-gradient(135deg,#fffdf5,#fff7d2); }
.image-guide-summary { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 8px 12px; list-style: none; cursor: pointer; border-radius: 12px; }
.image-guide-summary::-webkit-details-marker { display: none; }
.image-guide-summary strong { flex-shrink: 0; font-size: 13px; }
#image-guide-summary { flex: 1; min-width: 0; overflow: hidden; color: #74693f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.image-guide-toggle-label { flex-shrink: 0; color: #705500; font-size: 13px; font-weight: 750; }
.image-guide-collapse, .image-guide[open] .image-guide-expand { display: none; }
.image-guide[open] .image-guide-collapse { display: inline; }
.image-guide-body { min-width: 0; max-height: 240px; max-height: min(240px, 30dvh); overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 12px; border-top: 1px solid #ead996; }
#image-guide-status { margin: 10px 0; color: #74693f; font-size: 12px; overflow-wrap: anywhere; }
.image-guide-prompts { display: flex; flex-wrap: wrap; margin-top: 9px; gap: 6px; }
.image-guide-prompts button { min-height: 40px; padding: 5px 10px; border: 1px solid #ddc968; border-radius: 20px; color: #655000; background: rgba(255,255,255,.82); font-size: 12px; }
.image-guide-prompts button:hover { border-color: #b88b00; background: #fff; }
.image-guide p { margin: 8px 0 0; color: #8a8161; font-size: 12px; line-height: 1.5; }
.image-result-label { display: inline-flex; margin-bottom: 8px; padding: 5px 8px; border-radius: 20px; color: #6a5200; background: var(--yellow-soft); font-size: 9px; font-weight: 800; }
.generation-progress { margin-bottom: 8px; color: #655000; font-size: 11px; line-height: 1.65; }
.image-error-message .message-body { padding: 13px 14px; border: 1px solid #e3b4bb; border-radius: 13px; color: #7b2635; background: #fff4f6; }
.image-error-message .message-body strong { display: block; margin-bottom: 3px; color: #8e1830; }
.image-error-message .message-body p { margin: 0 0 9px; font-size: 12px; line-height: 1.6; }
.image-error-message button { padding: 7px 11px; border: 1px solid #c55c70; border-radius: 9px; color: #801d31; background: white; font-weight: 750; }
.typing { display: flex; gap: 5px; padding-top: 9px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #b9961f; animation: bounce 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

.seasonal-nav { display:flex;align-items:center;gap:9px;flex-shrink:0;padding:12px;border:1px solid #846b28;border-radius:12px;background:#252011;color:#ffe394;text-align:left; }
.seasonal-nav > span { font-size:24px; }.seasonal-nav small { margin-left:auto;font-size:10px; }
.seasonal-welcome { display:grid;gap:8px;width:100%;margin:20px 0;padding:22px;text-align:left;border:1px solid #d5b65e;border-radius:18px;background:linear-gradient(120deg,#fff9dc,#f7eed9);color:#4d3714; }
.seasonal-welcome span { font-size:12px;color:#8c691b; }.seasonal-welcome strong { font-size:19px; }.seasonal-welcome small { font-size:13px;line-height:1.6; }
.modal { width: min(900px, calc(100% - 30px)); max-height: calc(100vh - 40px); padding: 25px; overflow:auto; border: 0; border-radius: 20px; color: var(--ink); box-shadow: var(--shadow); }
.seasonal-modal { width:min(560px,calc(100% - 24px));padding:0;max-height:calc(100dvh - 24px); }
.seasonal-modal[open] { display:flex;flex-direction:column; }
.seasonal-modal > .modal-head { padding:22px;flex-shrink:0;background:#fff8db; }
.seasonal-modal form { display:flex;flex-direction:column;min-height:0;overflow:hidden; }
.seasonal-fields { display:grid;gap:19px;min-width:0;margin:0;padding:22px;border:0;overflow-y:auto; }
.seasonal-fields label { display:grid;gap:8px;font-size:14px;font-weight:650; }
.seasonal-fields input:not([type=file]), .seasonal-fields select { width:100%;min-width:0;padding:12px;border:1px solid #ddd2b7;border-radius:10px;font-size:16px;background:white;color:#26221a; }
.seasonal-fields small { font-size:12px;font-weight:400;color:#756f60;line-height:1.5; }
.seasonal-logo { display:grid;gap:9px;font-size:14px; }
.seasonal-logo [data-logo-name] { overflow-wrap:anywhere;font-size:12px;color:#756f60; }
.seasonal-logo img { max-width:180px;max-height:90px;object-fit:contain;background:#f0eee8;border-radius:8px; }
.seasonal-logo .seasonal-upload { position:relative;display:block;width:fit-content;padding:12px 18px;border:1px solid #bb931e;border-radius:10px;background:#fff9de;cursor:pointer;overflow:hidden; }
.seasonal-upload input { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
.seasonal-upload:focus-within { outline:2px solid #8c691b;outline-offset:3px; }
.seasonal-actions { flex-shrink:0;padding:14px 22px 20px;border-top:1px solid #e7dfcd;background:white; }
.seasonal-actions p { margin:0 0 10px;font-size:12px;line-height:1.6;color:#756f60; }
.seasonal-actions [data-card-status] { color:#a42136; }.seasonal-actions [data-card-status]:empty { display:none; }
@media(max-height:550px) { .seasonal-modal > .modal-head { padding:12px 18px; }.seasonal-actions { padding:8px 18px; }.seasonal-actions p { font-size:11px;margin-bottom:5px; } }
.modal::backdrop { background: rgba(15,15,15,.62); backdrop-filter: blur(4px); }
.modal-head, .section-head { display: flex; align-items: flex-start; justify-content: space-between; }
.modal h2 { margin: 5px 0 0; }
.modal-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.password-reset-modal { width: min(480px, calc(100% - 30px)); }
#change-password-dialog, #employee-password-dialog { max-height:calc(100dvh - 24px); }
#change-password-dialog input, #employee-password-dialog input { font-size:16px; }
#employee-password-dialog p { overflow-wrap:anywhere; }
#employee-password-result[hidden], #employee-password-form[hidden] { display:none; }
.password-change-actions { display:flex;justify-content:flex-end;gap:10px; }
.password-change-actions button { min-height:44px; }
.password-change-error { margin:0;color:#a22239;font-size:13px;line-height:1.5; }
.chatgpt-import-modal { width:min(720px,calc(100% - 30px)); }
.personal-memory-modal { width:min(820px,calc(100% - 30px)); }
.memory-summary { display:grid;align-items:stretch;margin:20px 0 12px;grid-template-columns:1fr 1fr auto;gap:10px; }
.memory-summary > div { display:flex;min-height:68px;justify-content:center;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#fcfbf7;flex-direction:column;gap:3px; }
.memory-summary span { color:var(--muted);font-size:9px; }
.memory-summary strong { font-size:16px; }
.memory-summary > button { align-self:stretch; }
.memory-privacy-note { margin:0 0 20px;padding:11px 13px;border:1px solid #ead273;border-radius:11px;color:#6d5700;background:#fff9dc;font-size:10px;line-height:1.65; }
.memory-section { margin-top:18px; }
.confirmed-memory-section { padding-top:20px;border-top:1px solid var(--line); }
.memory-count-badge { display:grid;min-width:28px;height:28px;place-items:center;border-radius:30px;color:#614a00;background:var(--yellow-soft);font-size:11px;font-weight:800; }
.memory-list { display:grid;margin-top:10px;gap:10px; }
.memory-card { padding:14px;border:1px solid #e0d8c3;border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(32,25,0,.035); }
.memory-card-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:10px; }
.memory-card-head > span { color:#7b5b00;font-size:10px;font-weight:850; }
.memory-card-head small { padding:3px 7px;border-radius:20px;color:#35633e;background:#e7f6e9;font-size:8px; }
.memory-card textarea { width:100%;min-height:62px;padding:10px 11px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:#fcfbf7;font:inherit;line-height:1.55;resize:vertical; }
.memory-card textarea:focus { border-color:var(--yellow-dark);outline:0;box-shadow:0 0 0 3px rgba(255,196,0,.14); }
.memory-card p { margin:8px 1px 0;color:var(--muted);font-size:9px;line-height:1.55; }
.memory-card-actions { display:flex;align-items:center;margin-top:10px;gap:8px; }
.memory-card-actions .text-button { margin-left:auto; }
.danger-text { color:var(--danger)!important; }
.memory-empty { padding:24px;border:1px dashed #d8d0bc;border-radius:13px;color:var(--muted);background:#fcfbf7;text-align:center;font-size:10px;line-height:1.65; }
.chatgpt-import-upload { margin-top:20px; }
.import-dropzone { display:grid;min-height:180px;place-items:center;align-content:center;padding:24px;border:1px dashed #d2ad21;border-radius:16px;color:#5a480b;background:#fffaf0;cursor:pointer;gap:7px;text-align:center; }
.import-dropzone:hover { border-color:#9b7600;background:#fff6d4; }
.import-upload-icon { display:grid;width:46px;height:46px;place-items:center;border-radius:14px;color:#171717;background:#fff0a8;font-size:24px;font-weight:800; }
.import-dropzone strong { font-size:15px; }
.import-upload-button { display:inline-flex;min-width:180px;min-height:44px;align-items:center;justify-content:center;margin:4px 0 2px;padding:10px 22px;border:1px solid #d19c00;border-radius:11px;color:#171717;background:var(--yellow);box-shadow:0 7px 18px rgba(174,128,0,.18);font-size:13px;font-weight:850; }
.import-dropzone:hover .import-upload-button { background:#ffd12f;transform:translateY(-1px); }
.import-dropzone small,.chatgpt-import-upload > p { color:var(--muted);font-size:10px; }
.chatgpt-import-upload > p { margin:11px 2px 0;line-height:1.6; }
.import-summary { display:flex;align-items:center;justify-content:space-between;margin:19px 0 11px;gap:12px; }
.import-summary > div:first-child { display:flex;min-width:0;flex-direction:column; }
.import-summary strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.import-summary span { margin-top:3px;color:var(--muted);font-size:10px; }
.import-summary > div:last-child { display:flex;gap:8px; }
.chatgpt-import-list { display:grid;max-height:410px;overflow:auto;border:1px solid var(--line);border-radius:13px; }
.chatgpt-import-item { display:grid;align-items:center;padding:11px 13px;border-bottom:1px solid var(--line);grid-template-columns:auto 1fr auto;gap:11px;cursor:pointer; }
.chatgpt-import-item:last-child { border-bottom:0; }
.chatgpt-import-item:hover { background:#fffaf0; }
.chatgpt-import-item input { width:16px;height:16px;accent-color:#d39d00; }
.chatgpt-import-item > span { display:flex;min-width:0;flex-direction:column; }
.chatgpt-import-item strong { overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap; }
.chatgpt-import-item small { margin-top:3px;color:var(--muted);font-size:9px; }
.chatgpt-import-item > em { color:#8a6900;font-size:9px;font-style:normal; }
.chatgpt-import-item.already-imported { opacity:.55;cursor:not-allowed; }
.import-actions { display:flex;align-items:center;justify-content:flex-end;margin-top:15px;gap:9px; }
.password-reset-form { display: grid; gap: 13px; margin-top: 18px; }
.password-reset-form label { display: grid; gap: 6px; color: #3f3c34; font-size: 12px; font-weight: 750; }
.password-reset-form input, .password-reset-form textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #fcfbf7; resize: vertical; }
.password-reset-form input:focus, .password-reset-form textarea:focus { border-color: var(--yellow-dark); box-shadow: 0 0 0 3px rgba(255,196,0,.16); }
.password-reset-notice { padding: 10px 12px; border: 1px solid #ead273; border-radius: 10px; color: #705600; background: #fff9dc; font-size: 10px; line-height: 1.6; }
.project-modal{width:min(820px,calc(100% - 30px))}
.work-modal{width:min(620px,calc(100% - 30px))}
.project-form{display:grid;gap:13px;margin-top:18px}
.project-form label{display:grid;gap:6px;color:#3f3c34;font-size:12px;font-weight:750}
.project-form input,.project-form textarea,.project-form select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;outline:none;background:#fcfbf7;resize:vertical}
.work-output-options{display:flex;align-items:center;flex-wrap:wrap;padding:13px;border:1px solid var(--line);border-radius:12px;gap:10px 18px}.work-output-options legend{padding:0 5px;color:#3f3c34;font-size:12px;font-weight:750}.work-output-options label{display:flex;align-items:center;grid-template-columns:auto 1fr;color:#514d43}.work-output-options input{width:auto;margin:0}.cloud-work-note{margin:0;padding:10px 12px;border-radius:9px;color:#6e5a00;background:#fff4be;font-size:11px}
.project-form input:focus,.project-form textarea:focus,.project-form select:focus{border-color:var(--yellow-dark);box-shadow:0 0 0 3px rgba(255,196,0,.16)}
.project-actions{display:flex;align-items:center;flex-wrap:wrap;margin:20px 0 15px;gap:8px}
.danger-link{margin-left:auto;padding:8px 10px;border:0;color:var(--danger);background:none}
.project-resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.project-resource-grid>div{padding:14px;border:1px solid var(--line);border-radius:13px;background:#fcfbf7}
.project-resource-grid h3{margin:0 0 10px;font-size:13px}
.resource-list{display:grid;max-height:210px;overflow:auto;gap:6px}
.resource-item{display:flex;align-items:center;justify-content:space-between;padding:9px;border:1px solid #ece8dc;border-radius:9px;background:white;font-size:11px;gap:8px}
.resource-item button{padding:4px 7px;border:0;border-radius:6px;background:#f3f0e7;font-size:10px}
.work-view{min-height:100%;padding:48px max(24px,calc((100% - 1050px)/2));background:radial-gradient(circle at 90% 5%,rgba(255,196,0,.18),transparent 25%),#f7f5ee}
.work-hero{display:flex;align-items:flex-end;justify-content:space-between;padding:30px;border-radius:24px;color:#fff;background:#151515;box-shadow:0 18px 50px rgba(0,0,0,.15);gap:20px}
.work-hero h1{margin:7px 0;font-size:32px}.work-hero p{margin:0;color:#aaa}
.work-summary{display:grid;margin:18px 0;grid-template-columns:repeat(4,1fr);gap:10px}
.work-stat{padding:14px;border:1px solid #e3ddcd;border-radius:13px;background:#fff}.work-stat strong{display:block;font-size:23px}.work-stat span{color:var(--muted);font-size:10px}
.work-list{display:grid;gap:10px}
.work-card{padding:18px;border:1px solid #dfd8c7;border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(30,25,10,.04)}
.work-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.work-card h3{margin:0 0 4px}.work-card p{margin:7px 0;color:#5f5b50;line-height:1.6}
.work-meta{color:#928d80;font-size:10px}.work-status{padding:5px 8px;border-radius:20px;background:#eee;font-size:10px}.work-status.completed{color:#176a45;background:#e6f7ee}.work-status.running{color:#765800;background:#fff3bd}.work-status.failed{color:#963044;background:#fff0f2}
.work-result{margin-top:13px;padding:14px;border-left:4px solid var(--yellow);border-radius:8px;background:#fffaf0;line-height:1.7}
.work-progress-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;color:#777;font-size:10px}.work-progress{height:7px;margin-top:5px;overflow:hidden;border-radius:10px;background:#eee9dc}.work-progress i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#d79a00,var(--yellow));transition:width .35s}.work-steps{display:grid;margin-top:10px;gap:5px}.work-step{display:flex;align-items:center;color:#777;font-size:10px;gap:7px}.work-step::before{content:'○';color:#aaa}.work-step.completed::before{content:'✓';color:#198754}.work-step.running::before{content:'●';color:#d39700}.work-step.failed::before{content:'!';color:#b02a37}.work-files{display:flex;flex-wrap:wrap;margin-top:12px;gap:7px}.work-file{display:inline-flex;align-items:center;padding:8px 10px;border:1px solid #d9d1bd;border-radius:9px;color:#322c1d;background:#fff;text-decoration:none;font-size:10px}
.work-card-actions{display:flex;justify-content:flex-end;margin-top:10px;gap:7px}.work-card-actions button{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:white;font-size:10px}
.workflow-view { min-height: 100%; padding: 42px max(24px,calc((100% - 1120px)/2)) 56px; background: radial-gradient(circle at 92% 2%,rgba(255,196,0,.21),transparent 24%),linear-gradient(180deg,#f8f6ef,#f3f0e6); }
.workflow-hero { position: relative; overflow: hidden; padding: 34px 38px; border-radius: 26px; color: white; background: #151515; box-shadow: 0 18px 48px rgba(0,0,0,.16); }
.workflow-hero::after { position: absolute; top: -75px; right: -40px; width: 260px; height: 260px; content: ""; border: 45px solid rgba(255,196,0,.1); border-radius: 50%; }
.workflow-hero > div:first-child { position: relative; z-index: 1; max-width: 720px; }
.workflow-hero h1 { margin: 8px 0 9px; font-size: clamp(28px,3.2vw,42px); letter-spacing: -.045em; }
.workflow-hero p { max-width: 700px; margin: 0; color: #aaa; line-height: 1.7; }
.workflow-hero-path { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; margin-top: 27px; gap: 8px; }
.workflow-hero-path span { display: flex; align-items: center; gap: 7px; color: #e7e4da; font-size: 11px; }
.workflow-hero-path span b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; color: #151515; background: var(--yellow); font-size: 10px; }
.workflow-hero-path i { margin: 0 4px; color: #625a3b; font-style: normal; }
.workflow-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 28px 3px 14px; gap: 16px; }
.workflow-section-head > div { display: flex; flex-direction: column; gap: 4px; }
.workflow-section-head span { color: #a27800; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.workflow-section-head strong { font-size: 17px; }
.workflow-section-head small { color: #8b877c; font-size: 10px; }
.workflow-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.workflow-card { position: relative; display: flex; min-height: 276px; overflow: hidden; flex-direction: column; padding: 23px; border: 1px solid #ddd7c7; border-radius: 19px; background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(39,31,7,.05); transition: transform .18s,border-color .18s,box-shadow .18s; }
.workflow-card:hover { transform: translateY(-2px); border-color: #d7b83b; box-shadow: 0 14px 30px rgba(72,54,0,.09); }
.workflow-card.featured { border-color: #e0bd34; background: linear-gradient(145deg,#fff,#fff9df); }
.workflow-card.featured::after { position: absolute; top: 17px; right: -30px; padding: 5px 34px; transform: rotate(34deg); content: "推薦"; color: #191919; background: var(--yellow); font-size: 9px; font-weight: 850; }
.workflow-card.featured-secondary { border-color: #d6bf67; background: linear-gradient(145deg,#fff,#fffaf0); }
.workflow-card-top { display: flex; align-items: center; gap: 9px; }
.workflow-number { color: #c18d00; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.workflow-tag { padding: 4px 7px; border-radius: 20px; color: #666154; background: #f1eee6; font-size: 9px; }
.workflow-card h2 { margin: 17px 0 7px; font-size: 21px; letter-spacing: -.035em; }
.workflow-card > p { margin: 0; color: #706c62; font-size: 12px; line-height: 1.65; }
.workflow-io { display: grid; margin: 17px 0; padding: 11px 0; border-top: 1px solid #ebe7dc; border-bottom: 1px solid #ebe7dc; grid-template-columns: 1fr 1fr; gap: 10px; }
.workflow-io span { color: #3f3b31; font-size: 10px; font-weight: 750; }
.workflow-io small { display: block; margin-bottom: 3px; color: #a09a8b; font-size: 8px; font-weight: 650; }
.workflow-card-actions { display: flex; margin-top: auto; gap: 7px; }
.workflow-card-actions button { min-height: 34px; padding: 7px 11px; border-radius: 9px; font-size: 10px; font-weight: 800; }
.workflow-start { flex: 1; border: 0; color: #171717; background: var(--yellow); }
.workflow-start:hover { background: #ffd12d; }
.workflow-cloud { flex: 1; border: 1px solid #d8cfb5; color: #514b3b; background: #fff; }
.workflow-cloud:hover { border-color: #c29b0a; color: #755900; background: #fffdf5; }
.workflow-guide-modal { width: min(720px,calc(100% - 30px)); padding: 0; overflow: hidden; }
.workflow-guide-modal[open] { display: flex; height: min(760px,calc(100dvh - 32px)); max-height: calc(100dvh - 32px); flex-direction: column; }
.workflow-guide-head { flex: 0 0 auto; padding: 25px 28px 20px; color: #fff; background: #171717; }
.workflow-guide-head .eyebrow { color: var(--yellow); }
.workflow-guide-head h2 { font-size: 24px; }
.workflow-guide-head p { color: #999; }
.workflow-guide-head .icon-button { color: #aaa; }
.workflow-guide-progress { flex: 0 0 auto; padding: 15px 28px 0; background: #fff; }
.workflow-guide-progress > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #8c877b; font-size: 10px; }
.workflow-guide-progress > div strong { color: #9a7200; }
.workflow-guide-progress > i { display: block; height: 6px; overflow: hidden; border-radius: 10px; background: #eee9dc; }
.workflow-guide-progress > i b { display: block; width: 20%; height: 100%; border-radius: 10px; background: linear-gradient(90deg,#d59900,var(--yellow)); transition: width .25s ease; }
#workflow-guide-form { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden; padding: 23px 28px 27px; }
.workflow-question-panel { display: grid; min-height: 0; flex: 1 1 auto; overflow: auto; grid-template-columns: 48px 1fr; gap: 12px 14px; overscroll-behavior: contain; }
.workflow-assistant-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #171717; background: var(--yellow); box-shadow: 0 7px 18px rgba(198,149,0,.2); font-size: 11px; font-weight: 900; }
.workflow-question-copy { padding-top: 2px; }
.workflow-question-copy span,.workflow-review-intro span { color: #a07800; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.workflow-question-copy h3,.workflow-review-intro h3 { margin: 4px 0 6px; font-size: 19px; letter-spacing: -.02em; }
.workflow-question-copy p,.workflow-review-intro p { margin: 0; color: #817c70; font-size: 11px; line-height: 1.6; }
.workflow-question-input { grid-column: 2; }
.workflow-question-input input,.workflow-question-input select,.workflow-question-input textarea { width: 100%; border: 1px solid #ddd5c1; border-radius: 12px; padding: 13px 14px; outline: none; color: #27241d; background: #fffdf7; line-height: 1.55; }
.workflow-question-input input:focus,.workflow-question-input select:focus,.workflow-question-input textarea:focus { border-color: #d0a20b; box-shadow: 0 0 0 3px rgba(255,196,0,.14); }
.workflow-guide-actions { position: relative; z-index: 1; display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; margin-top: 18px; padding-top: 17px; border-top: 1px solid #ece8dd; background: #fff; gap: 9px; }
.workflow-guide-actions #workflow-guide-back { margin-right: auto; }
.workflow-review-intro { padding-left: 3px; }
.workflow-review-panel { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.workflow-review-list { display: grid; min-height: 0; max-height: none; flex: 1 1 auto; overflow: auto; margin-top: 17px; border: 1px solid #e5dfd0; border-radius: 14px; background: #fffdf8; overscroll-behavior: contain; }
.workflow-review-list > div { display: grid; padding: 12px 14px; border-bottom: 1px solid #eee9dd; gap: 4px; }
.workflow-review-list > div:last-child { border-bottom: 0; }
.workflow-review-list span { color: #8b867a; font-size: 9px; }
.workflow-review-list strong { color: #2e2a21; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.workflow-review-list .workflow-review-work { grid-template-columns: 1fr auto; padding: 15px 14px; border-bottom-color: #e4c961; background: #fff7d3; }
.workflow-review-list .workflow-review-work span { grid-column: 1/-1; color: #8a6700; font-weight: 800; }
.workflow-review-list .workflow-review-work strong { font-size: 15px; }
.workflow-review-list .workflow-review-work small { align-self: center; padding: 4px 7px; border-radius: 20px; color: #5c4800; background: rgba(255,255,255,.75); font-size: 9px; }
.empty-state{padding:38px;border:1px dashed #d8d0bc;border-radius:16px;color:var(--muted);background:rgba(255,255,255,.55);text-align:center}
.usage-card { margin: 20px 0; padding: 15px; border: 1px solid #e7dba8; border-radius: 14px; background: #fffaf0; }
.usage-card > div:first-child { display: flex; justify-content: space-between; font-size: 12px; }
.progress { overflow: hidden; height: 7px; margin: 10px 0 7px; border-radius: 10px; background: #ece7d9; }
.progress i { display: block; width: 0; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--yellow-dark), var(--yellow)); }
.usage-card small, .section-head p { color: var(--muted); font-size: 11px; }
.section-head h3 { margin: 0; }
.section-head p { margin: 4px 0; }
.inline-form { display: grid; margin: 13px 0; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.user-list { margin-top: 12px; border-top: 1px solid var(--line); }
.user-row { display: grid; align-items: center; padding: 13px 3px; border-bottom: 1px solid var(--line); grid-template-columns: 1fr auto auto; gap: 10px; }
.user-row > div { display: flex; flex-direction: column; }
.user-row > div:first-child { min-width:0;overflow-wrap:anywhere; }
.user-row > .user-actions { flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:6px; }
.user-row .user-actions button { min-height:36px;white-space:nowrap; }
@media (max-width: 600px) {
  .user-row { grid-template-columns:minmax(0,1fr) auto; }
  .user-row > .user-actions { grid-column:1 / -1; }
  .user-row .user-actions button { min-height:44px;font-size:13px; }
}
.user-row small { color: var(--muted); }
.role-badge { padding: 4px 7px; border-radius: 20px; color: #694f00; background: var(--yellow-soft); font-size: 10px; }
.user-row button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 11px; }
.user-row button.danger { color: var(--danger); }
.log-section-head { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.secondary-button { padding: 8px 11px; border: 1px solid #ddbd42; border-radius: 9px; color: #6b5200; background: #fffdf4; font-size: 11px; font-weight: 750; }
.secondary-button:hover { background: var(--yellow-soft); }
.table-wrap { width: 100%; overflow: auto; }
.company-log-wrap { max-height: 280px; margin-top: 10px; border: 1px solid var(--line); border-radius: 11px; }
.log-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.log-table th { position: sticky; top: 0; padding: 9px 10px; color: #817b6c; background: #f8f6ef; text-align: left; white-space: nowrap; }
.log-table td { padding: 9px 10px; border-top: 1px solid #efede5; vertical-align: top; }
.log-table .empty { padding: 24px; color: var(--muted); text-align: center; }
.toast { position: fixed; z-index: 20; bottom: 26px; left: 50%; padding: 10px 15px; transform: translate(-50%,20px); border-radius: 10px; color: white; background: var(--black); box-shadow: 0 8px 24px rgba(0,0,0,.2); font-size: 12px; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
.launch-notice {
  position: fixed;
  z-index: 30;
  top: 18px;
  left: 50%;
  display: flex;
  width: min(660px, calc(100% - 30px));
  align-items: center;
  padding: 12px 15px;
  transform: translateX(-50%);
  gap: 12px;
  border: 1px solid #d4a800;
  border-radius: 12px;
  color: #191500;
  background: #fff3b8;
  box-shadow: 0 10px 30px rgba(67,51,0,.18);
  font-size: 12px;
}
.launch-notice strong { flex: none; }
.launch-notice span { color: #695a22; }
.mobile-only { display: none; }

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; width: 282px; transform: translateX(-100%); box-shadow: var(--shadow); transition: .25s; }
  .sidebar.open { transform: translateX(0); }
  .project-list { max-height: min(176px,24dvh); }
  .conversation-list { min-height: 84px; flex: 1 1 240px; }
  .history-search input { font-size: 16px; }
  .sidebar > .sidebar-brand, .sidebar > .new-chat, .sidebar > .workflow-nav, .sidebar > .work-nav, .sidebar > .history-label { flex-shrink: 0; }
  .mobile-only { display: block; }
  .topbar { padding: 0 15px; }
  .topbar .mobile-only { margin-right: 8px; }
  .topbar > div:first-of-type { margin-right: auto; }
  .messages { padding: 28px 16px; }
  .composer-wrap { padding: 9px 12px; }
  .suggestions { grid-template-columns: 1fr; }
  .welcome { margin-top: 2vh; }
  .welcome h2 { font-size: 23px; }
  .auth-brand { top: 20px; left: 22px; }
  .auth-card { padding: 31px 24px; }
  .auth-card.setup form { grid-template-columns: 1fr; }
  .auth-card.setup #contact-email-row, .auth-card.setup #auth-submit { grid-column: auto; }
  .auth-provider { position: relative; bottom: auto; left: auto; margin-top: 16px; padding: 5px 11px 5px 7px; }
  .auth-provider img { width: 58px; height: 58px; }
  .message.user .message-body { max-width: 90%; }
  .inline-form { grid-template-columns: 1fr; }
  .personal-memory-modal { width:calc(100% - 20px);padding:19px 16px; }
  .memory-summary { grid-template-columns:1fr 1fr; }
  .memory-summary > button { grid-column:1/-1;min-height:44px; }
  .memory-card-actions button { min-height:40px; }
  .project-resource-grid,.work-summary{grid-template-columns:1fr}
  .work-view{padding:20px 14px}.work-hero{align-items:flex-start;flex-direction:column;padding:22px}.work-hero h1{font-size:25px}
  .workflow-view { padding: 18px 13px 32px; }
  .workflow-hero { padding: 25px 21px; border-radius: 20px; }
  .workflow-hero h1 { font-size: 28px; }
  .workflow-hero-path { align-items: flex-start; flex-direction: column; }
  .workflow-hero-path i { display: none; }
  .workflow-section-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-card { min-height: 0; padding: 20px; }
  .workflow-card-actions { flex-direction: column; }
  .workflow-guide-head { padding: 21px 19px 17px; }
  .workflow-guide-head h2 { font-size: 21px; }
  .workflow-guide-progress { padding: 13px 19px 0; }
  #workflow-guide-form { padding: 19px; }
  .workflow-question-panel { grid-template-columns: 38px 1fr; gap: 10px; }
  .workflow-assistant-mark { width: 36px; height: 36px; border-radius: 11px; }
  .workflow-question-input { grid-column: 1/-1; }
  .workflow-guide-actions { flex-wrap: wrap; }
  .workflow-guide-actions #workflow-guide-back { margin-right: 0; }
  .workflow-guide-actions button { flex: 1; white-space: nowrap; }
  .status-pill { display: none; }
  .launch-notice { top: 10px; align-items: flex-start; flex-direction: column; gap: 3px; }
}
.image-reference-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #675617; }
.image-reference-control select { max-width: 100%; min-width: 0; font-size: 16px; border: 1px solid #dbc76b; border-radius: 8px; padding: 6px; background: #fff; color: #403719; }