:root {
  color-scheme: light;
  --ink:#172633; --muted:#556575; --navy:#102d47; --blue:#1b5f91;
  --line:#dce5eb; --bg:#f1f5f8; --white:#fff; --green:#155b51;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--bg);
}
* {box-sizing:border-box}
body {margin:0; font-size:15px; line-height:1.6}
a {color:var(--blue); text-decoration:none}
a:hover {text-decoration:underline}
button,input,select,textarea {font:inherit}
button,.button {display:inline-flex; align-items:center; justify-content:center; padding:8px 15px; min-height:42px; border:1px solid #b8cad7; border-radius:7px; background:white; color:var(--navy); cursor:pointer; text-decoration:none}
button:hover,.button:hover {background:#eaf2f8; text-decoration:none}
.primary {background:var(--navy); border-color:var(--navy); color:white}
.primary:hover {background:#1a496c; color:white}
button:disabled {opacity:.55; cursor:wait}
:focus-visible {outline:3px solid #2c82bd; outline-offset:3px}
.mast {background:#fff; border-bottom:1px solid var(--line)}
.bar {max-width:1160px; margin:auto; padding:13px 24px; display:flex; align-items:center; gap:22px}
.brand {display:flex; align-items:center; gap:10px; font-weight:700; color:var(--navy); white-space:nowrap}
.logo {background:var(--navy); color:#fff; display:grid; place-items:center; width:34px; height:34px; border-radius:7px; font-weight:750}
nav {display:flex; gap:16px; flex:1}
nav a {color:var(--muted); white-space:nowrap}
nav a[aria-current] {color:var(--blue); font-weight:700}
.account {display:flex; align-items:center; gap:10px; color:var(--muted); margin-left:auto; font-size:13px}
.account button {min-height:34px; padding:4px 9px}
main {max-width:1160px; margin:auto; padding:27px 24px 64px}
.hero {background:var(--navy); color:white; padding:32px; border-radius:12px; display:flex; justify-content:space-between; align-items:center; gap:20px}
.hero p {color:#d3e4ef; margin:6px 0 0}
.hero .button {border-color:#c1d9e9; background:#f6fbff; color:var(--navy); white-space:nowrap}
h1,h2,h3,p {margin-top:0}
h1 {font-size:clamp(25px,4vw,36px); line-height:1.25; margin-bottom:9px}
h2 {font-size:20px; margin:25px 0 10px}
h3 {font-size:16px; margin:0}
.muted {color:var(--muted)}
.workspace {max-width:920px; margin:auto}
.workspace-header {display:flex; justify-content:space-between; align-items:center; gap:16px; margin:5px 0 20px}
.workspace-header h1 {font-size:clamp(23px,4vw,29px); margin:0}
.workspace-header .button {min-height:36px; padding:5px 13px; font-size:14px; white-space:nowrap}
.service-group {background:#fff; border:1px solid #e1e7ec; border-radius:12px; padding:18px 24px 19px; margin-bottom:14px}
.service-group h2 {font-size:16px; margin:0 0 8px}
.service-grid {display:grid; grid-template-columns:repeat(4,minmax(0,112px)); gap:6px; list-style:none; margin:0; padding:0}
.service-tile {display:flex; align-items:center; flex-direction:column; gap:8px; height:100%; padding:10px 4px; border-radius:9px; color:var(--ink); text-align:center}
.service-tile:hover {background:#f2f6fc; text-decoration:none}
.service-icon {display:grid; place-items:center; width:52px; height:52px; border-radius:12px; color:#fff; background:#3370db}
.service-icon svg {width:27px; height:27px}
.service-icon.orange {background:#c85c2b}
.service-icon.purple {background:#7555cb}
.service-icon.teal {background:#188173}
.service-icon.violet {background:#5c60d1}
.service-icon.cyan {background:#1c78a4}
.service-icon.pink {background:#bf517b}
.service-icon.amber {background:#ad690d}
.service-icon.green {background:#428052}
.service-label {font-size:14px; font-weight:500; line-height:1.4}
.panel {background:white; border:1px solid var(--line); border-radius:10px; padding:21px; margin-top:15px}
.narrow {max-width:740px}
.actionbar {display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.actionbar select {width:auto}
.field {display:block; margin-bottom:15px; font-weight:600}
.field span {display:block; margin-bottom:5px}
input,select,textarea {width:100%; border:1px solid #b4c6d3; border-radius:6px; padding:9px; color:var(--ink); background:white}
textarea {resize:vertical; min-height:95px}
table {width:100%; border-collapse:collapse; font-size:14px}
th,td {text-align:left; padding:10px 9px; border-bottom:1px solid var(--line)}
th {color:var(--muted); font-weight:600; background:#f6f9fb; white-space:nowrap}
tr:last-child td {border-bottom:0}
.scroll {overflow-x:auto}
.badge {display:inline-block; padding:2px 8px; border-radius:5px; background:#e6eff5; color:#174761; white-space:nowrap}
.badge.resolved {background:#e5f5ef; color:var(--green)}
.badge.need_info {background:#fff0d7; color:#704b11}
dl {display:grid; grid-template-columns:minmax(100px, 1fr) 3fr; gap:8px; margin:0}
dt {color:var(--muted)}
dd {margin:0; overflow-wrap:anywhere; white-space:pre-wrap}
.timeline {padding-left:20px; margin-bottom:0}
.timeline li {padding:0 0 14px 4px; overflow-wrap:anywhere}
.timeline li:last-child {padding-bottom:0}
.timeline p {white-space:pre-wrap; margin-bottom:0}
#notice {position:fixed; right:22px; bottom:22px; max-width:min(380px, calc(100vw - 44px)); color:#fff; background:var(--navy); border-radius:8px; z-index:2}
#notice:not(:empty) {padding:11px 17px}
@media(max-width:800px) {
  .bar {flex-wrap:wrap; gap:8px 12px}
  nav {order:3; flex-basis:100%}
}
@media(max-width:480px) {
  .bar,main {padding-left:15px; padding-right:15px}
  .hero {padding:20px; align-items:flex-start; flex-direction:column}
  .workspace-header {margin-top:0; margin-bottom:14px}
  .service-group {padding:13px 9px 11px}
  .service-group h2 {margin-left:5px}
  .service-grid {grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px}
  .service-icon {width:44px; height:44px; border-radius:10px}
  .service-icon svg {width:23px; height:23px}
  .service-label {font-size:12px}
  .panel {padding:15px}
  .account {font-size:12px}
}

:root {
  --ink:#172743; --muted:#536480; --navy:#192d59; --blue:#245dc9;
  --line:#dfe7f3; --bg:#f3f6fb;
}
body {min-height:100vh}
.mast {position:sticky; top:0; z-index:5; box-shadow:0 1px 5px #20396507}
.logo {background:#255fce}
main {padding-bottom:104px}
.workspace {max-width:1112px}
.workspace-hero {position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center;
  min-height:223px; padding:29px 36px; border-radius:18px; color:white;
  background:linear-gradient(109deg,#172a54 8%,#203f81 67%,#2c66ca 100%)}
.workspace-hero-copy {position:relative; z-index:1; width:min(100%,570px)}
.workspace-hero h1 {margin-bottom:7px; letter-spacing:.02em}
.workspace-hero p {color:#dce9ff; margin-bottom:20px}
.hero-search {display:flex; align-items:stretch; padding:4px; max-width:470px; border-radius:10px; background:#fff}
.hero-search input {min-width:0; border:0; padding:9px 11px; border-radius:7px}
.hero-search button {min-height:36px; padding:6px 13px; background:#eaf2ff; border:0; color:#1d50b2; white-space:nowrap}
.hero-search button:hover {background:#d9e8ff}
.hero-art {position:absolute; right:0; top:0; bottom:0; width:46%; z-index:-1;
  background:repeating-linear-gradient(90deg,transparent 0 33px,#c6dcff16 34px 35px),
    repeating-linear-gradient(0deg,transparent 0 33px,#c6dcff16 34px 35px);
  mask-image:linear-gradient(90deg,transparent,#000 28%)}
.hero-art span {position:absolute; border:1px solid #b9d6ff7a; border-radius:16px; background:#9cc5ff19; transform:rotate(-17deg)}
.hero-art span:nth-child(1) {width:160px;height:132px;right:83px;top:46px}
.hero-art span:nth-child(2) {width:115px;height:96px;right:58px;top:69px;background:#91baff38}
.hero-art span:nth-child(3) {width:60px;height:60px;right:213px;top:52px;background:#4a91fa55}
.hero-art span:nth-child(4) {width:23px;height:23px;right:51px;top:46px;border-radius:6px;background:#c7ddff82}
.workspace-header {margin:20px 0 11px}
.workspace-header h2 {margin:0; font-size:19px}
.workspace-header .button {background:#fff}
.service-group {padding:14px 22px 13px; border-color:#e0e8f2; box-shadow:0 1px 3px #1f356404}
.service-group h2 {color:#263b59}
.service-grid {grid-template-columns:repeat(4,minmax(0,112px))}
.service-tile {padding:8px 4px}
.service-icon {box-shadow:inset 0 -8px 16px #0f245218}
.form-help {margin:0 0 10px}
.form-help button {min-height:34px; color:var(--blue); background:#eaf2ff; border-color:#d9e7ff}
.draft-hint {padding:10px 13px; background:#e9f2ff; color:#214c8c; border-radius:8px; max-width:740px}

#assistant {position:fixed; z-index:10; right:max(22px,env(safe-area-inset-right)); bottom:max(21px,env(safe-area-inset-bottom))}
.assistant-launch {display:flex; flex-direction:column; gap:4px; border:0; background:none; padding:0; min-width:60px; color:#214b96; font-weight:700}
.assistant-launch:hover {background:none}
.assistant-launch .service-icon {border-radius:50%; width:57px; height:57px; background:#235ecb; box-shadow:0 8px 22px #1b4cab4d; border:2px solid #fff}
.assistant-launch .service-icon svg {width:28px;height:28px}
.assistant-launch:hover .service-icon {background:#164caf}
.launch-label {font-size:13px; padding:1px 8px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 2px 5px #253b5610}
.assistant-panel {position:absolute; bottom:89px; right:0; display:flex; flex-direction:column;
  width:min(402px,calc(100vw - 32px)); height:min(547px,calc(100dvh - 121px));
  border:1px solid #d8e3f1; border-radius:17px; overflow:hidden; background:#fff;
  box-shadow:0 16px 54px #1c3b7138}
.chat-header {display:flex; align-items:center; gap:10px; padding:14px 15px; color:#fff; background:linear-gradient(100deg,#1b3264,#2860c3)}
.chat-header .service-icon {background:#ffffff23; width:38px; height:38px; border-radius:10px}
.chat-header .service-icon svg {width:22px;height:22px}
.chat-header h2 {font-size:17px; margin:0}
.chat-header p {margin:0; color:#e0ebff; font-size:12px}
.chat-close {margin-left:auto; min-height:34px; width:34px; padding:0; color:#fff; background:#ffffff15; border-color:#ffffff51; font-size:24px; line-height:1}
.chat-close:hover {background:#ffffff33}
.chat-tabs {display:flex; gap:5px; padding:8px 12px; border-bottom:1px solid #e6edf6}
.chat-tabs button {min-height:33px; padding:4px 11px; border:0; font-size:13px}
.chat-tabs button[aria-pressed="true"] {background:#eaf2ff; color:#2058bf; font-weight:700}
.chat-body {flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:15px 13px; background:#f5f8fc}
.chat-greeting,.chat-answer,.chat-user {width:fit-content; max-width:96%; padding:10px 12px; border-radius:11px; font-size:14px; overflow-wrap:anywhere}
.chat-greeting,.chat-answer {background:#fff; border:1px solid #e0e8f2}
.chat-user {margin:0 0 8px auto; color:#173f8a; background:#e1edff; white-space:pre-wrap}
.chat-answer {margin-bottom:13px}
.chat-answer p {margin:0 0 8px; white-space:pre-wrap}
.chat-samples,.chat-actions {display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.chat-samples button,.chat-actions button,.chat-actions .button,.chat-body>.button {min-height:33px; padding:4px 9px; font-size:12px; text-align:left}
.chat-samples button {color:#2454a8; border-color:#d9e6fa}
.chat-source {color:var(--muted); font-size:12px}
.chat-footer {padding:10px 12px 7px; background:#fff; border-top:1px solid #e6edf6}
.chat-footer small {display:block; color:var(--muted); font-size:11px; margin-top:4px}
.chat-composer {display:flex; gap:6px}
.chat-composer input {min-width:0; font-size:14px}
.chat-composer button {white-space:nowrap}
.chat-ticket {background:#f3f7fd; border-radius:8px; padding:8px 10px; font-size:13px}
.chat-ticket .badge {margin-left:6px}
.chat-ticket>span.muted {display:block; margin:4px 0}
.chat-ticket>p {margin:0}
.chat-progress-row {display:flex; align-items:center; justify-content:space-between; gap:8px; background:white;
  border:1px solid #e3ebf5; padding:9px 10px; margin-bottom:7px; border-radius:8px; font-size:13px}
.chat-progress-row strong,.chat-progress-row small {display:block}
.chat-progress-row small {color:var(--muted)}
.chat-error {color:#9e3130}
#notice {right:95px; bottom:22px; z-index:12}
@media(max-width:600px) {
  .workspace-hero {padding:20px; min-height:174px}
  .workspace-hero p {font-size:13px; margin-bottom:14px}
  .hero-art {width:52%; opacity:.55}
  .workspace-header {margin-top:15px}
  .service-group {padding:10px 8px}
  .service-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
  #assistant {right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom))}
  .assistant-panel {width:min(402px,calc(100vw - 24px)); bottom:80px; height:min(547px,calc(100dvh - 101px))}
  .assistant-launch .service-icon {width:49px;height:49px}
  #notice {right:78px; bottom:14px; max-width:calc(100vw - 100px)}
}
@media(max-width:359px) {
  .service-label {font-size:11px}
  .hero-search input {padding-left:7px; font-size:13px}
}