* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font: 14px/1.5 -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #1f2329;
    background: #f3f5f8;
}
.hidden { display: none !important; }
code, .mono, textarea.code { font-family: Consolas, "SFMono-Regular", Menlo, monospace; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 14px; border: 1px solid #d0d5dd; border-radius: 6px;
    background: #fff; color: #1f2329; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.btn:hover { border-color: #4f7cff; color: #3366ff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: #3366ff; border-color: #3366ff; color: #fff; }
.btn.primary:hover { background: #2952cc; }
.btn.danger { color: #d93026; border-color: #f0b8b3; }
.btn.danger:hover { background: #fdecea; }
.btn.small { padding: 3px 9px; font-size: 12px; }
.btn.block { width: 100%; }

input, select, textarea {
    font: inherit; padding: 6px 9px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; color: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #3366ff; box-shadow: 0 0 0 2px rgba(51, 102, 255, .15); }
input[type="checkbox"] { width: 16px; height: 16px; padding: 0; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > span { font-size: 13px; color: #4e5969; }
.field small { color: #86909c; font-size: 12px; }
.field.inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.field.inline small { flex-basis: 100%; }
.form-error { color: #d93026; min-height: 1.5em; margin: 6px 0 0; white-space: pre-wrap; }

.login-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 340px; }
.login-card h1 { font-size: 20px; margin: 0 0 20px; text-align: center; }

.card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }

.topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 16px;
    padding: 0 20px; height: 56px; background: #fff; border-bottom: 1px solid #e5e6eb;
}
.brand { font-weight: 600; font-size: 16px; white-space: nowrap; }
.tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
    border: 0; background: transparent; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #4e5969; white-space: nowrap;
}
.tabs button:focus { outline: none; }
.tabs button:focus-visible { box-shadow: 0 0 0 2px rgba(51, 102, 255, .35); }
.tabs button:hover { background: #f2f3f5; }
.tabs button.active { background: #e8efff; color: #3366ff; font-weight: 600; }
.user { display: flex; align-items: center; gap: 10px; color: #4e5969; white-space: nowrap; }

.content { padding: 20px 24px 40px; max-width: 1400px; margin: 0 auto; }
.content h3 { margin: 24px 0 10px; font-size: 15px; }
.muted { color: #86909c; }
.hint { color: #86909c; font-size: 12px; margin: 4px 0 12px; }
.loading { padding: 40px; text-align: center; color: #86909c; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.stat { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.stat .label { color: #86909c; font-size: 12px; }
.stat .value { font-size: 22px; font-weight: 600; margin-top: 4px; }
.stat.warn .value { color: #e8780c; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid #d0d5dd; border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-right: 1px solid #d0d5dd; background: #fff; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.seg button:last-child { border-right: 0; }
.seg button.active { background: #3366ff; color: #fff; }

.table-wrap { background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #f0f1f3; vertical-align: top; }
th { background: #fafbfc; color: #4e5969; font-weight: 600; font-size: 13px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.actions { min-width: 170px; }
td.col-code { min-width: 200px; }
.nowrap { white-space: nowrap; }
td.actions .btn, td.actions select { margin: 0 4px 4px 0; }
td .sub { color: #86909c; font-size: 12px; }
td code { user-select: all; word-break: break-all; font-size: 12px; }
.empty { padding: 30px; text-align: center; color: #86909c; }
.error-text { color: #d93026; font-size: 12px; max-width: 260px; word-break: break-all; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.tag.green { background: #e8f7ee; color: #1a7f45; }
.tag.orange { background: #fff3e6; color: #c25e00; }
.tag.red { background: #fdecea; color: #c62f25; }
.tag.gray { background: #f2f3f5; color: #6b7280; }
.tag.blue { background: #e8efff; color: #3366ff; }

.progress { width: 120px; height: 6px; background: #f0f1f3; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.progress > div { height: 100%; background: #3366ff; }
.progress.full > div { background: #d93026; }

.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 12px; color: #4e5969; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 20px; }
.section-head { margin: 24px 0 0; }
.section-head h3 { margin: 0; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.thumb { background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.thumb img { display: block; width: 100%; aspect-ratio: 10 / 3; object-fit: cover; border-radius: 6px; background: #f2f3f5; }
.thumb-meta { color: #86909c; font-size: 12px; margin: 8px 0 6px; }
.thumb-actions { display: flex; gap: 6px; }
.key-box { width: 100%; min-height: 70px; resize: vertical; font-size: 12px; word-break: break-all; }

dialog { border: 0; border-radius: 12px; padding: 0; width: 460px; max-width: calc(100vw - 32px); box-shadow: 0 20px 50px rgba(16, 24, 40, .25); }
dialog.wide { width: 900px; }
dialog::backdrop { background: rgba(15, 23, 42, .45); }
dialog form { padding: 20px 22px; max-height: calc(100vh - 60px); overflow-y: auto; }
dialog h2 { margin: 0 0 16px; font-size: 17px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
dialog textarea.code { width: 100%; min-height: 360px; font-size: 12px; white-space: pre; tab-size: 4; }

.toast {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 100;
    background: #1f2329; color: #fff; padding: 9px 18px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); max-width: 80vw;
}
.toast.error { background: #d93026; }
.toast.success { background: #1a7f45; }