:root {
  --primary: #ff6b35;
  --primary-dark: #e9531d;
  --primary-soft: #fff3ed;
  --navy: #171c30;
  --navy-light: #252c47;
  --text: #20242d;
  --text-secondary: #687080;
  --muted: #969eac;
  --border: #e6eaf0;
  --surface: #ffffff;
  --background: #f3f5f8;
  --success: #1f9d6a;
  --success-soft: #eaf8f1;
  --warning: #c77b09;
  --warning-soft: #fff7e6;
  --danger: #d84c4c;
  --danger-soft: #fff0f0;
  --info: #3478d4;
  --info-soft: #edf4ff;
  --purple: #7758c7;
  --purple-soft: #f3efff;
  --shadow: 0 2px 10px rgba(20, 30, 55, .045);
  --shadow-lg: 0 18px 60px rgba(16, 24, 40, .18);
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-width: 1100px; background: var(--background); }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; color: var(--text); background: var(--background); font-size: 14px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(255,107,53,.2); outline-offset: 2px; }
button:disabled { cursor: not-allowed !important; opacity: .45; }
a { color: var(--primary); text-decoration: none; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 238px; height: 100vh; position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; flex-direction: column; color: #c3c9d8; background: var(--navy); border-right: 1px solid rgba(255,255,255,.03); }
.brand { height: 75px; display: flex; align-items: center; gap: 11px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 700; background: linear-gradient(145deg, var(--primary), #ff976f); box-shadow: 0 7px 18px rgba(255,107,53,.2); }
.brand-title { color: #fff; font-size: 15px; font-weight: 650; letter-spacing: .5px; }
.brand-subtitle { color: #737c97; font-size: 8px; letter-spacing: 1.1px; margin-top: 2px; }
.version-badge { margin-left: auto; padding: 2px 6px; border-radius: 5px; color: #ffb89d; background: rgba(255,107,53,.13); font-size: 10px; font-weight: 700; }
.nav-menu { flex: 1; overflow-y: auto; padding: 11px 10px 16px; scrollbar-width: thin; scrollbar-color: #3b435e transparent; }
.nav-group { padding: 15px 11px 6px; color: #69738f; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; }
.nav-item { width: 100%; min-height: 39px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin: 2px 0; color: #b9c0d1; border: 0; border-radius: 7px; background: transparent; text-align: left; font-size: 13px; transition: .16s ease; position: relative; }
.nav-item:hover { color: #fff; background: var(--navy-light); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(255,107,53,.2), rgba(255,107,53,.045)); }
.nav-item.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.nav-icon { width: 19px; color: #8993ac; text-align: center; font-size: 15px; }
.nav-item.active .nav-icon { color: #ff9b76; }
.nav-count { margin-left: auto; min-width: 19px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; color: #ffb59a; background: rgba(255,107,53,.13); font-size: 10px; }
.sidebar-note { margin: 8px 15px 12px; padding: 10px; display: flex; gap: 9px; align-items: flex-start; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.025); }
.sidebar-note strong { display: block; color: #b9c2d8; font-size: 11px; font-weight: 500; }
.sidebar-note small { display: block; color: #68728d; font-size: 9px; margin-top: 3px; }
.note-dot { width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: #54c99a; box-shadow: 0 0 0 4px rgba(84,201,154,.08); }
.sidebar-user { min-height: 67px; padding: 13px 18px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--primary), #ff976f); font-size: 13px; font-weight: 650; }
.user-copy { min-width: 0; flex: 1; }
.user-copy strong { display: block; color: #f2f4f9; font-size: 12px; font-weight: 550; }
.user-copy span { display: block; color: #79839e; font-size: 10px; margin-top: 2px; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #46c491; }
.main-shell { width: calc(100% - 238px); min-height: 100vh; margin-left: 238px; display: flex; flex-direction: column; }
.topbar { min-height: 66px; padding: 10px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.breadcrumb { color: #4d5564; font-size: 13px; font-weight: 550; }
.prototype-label { color: var(--muted); font-size: 10px; margin-top: 2px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.global-search { width: 245px; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; background: #f7f8fa; }
.global-search input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.global-search kbd { color: #a4abb7; font-size: 11px; font-family: inherit; }
.icon-button { width: 34px; height: 34px; position: relative; border: 1px solid var(--border); border-radius: 8px; color: #697181; background: #fff; font-size: 17px; }
.notification-count { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--danger); font-size: 9px; }
.role-switcher { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.role-label { color: var(--muted); font-size: 10px; }
.role-switcher select { max-width: 110px; border: 0; outline: 0; color: #454d5b; background: transparent; font-size: 11px; }
.view { flex: 1; padding: 24px 26px 32px; overflow: hidden; }
.app-footer { padding: 14px 26px 18px; display: flex; justify-content: space-between; gap: 20px; color: #a0a7b3; border-top: 1px solid var(--border); font-size: 10px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-title-wrap { display: flex; align-items: flex-start; gap: 12px; }
.page-title-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-size: 18px; font-weight: 650; }
.page-title { color: #1c2230; font-size: 22px; line-height: 1.3; font-weight: 650; letter-spacing: -.3px; }
.page-desc { margin-top: 5px; color: var(--text-secondary); font-size: 12px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.button { min-height: 35px; padding: 8px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 500; transition: .15s; white-space: nowrap; }
.button-primary { color: #fff; border-color: var(--primary); background: linear-gradient(135deg, var(--primary), #ff8758); box-shadow: 0 3px 8px rgba(255,107,53,.13); }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { color: #515968; border-color: #dfe4eb; background: #fff; }
.button-secondary:hover, .button-ghost:hover { color: var(--primary); border-color: #ffc6af; background: var(--primary-soft); }
.button-ghost { color: #747d8c; border-color: transparent; background: transparent; }
.button-danger { color: var(--danger); border-color: #f2cccc; background: #fff; }
.button-success { color: #fff; border-color: var(--success); background: var(--success); }
.button-small { min-height: 29px; padding: 5px 10px; font-size: 11px; }
.button-link { min-height: auto; padding: 2px 4px; color: var(--primary); border: 0; background: none; font-size: 12px; }
.button-link.secondary { color: var(--info); }
.button-link.muted { color: var(--text-secondary); }
.button-link.danger { color: var(--danger); }
.action-group { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.card-header { min-height: 54px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #edf0f4; }
.card-title { color: #2b303c; font-size: 14px; font-weight: 600; }
.card-subtitle { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }
.card-body { padding: 18px; }
.card-footer { padding: 12px 18px; border-top: 1px solid #edf0f4; background: #fafbfc; border-radius: 0 0 var(--radius) var(--radius); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.span-2 { grid-column: span 2; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mt-8 { margin-top: 8px; }.mt-12 { margin-top: 12px; }.mt-16 { margin-top: 16px; }.mt-20 { margin-top: 20px; }.mb-16 { margin-bottom: 16px; }
.text-muted { color: var(--text-secondary); }.text-small { font-size: 11px; }.text-tiny { font-size: 10px; }.text-danger { color: var(--danger); }.text-success { color: var(--success); }.text-warning { color: var(--warning); }.text-primary { color: var(--primary); }.bold { font-weight: 600; }
.stat-card { min-height: 112px; padding: 17px 18px; position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; right: -16px; top: -20px; width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft, var(--primary-soft)); opacity: .7; }
.stat-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.stat-label { color: var(--text-secondary); font-size: 12px; }
.stat-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--accent, var(--primary)); background: var(--accent-soft, var(--primary-soft)); font-size: 13px; }
.stat-value { margin-top: 8px; color: #202531; font-size: 25px; line-height: 1; font-weight: 680; letter-spacing: -.5px; position: relative; z-index: 1; }
.stat-foot { margin-top: 9px; color: var(--muted); font-size: 10px; position: relative; z-index: 1; }
.stat-foot strong { color: var(--accent, var(--primary)); font-weight: 550; }
.todo-card { padding: 16px; display: flex; align-items: center; gap: 13px; cursor: pointer; transition: .17s; }
.todo-card:hover { transform: translateY(-2px); border-color: #ffcbb7; box-shadow: 0 7px 18px rgba(30,40,60,.07); }
.todo-number { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 11px; color: var(--accent,var(--primary)); background: var(--accent-soft,var(--primary-soft)); font-size: 20px; font-weight: 650; }
.todo-content { flex: 1; }
.todo-title { color: #343a47; font-size: 12px; font-weight: 550; }
.todo-desc { margin-top: 3px; color: var(--muted); font-size: 10px; }
.todo-arrow { color: #c2c8d1; }
.filter-panel { padding: 13px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-label { color: var(--text-secondary); font-size: 11px; }
.input, .select, .textarea { width: 100%; color: #343b48; border: 1px solid #dde3ea; border-radius: 7px; background: #fff; font-size: 12px; transition: .15s; }
.input, .select { height: 35px; padding: 0 10px; }
.select { min-width: 115px; padding-right: 28px; }
.textarea { min-height: 86px; padding: 9px 10px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #b0b7c2; }
.input:focus, .select:focus, .textarea:focus { border-color: #ffab88; box-shadow: 0 0 0 3px rgba(255,107,53,.07); outline: 0; }
.input:disabled, .select:disabled, .textarea:disabled { color: #8f97a4; background: #f5f6f8; cursor: not-allowed; }
.input-error { border-color: var(--danger) !important; }
.filter-panel .input { width: 210px; }
.filter-panel .select { width: auto; }
.tabs { display: flex; align-items: center; gap: 4px; padding: 4px; margin-bottom: 15px; border: 1px solid var(--border); border-radius: 9px; background: #e9edf2; overflow-x: auto; }
.tab { min-height: 31px; padding: 6px 13px; color: #697283; border: 0; border-radius: 6px; background: transparent; font-size: 11px; white-space: nowrap; }
.tab.active { color: #303744; background: #fff; box-shadow: 0 1px 4px rgba(20,30,50,.08); font-weight: 550; }
.tab-count { margin-left: 4px; color: var(--primary); font-size: 10px; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { height: 39px; padding: 9px 12px; color: #737c8c; background: #f7f8fa; border-bottom: 1px solid var(--border); text-align: left; font-size: 11px; font-weight: 550; white-space: nowrap; }
.data-table td { padding: 12px; color: #454c59; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: #fbfcfd; }
.data-table .cell-title { max-width: 320px; color: #282f3c; font-weight: 500; white-space: normal; line-height: 1.55; }
.data-table .cell-sub { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; white-space: nowrap; }
.data-table .cell-code { color: #758094; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.badge { display: inline-flex; align-items: center; gap: 4px; min-height: 21px; padding: 2px 7px; border-radius: 5px; color: #596273; background: #f0f2f5; font-size: 10px; font-weight: 500; white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .75; }
.badge-no-dot::before { display: none; }
.badge-success { color: var(--success); background: var(--success-soft); }
.badge-warning { color: var(--warning); background: var(--warning-soft); }
.badge-danger { color: var(--danger); background: var(--danger-soft); }
.badge-info { color: var(--info); background: var(--info-soft); }
.badge-primary { color: var(--primary); background: var(--primary-soft); }
.badge-purple { color: var(--purple); background: var(--purple-soft); }
.badge-neutral { color: #717988; background: #f0f2f5; }
.keyword-list { display: flex; gap: 5px; flex-wrap: wrap; }
.keyword { padding: 2px 6px; color: #637086; border: 1px solid #e0e6ed; border-radius: 4px; background: #f8fafc; font-size: 10px; white-space: nowrap; }
.info-banner { padding: 12px 15px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid #dbe9fa; border-radius: 9px; color: #52667e; background: #f2f7fd; font-size: 11px; line-height: 1.7; }
.info-banner.warning { color: #8b672d; border-color: #f1dfba; background: #fff9ee; }
.info-banner.danger { color: #985454; border-color: #f2d1d1; background: #fff5f5; }
.info-banner.success { color: #39765e; border-color: #cde9dc; background: #f1faf6; }
.info-banner.orange { color: #885d47; border-color: #f4d5c5; background: #fff7f2; }
.banner-icon { flex-shrink: 0; font-size: 15px; line-height: 1.6; }
.info-banner strong { color: inherit; font-weight: 650; }
.timeline { display: flex; align-items: flex-start; padding: 8px 0; }
.timeline-step { flex: 1; position: relative; text-align: center; color: var(--muted); font-size: 10px; }
.timeline-step:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 18px); width: calc(100% - 36px); height: 2px; background: #e4e8ed; }
.timeline-step.done:not(:last-child)::after { background: #83cdb0; }
.step-dot { width: 27px; height: 27px; margin: 0 auto 6px; display: grid; place-items: center; position: relative; z-index: 1; border: 2px solid #e0e5eb; border-radius: 50%; color: #8d96a5; background: #fff; font-size: 11px; }
.timeline-step.active .step-dot { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 5px var(--primary-soft); }
.timeline-step.done .step-dot { color: #fff; border-color: var(--success); background: var(--success); }
.timeline-step.active { color: var(--primary); font-weight: 600; }
.timeline-step.done { color: var(--success); }
.catalog-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.catalog-card { min-height: 180px; padding: 16px; display: flex; flex-direction: column; position: relative; }
.catalog-order { position: absolute; right: 13px; top: 12px; color: #c5cbd5; font-size: 18px; font-weight: 650; }
.catalog-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-weight: 650; }
.catalog-name { margin-top: 11px; color: #2c3340; font-size: 14px; font-weight: 600; }
.catalog-desc { margin-top: 5px; min-height: 34px; color: var(--text-secondary); font-size: 10px; line-height: 1.7; }
.catalog-meta { margin-top: 10px; display: flex; gap: 5px; flex-wrap: wrap; }
.catalog-actions { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f0f2f4; }
.source-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.source-card { padding: 14px; }
.source-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.source-name { color: #323947; font-size: 12px; font-weight: 600; }
.source-type { margin-top: 3px; color: var(--muted); font-size: 10px; }
.source-meta { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; color: #697384; font-size: 10px; }
.source-footer { margin-top: 12px; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f0f2f4; }
.material-card { padding: 17px; }
.material-title { color: #29313e; font-size: 13px; font-weight: 600; line-height: 1.6; }
.material-meta { margin-top: 7px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--muted); font-size: 10px; }
.material-rule { margin-top: 11px; padding: 9px 11px; border-radius: 7px; color: #5c6675; background: #f7f8fa; font-size: 10px; line-height: 1.7; }
.material-actions { margin-top: 12px; display: flex; gap: 7px; justify-content: flex-end; }
.rule-priority { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 13px; font-weight: 650; }
.rule-flow { display: flex; flex-direction: column; gap: 0; }
.rule-row { display: flex; gap: 13px; position: relative; padding-bottom: 17px; }
.rule-row:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 35px; bottom: 0; width: 1px; background: #e1e6ec; }
.rule-content { flex: 1; padding: 10px 12px; border: 1px solid #e8ecf0; border-radius: 8px; background: #fafbfc; }
.rule-title { color: #3d4552; font-size: 12px; font-weight: 550; }
.rule-desc { margin-top: 4px; color: var(--text-secondary); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 16px; }
.form-group { min-width: 0; }
.form-group.full { grid-column: 1 / -1; }
.form-label { display: block; margin-bottom: 6px; color: #535c6b; font-size: 11px; font-weight: 550; }
.required { color: var(--danger); margin-left: 3px; }
.form-help { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.checkbox-label, .radio-label { display: inline-flex; align-items: center; gap: 6px; color: #515a68; font-size: 11px; cursor: pointer; }
.checkbox-label input, .radio-label input { accent-color: var(--primary); }
.check-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.check-item { padding: 10px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid #e3e8ee; border-radius: 7px; color: #515b69; background: #fff; font-size: 11px; }
.check-item input { margin-top: 3px; accent-color: var(--primary); }
.review-evidence { padding: 12px 14px; border: 1px solid #e5eaf0; border-radius: 8px; background: #fafbfc; }
.evidence-title { margin-bottom: 8px; color: #404957; font-size: 11px; font-weight: 600; }
.evidence-grid { display: grid; grid-template-columns: 110px 1fr; gap: 7px 12px; color: #596474; font-size: 11px; }
.evidence-grid dt { color: #8a93a1; }
.evidence-grid dd { color: #424c5b; word-break: break-all; }
.review-comment { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--info); color: #526477; background: #f4f8fd; font-size: 11px; }
.alert-list { display: flex; flex-direction: column; }
.alert-item { padding: 13px 0; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid #eff1f4; }
.alert-item:last-child { border-bottom: 0; }
.alert-marker { width: 7px; height: 7px; margin-top: 6px; flex-shrink: 0; border-radius: 50%; background: var(--accent,var(--warning)); }
.alert-content { flex: 1; min-width: 0; }
.alert-title { color: #454d5b; font-size: 11px; }
.alert-desc { margin-top: 3px; color: var(--muted); font-size: 10px; }
.progress-track { width: 100%; height: 6px; overflow: hidden; border-radius: 4px; background: #edf0f3; }
.progress-bar { height: 100%; border-radius: 4px; background: var(--accent,var(--primary)); }
.chart-container { height: 245px; position: relative; }
.chart-svg { width: 100%; height: 100%; overflow: visible; }
.chart-legend { display: flex; gap: 14px; align-items: center; color: var(--text-secondary); font-size: 10px; }
.legend-dot { width: 7px; height: 7px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--accent,var(--primary)); }
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 235px; }
.donut { width: 145px; height: 145px; display: grid; place-items: center; position: relative; flex-shrink: 0; border-radius: 50%; background: conic-gradient(var(--primary) 0 34%, #5478d1 34% 57%, #3eaf8a 57% 74%, #e9a23b 74% 87%, #9a6cc5 87% 100%); }
.donut::after { content: ""; position: absolute; width: 86px; height: 86px; border-radius: 50%; background: #fff; }
.donut-center { position: relative; z-index: 1; text-align: center; }
.donut-value { color: #303744; font-size: 20px; font-weight: 650; }
.donut-label { color: var(--muted); font-size: 10px; }
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.donut-legend-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; color: #626c7c; font-size: 10px; }
.donut-legend-row span:first-child::before { content: ""; width: 7px; height: 7px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--accent); }
.modal-mask { position: fixed; inset: 0; z-index: 1000; padding: 35px 20px; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; background: rgba(14,20,34,.55); backdrop-filter: blur(2px); }
.modal-mask.show { display: flex; }
.modal-box { width: min(650px,100%); max-height: calc(100vh - 70px); display: flex; flex-direction: column; border-radius: 13px; background: #fff; box-shadow: var(--shadow-lg); animation: modal-in .16s ease-out; }
.modal-box.size-sm { width: min(470px,100%); }.modal-box.size-lg { width: min(820px,100%); }.modal-box.size-xl { width: min(1080px,100%); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header { min-height: 57px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--border); }
.modal-header h2 { color: #252c38; font-size: 16px; font-weight: 620; }
.modal-close { width: 29px; height: 29px; color: #8c95a2; border: 0; border-radius: 6px; background: #f4f5f7; font-size: 20px; line-height: 1; }
.modal-close:hover { color: var(--danger); background: var(--danger-soft); }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-footer { min-height: 59px; padding: 12px 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); border-radius: 0 0 13px 13px; background: #fafbfc; }
.modal-footer:empty { display: none; }
.toast { position: fixed; top: 82px; left: 50%; z-index: 2000; max-width: 520px; padding: 10px 18px; transform: translate(-50%,-10px); opacity: 0; pointer-events: none; border-radius: 8px; color: #fff; background: rgba(25,31,44,.92); box-shadow: 0 6px 22px rgba(0,0,0,.15); font-size: 12px; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.toast.success { background: rgba(25,133,89,.95); }.toast.error { background: rgba(194,62,62,.96); }
.empty-state { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty-icon { width: 52px; height: 52px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; color: #9aa4b3; background: #f0f2f5; font-size: 23px; }
.empty-title { color: #6c7583; font-size: 13px; }
.empty-desc { margin-top: 5px; font-size: 10px; }
.pagination { padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); border-top: 1px solid #eef1f4; font-size: 10px; }
.page-buttons { display: flex; gap: 5px; }
.page-button { width: 27px; height: 27px; color: #727b8a; border: 1px solid #e1e5ea; border-radius: 5px; background: #fff; font-size: 10px; }
.page-button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.selftest-row { padding: 10px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #eef1f4; }
.selftest-row:last-child { border-bottom: 0; }
.selftest-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: var(--success); background: var(--success-soft); font-size: 11px; }
.selftest-name { flex: 1; color: #4b5564; font-size: 11px; }
.selftest-detail { color: var(--muted); font-size: 10px; }
.role-card { padding: 16px; }
.role-card.current { border-color: #ffb99f; box-shadow: 0 0 0 2px var(--primary-soft); }
.role-name { color: #343c49; font-size: 13px; font-weight: 600; }
.role-users { margin-top: 3px; color: var(--muted); font-size: 10px; }
.role-perms { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.role-perm { display: flex; gap: 6px; color: #687383; font-size: 10px; }
.role-perm::before { content: "✓"; color: var(--success); }
.role-perm.denied { color: #9aa2ad; text-decoration: line-through; }
.role-perm.denied::before { content: "—"; color: #c0c6ce; }
.matrix-table th:not(:first-child), .matrix-table td:not(:first-child) { text-align: center; }
.matrix-yes { color: var(--success); }.matrix-no { color: #c4cad2; }.matrix-limited { color: var(--warning); }
.audit-timeline { position: relative; padding-left: 20px; }
.audit-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: #e0e5eb; }
.audit-event { position: relative; padding: 0 0 17px 12px; }
.audit-event::before { content: ""; position: absolute; left: -19px; top: 6px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1px #ffb59a; }
.audit-event-title { color: #48515f; font-size: 11px; }
.audit-event-meta { margin-top: 3px; color: var(--muted); font-size: 10px; }
.kpi-inline { display: flex; gap: 24px; }
.kpi-inline-item { min-width: 80px; }
.kpi-inline-value { color: #303845; font-size: 19px; font-weight: 650; }
.kpi-inline-label { color: var(--muted); font-size: 10px; margin-top: 2px; }
.code-box { padding: 11px 13px; overflow-x: auto; border: 1px solid #e2e7ed; border-radius: 7px; color: #536174; background: #f6f8fa; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; white-space: pre-wrap; word-break: break-all; }
.divider { height: 1px; margin: 16px 0; background: var(--border); }
.no-wrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1450px) {
  .grid-5 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .global-search { width: 190px; }
  .role-label { display: none; }
}
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-3, .source-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .global-search { display: none; }
  .view { padding: 20px; }
}
@media print {
  html { min-width: 0; }.sidebar, .topbar, .page-actions, .app-footer, .button { display: none !important; }
  .main-shell { width: 100%; margin: 0; }.view { padding: 0; }.card { box-shadow: none; break-inside: avoid; }
}