:root { color-scheme: light; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; color: #242424; background: #f5f5f4; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { border: 1px solid #242424; border-radius: 5px; padding: 9px 14px; color: white; background: #242424; cursor: pointer; }
button:hover { background: #111; }
button.secondary, button.quiet { color: #444; background: #fff; border-color: #d6d6d3; }
button.danger { color: #a6382d; background: #fff; border-color: #e4c0bc; }
button.danger:hover { background: #fff4f2; }
button.quiet { width: 100%; margin-top: auto; }
.hidden { display: none !important; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: #111; border-radius: 4px; font-weight: 800; }
.login-shell { display: grid; min-height: 100vh; place-items: center; }
.login-panel { width: min(390px, calc(100vw - 32px)); padding: 28px; background: #fff; border: 1px solid #ddd; border-radius: 7px; box-shadow: 0 8px 28px #00000012; }
h1 { margin: 24px 0 3px; font-size: 23px; }
h2 { margin: 0 0 12px; font-size: 17px; }
p { margin: 4px 0 16px; color: #777; line-height: 1.6; }
label { display: grid; gap: 5px; color: #666; font-size: 13px; }
input, select, textarea { min-width: 0; padding: 9px 10px; border: 1px solid #d2d2cf; border-radius: 4px; background: #fff; }
textarea { resize: vertical; line-height: 1.55; }
.login-panel label { margin-top: 14px; }
.login-panel button { width: 100%; margin-top: 20px; }
.error { display: block; min-height: 20px; margin-top: 12px; color: #b42318; }
.app-shell { display: grid; min-height: 100vh; grid-template-columns: 210px 1fr; }
aside { display: flex; flex-direction: column; gap: 22px; padding: 18px; border-right: 1px solid #ddd; background: #fff; }
nav { display: grid; gap: 5px; }
.nav-button { width: 100%; border-color: transparent; color: #555; background: transparent; text-align: left; }
.nav-button:hover, .nav-button.active { border-color: #e1e1de; color: #222; background: #f0f0ee; }
.content { padding: 24px 30px 40px; overflow: hidden; }
header, .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
header h1 { margin: 0; }
.gateway-ok { padding: 6px 10px; color: #24763c; border: 1px solid #b7d9c0; border-radius: 999px; background: #edf8ef; font-size: 13px; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.stats article, .panel { padding: 16px; border: 1px solid #dededb; border-radius: 7px; background: #fff; }
.stats span { display: block; color: #777; font-size: 13px; }
.stats strong { display: block; margin-top: 11px; font-size: 26px; }
.panel { margin-bottom: 14px; }
.form-grid { display: grid; align-items: end; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; }
.model-form { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.provider-form { grid-template-columns: 1.1fr 1.7fr 1.5fr .6fr .8fr .8fr; }
.check { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; }
.check input { width: auto; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th, td { padding: 10px 8px; border-bottom: 1px solid #eeeeeb; white-space: nowrap; }
th { color: #777; font-weight: 500; }
tr:last-child td { border-bottom: 0; }
.detail-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
.detail-grid.two { grid-template-columns: 1fr 1fr; }
.stack { display: grid; gap: 10px; }
.actions { display: flex; gap: 8px; margin-top: 16px; }
.row-actions { display: flex; gap: 7px; }
.secret { padding: 10px; overflow-wrap: anywhere; white-space: pre-wrap; color: #235b32; border: 1px solid #bad4bf; border-radius: 4px; background: #f2faf3; }
.skill-list { display: grid; gap: 9px; }
.skill-list label { display: flex; align-items: center; gap: 7px; }
.muted { color: #999; }
.form-result { min-height: 20px; margin: 12px 0 0; color: #24763c; font-size: 13px; }
.form-result.error { color: #b42318; }
.knowledge-layout { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); gap: 14px; }
.query-test { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eeeeeb; }
.query-result { display: grid; gap: 10px; margin-top: 12px; }
.query-result article { padding: 11px; border: 1px solid #e5e5e2; border-radius: 5px; background: #fafaf8; }
.query-result article p { margin: 7px 0 0; white-space: pre-wrap; }
.ticket-table th, .ticket-table td { vertical-align: top; }
.ticket-long { max-width: 360px; white-space: normal; line-height: 1.55; }
.ticket-long pre { max-height: 180px; margin: 0; overflow: auto; white-space: pre-wrap; color: #555; font-family: inherit; }
.ticket-status { min-width: 96px; }
.ticket-priority { width: 78px; }
.ticket-filter { min-width: 120px; padding: 9px 10px; border: 1px solid #d2d2cf; border-radius: 4px; background: #fff; }
.ticket-note { min-width: 180px; max-width: 240px; white-space: normal; line-height: 1.45; }
.ticket-history-modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: #00000055; z-index: 20; }
.ticket-history-panel { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; margin: 0; }
.ticket-history-item { padding: 12px; border: 1px solid #e5e5e2; border-radius: 5px; background: #fafaf8; }
.ticket-history-item strong { display: block; margin-bottom: 4px; }
@media (max-width: 960px) { .stats { grid-template-columns: repeat(2, 1fr); } .detail-grid, .detail-grid.two { grid-template-columns: 1fr; } .form-grid, .model-form { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .app-shell { grid-template-columns: 1fr; } aside { gap: 12px; border-right: 0; border-bottom: 1px solid #ddd; } aside .quiet { width: auto; } nav { display: flex; flex-wrap: wrap; } .content { padding: 18px; } }