:root {
  --sf-primary: #3b82f6;
  --sf-primary-hover: #2563eb;
  --sf-sidebar: #fff;
  --sf-sidebar-text: #475569;
  --sf-sidebar-item-hover: #f1f5f9;
  --sf-sidebar-item-active: #eff6ff;
  --sf-text-primary: #1e293b;
  --sf-text-regular: #475569;
  --sf-text-secondary: #64748b;
  --sf-bg: #f1f5f9;
  --sf-border: #e2e8f0;
  --portal-sidebar-width: 200px;
}
.portal { background: var(--sf-bg); color: var(--sf-text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif; font-size: 14px; }
.portal * { box-sizing: border-box; letter-spacing: 0; }
.workspace { min-width: 320px; height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-columns: var(--portal-sidebar-width) minmax(0, 1fr); grid-template-rows: minmax(56px, auto) auto minmax(0, 1fr); }
.workspace .nav { grid-column: 2; grid-row: 1; min-width: 0; margin: 0; height: auto; min-height: 56px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--sf-border); }
.portal-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.portal .nav-title { font-size: 16px; font-weight: 600; color: var(--sf-text-primary); white-space: nowrap; }
.portal .nav-right { gap: 14px; color: var(--sf-text-regular); font-size: 13px; }
.portal .username { color: var(--sf-text-primary); }
.portal-icon-button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 4px; color: #64748b; cursor: pointer; }
.portal-icon-button:hover { color: var(--sf-primary); background: #eff6ff; }
.portal-icon-button svg { width: 18px; height: 18px; }
.workspace .page-layout { display: contents; }
.workspace .side-nav { grid-column: 1; grid-row: 1 / 4; position: relative; inset: auto; align-self: stretch; min-height: 0; width: auto; margin: 0; padding: 64px 8px 12px; border: 0; border-right: 1px solid var(--sf-border); border-radius: 0; box-shadow: none; background: #fff; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2px; overflow-y: auto; }
.portal-brand { position: absolute; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; border-bottom: 1px solid var(--sf-border); }
.portal-brand img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.portal-brand span { font-size: 17px; font-weight: 700; white-space: nowrap; }
.workspace .side-nav-btn { flex: 0 0 40px; width: 100%; min-width: 0; height: 40px; border: 0; padding: 9px 12px; margin: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--sf-sidebar-text); font-size: 14px; position: relative; gap: 10px; white-space: nowrap; }
.workspace .side-nav-btn:hover { background: var(--sf-sidebar-item-hover); color: var(--sf-text-primary); }
.workspace .side-nav-btn.active { background: var(--sf-sidebar-item-active); color: var(--sf-primary); }
.workspace .side-nav-btn.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--sf-primary); }
.workspace .side-nav-btn .tab-icon { border: 0; background: none; color: inherit; width: 18px; height: 18px; }
.tab-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.workspace .side-nav-btn .tab-label { font-weight: 500; }
.workspace.sidebar-collapsed { --portal-sidebar-width: 64px; }
.sidebar-collapsed .side-nav .tab-label, .sidebar-collapsed .portal-brand span { display: none; }
.sidebar-collapsed .side-nav-btn { justify-content: center; padding: 9px; }
.portal .mobile-tab-bar { display: none !important; }
.workspace #announcementBar { grid-column: 2; grid-row: 2; min-width: 0; margin: 0; background: #fffbeb !important; border-bottom-color: #fde68a !important; }
.portal #announcementText { color: #92400e !important; }
.portal .main { width: 100%; min-width: 0; }
.workspace .main { grid-column: 2; grid-row: 3; min-height: 0; padding: 20px; overflow: auto; }
.portal .card { background: #fff; border: 0; border-radius: 0; padding: 20px; margin-bottom: 16px; box-shadow: none; min-width: 0; }
.portal .card-title, .portal .title { color: var(--sf-text-primary); font-size: 16px; font-weight: 600; }
.portal .points-card { background: #fff; border: 1px solid var(--sf-border) !important; border-radius: 6px; margin: 0; align-items: flex-start !important; }
.portal .points-label { font-size: 12px; color: #64748b; }
.portal .points-value { color: var(--sf-text-primary); font-size: 24px; font-variant-numeric: tabular-nums; }
.portal .points-sub { font-size: 12px; color: #64748b; margin-top: 6px; }
.portal input:not([type=checkbox]):not([type=file]), .portal select, .portal textarea { color: var(--sf-text-primary); background: #fff; border: 1px solid #dcdfe6; border-radius: 4px; font-family: inherit; font-size: 14px; min-width: 0; max-width: 100%; caret-color: #1e293b; }
.portal input::placeholder, .portal textarea::placeholder { color: #94a3b8; }
.portal input:focus, .portal select:focus, .portal textarea:focus { border-color: var(--sf-primary); outline: none; }
.portal .form-item label { color: var(--sf-text-regular); font-size: 13px; }
.portal .btn, .portal .page-btn { border-radius: 4px; min-height: 32px; font-weight: 400; box-shadow: none; }
.portal .btn-outline, .portal .page-btn, .agent-page .btn, .agent-brief-page .btn-code { color: var(--sf-text-regular); background: #fff; border: 1px solid #dcdfe6; }
.portal .btn-outline:hover, .portal .page-btn:hover { color: var(--sf-primary); border-color: #93c5fd; background: #eff6ff; }
.portal .btn-primary, .portal .btn-submit, .portal .page-btn.active { color: #fff; background: var(--sf-primary); border-color: var(--sf-primary); }
.portal .btn-primary:hover, .portal .btn-submit:hover { background: var(--sf-primary-hover); }
.portal .btn:disabled { opacity: .5; cursor: not-allowed; }
.portal .batch-mode-btn { color: var(--sf-text-regular); border: 1px solid #dcdfe6; background: #fff; border-radius: 4px; }
.portal .batch-mode-btn.active { color: var(--sf-primary); border-color: #93c5fd; background: #eff6ff; }
.portal .agent-list-table, .portal .delivery-table, .portal .sub-submitter-table { border-collapse: collapse; width: 100%; }
.portal th { font-size: 13px; font-weight: 500; color: #64748b; background: #f8fafc; }
.portal td, .portal th { padding: 12px 10px; border-color: #ebeef5; }
.portal .agent-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.portal .agent-actions .btn { white-space: nowrap; }
.portal .history-item, .portal .table-row, .portal .table-head { border-color: #ebeef5; color: #475569; }
.portal .table-head { background: #f8fafc; }
.portal .history-token { color: #3b82f6; }
.portal .resubmit-dialog, .portal .agreement-dialog, .portal .delivery-dialog { background: #fff; color: #1e293b; border: 1px solid var(--sf-border); border-radius: 6px; max-width: 100%; }
.portal .agreement-title, .portal .resubmit-dialog-title, .portal .delivery-dialog-title { color: #1e293b; }
.portal .agreement-body { color: #475569; }
.portal .delivery-role-box, .portal .delivery-skin-item, .portal .sub-spread-preview-item, .portal .mobile-batch-item { background: #f8fafc; color: #475569; border-color: var(--sf-border); }
.portal .delivery-bind-url { background: #f8fafc; color: #475569; overflow-wrap: anywhere; }
.portal .delivery-bind-url a { color: var(--sf-primary); }
.portal .delivery-role-box .val { color: #1e293b; }
.portal .delivery-badge.black { color: #334155; background: #f1f5f9; }
.portal .source-dropdown { background: #fff; border-color: var(--sf-border); color: #475569; }
.portal .source-option:hover { color: #2563eb; background: #eff6ff; }
.portal .result-box { color: #475569; background: #f8fafc; border-color: var(--sf-border); overflow-wrap: anywhere; }
.portal .result-box.error, .portal .msg-err { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.portal .result-box.success, .portal .msg-ok { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.portal .history-list, .portal #historyList, .portal #settlementList, .portal #agentSettlementList, .portal #agentListWrap, .portal #subSubmitterListWrap { overflow-x: auto; }
.portal .history-item { min-width: 840px; }
.portal .source-combobox { min-width: 150px; }
.agent-page .wrap { max-width: 1100px; padding: 24px 20px; }
.agent-page .head { background: #fff; border: 0; border-radius: 0; padding: 18px 20px; }
.agent-page .stat-label, .agent-page label { color: #64748b; }
.portal .batch-mode-switch { border-color: #e2e8f0; background: #f8fafc; border-radius: 6px; }
.agent-page .stat { background: #fff; border: 1px solid var(--sf-border); border-radius: 6px; }
.agent-page .stat-val { color: #1e293b; }
.agent-page .table-row, .agent-page .table-head { min-width: 840px; }
.agent-brief-page .container { max-width: 520px; margin: 48px auto; padding: 20px; }
.agent-brief-page .card { border: 1px solid var(--sf-border); border-radius: 6px; padding: 24px; }
.agent-brief-page .row { display: flex; min-width: 0; }
.agent-brief-page .input { width: 0; flex: 1; min-width: 0; }
.portal .fatal { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.register-page .card { padding: 28px; }
.register-page h1 { color: #1e293b; }
.register-page .subtitle, .register-page .file-tip { color: #64748b; }
.register-page .code-btn { background: #fff; color: #475569; border: 1px solid #dcdfe6; border-radius: 4px; }
.register-page .submit-btn { background: #3b82f6; color: #fff; border-radius: 4px; font-weight: 500; }
.register-page .link { color: #2563eb; }
.register-page .warn { color: #92400e; background: #fffbeb; border-color: #fde68a; }
@media (min-width: 1150px) {
  .workspace #section-submit.active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .workspace #section-submit > div:first-child { grid-column: 1 / -1; margin-bottom: 0 !important; }
}
@media (max-width: 760px) {
  .workspace { --portal-sidebar-width: 64px; padding-bottom: 0; }
  .workspace .side-nav .tab-label, .workspace .portal-brand span { display: none; }
  .workspace .side-nav-btn { justify-content: center; padding: 9px; }
  .workspace.sidebar-collapsed { --portal-sidebar-width: 200px; }
  .workspace.sidebar-collapsed .side-nav .tab-label, .workspace.sidebar-collapsed .portal-brand span { display: inline; }
  .workspace.sidebar-collapsed .side-nav-btn { justify-content: flex-start; }
  .workspace .main { padding: 12px; }
  .workspace .nav { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .portal .nav-title { font-size: 14px; }
  .portal .nav-right { gap: 6px; flex-wrap: wrap; }
  .portal .nav-right > span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .portal .logout-btn { white-space: nowrap; padding: 4px 6px; }
  .portal .card { padding: 14px; }
  .portal .code-row { display: flex; gap: 6px; }
  .portal .code-row input { min-width: 0; flex: 1; }
  .portal .code-row button { flex-shrink: 0; }
  .portal .points-value { font-size: 20px !important; }
  .portal .agent-create-row, .portal .agent-filter-row, .portal .sub-submitter-row { display: flex; flex-wrap: wrap; }
  .portal .agent-create-row input { flex: 1; min-width: 120px; }
  .portal .history-toolbar, .portal .history-export-row { gap: 8px; flex-wrap: wrap; }
  .portal .history-toolbar input, .portal .history-toolbar select { width: 100%; }
  .portal .resubmit-modal, .portal .delivery-modal, .portal .agreement-modal { padding: 12px; }
  .portal .submit-agreement { align-items: flex-start; }
  .agent-brief-page .container { margin: 16px auto; padding: 12px; }
}