:root{
  color-scheme:light;
  --c02-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --c02-font-size-page:20px;--c02-font-size-section:16px;--c02-font-size-body:14px;
  --c02-font-size-secondary:13px;--c02-font-size-label:12px;
  --c02-line-tight:1.35;--c02-line-body:1.5;--c02-line-copy:1.65;
  --c02-weight-regular:400;--c02-weight-medium:500;--c02-weight-semibold:600;--c02-weight-bold:700;
  --c02-primary:#355944;--c02-primary-hover:#2f503d;--c02-primary-soft:#eaf2e9;
  --c02-bg:#f4f7f3;--c02-surface:#fff;--c02-surface-hover:#f1f6f2;
  --c02-text-primary:#25372f;--c02-text-secondary:#52675a;--c02-text-muted:#718078;
  --c02-border:#dfe7dd;--c02-border-light:#e8eeea;--c02-focus:#63866d;
  --c02-success:#4b9066;--c02-success-soft:#e9f3e9;
  --c02-warning:#936524;--c02-warning-soft:#f7f1e7;
  --c02-danger:#a03c33;--c02-danger-soft:#f8eceb;--c02-info:#355f49;--c02-disabled:#a8b2ab;
  --c02-space-1:4px;--c02-space-2:8px;--c02-space-3:12px;--c02-space-4:16px;
  --c02-space-5:20px;--c02-space-6:24px;--c02-space-8:32px;
  --c02-radius-control:8px;--c02-radius-card:12px;--c02-radius-dialog:16px;--c02-radius-badge:7px;
  --c02-radius:var(--c02-radius-control);--c02-control-height:36px;--c02-control-height-small:32px;
  --c02-motion-fast:140ms;--c02-motion-standard:200ms;--c02-motion-data:280ms;--c02-motion-highlight:600ms;
  --c02-ease:cubic-bezier(.2,0,0,1);--c02-ease-linear:linear;
  --c02-hover-ms:var(--c02-motion-fast);--c02-tab-ms:var(--c02-motion-fast);--c02-dropdown-ms:var(--c02-motion-fast);
  --c02-modal-ms:var(--c02-motion-standard);--c02-drawer-ms:var(--c02-motion-standard);--c02-toast-ms:var(--c02-motion-standard);
}

/*
 * Formal five-port compatibility layer.
 * All selectors deliberately use :where() (zero specificity): frozen/page-specific
 * styles remain authoritative, while previously unstyled native controls inherit the
 * same type, focus, radius, colour and motion language.
 */
:where(#rolePageContainer),:where(#rolePageContainer) :where(button,input,select,textarea){font-family:var(--c02-font)}
:where(#rolePageContainer){color:var(--c02-text-primary);font-size:var(--c02-font-size-body);line-height:var(--c02-line-body)}
:where(#rolePageContainer) :where(h1){font-size:var(--c02-font-size-page);font-weight:var(--c02-weight-semibold);line-height:var(--c02-line-tight)}
:where(#rolePageContainer) :where(h2,h3){font-size:var(--c02-font-size-section);font-weight:var(--c02-weight-semibold);line-height:1.4}
:where(#rolePageContainer) :where(button,input,select,textarea){font-size:var(--c02-font-size-body)}
:where(#rolePageContainer) :where(button){min-height:var(--c02-control-height);border-radius:var(--c02-radius-control);font-weight:var(--c02-weight-medium);transition:background-color var(--c02-motion-fast) var(--c02-ease),border-color var(--c02-motion-fast) var(--c02-ease),color var(--c02-motion-fast) var(--c02-ease),opacity var(--c02-motion-fast) var(--c02-ease)}
:where(#rolePageContainer) :where(input:not([type="checkbox"]):not([type="radio"]),select){min-height:var(--c02-control-height);border-radius:var(--c02-radius-control);transition:border-color var(--c02-motion-fast) var(--c02-ease),box-shadow var(--c02-motion-fast) var(--c02-ease),background-color var(--c02-motion-fast) var(--c02-ease)}
:where(#rolePageContainer) :where(textarea){border-radius:var(--c02-radius-control);line-height:var(--c02-line-body);transition:border-color var(--c02-motion-fast) var(--c02-ease),box-shadow var(--c02-motion-fast) var(--c02-ease),background-color var(--c02-motion-fast) var(--c02-ease)}
:where(#rolePageContainer) :where(input[type="checkbox"],input[type="radio"]){width:16px;height:16px;accent-color:var(--c02-primary)}
:where(#rolePageContainer) :where(button,input,select,textarea,[role="button"],[role="tab"]):focus-visible{outline:2px solid var(--c02-focus);outline-offset:2px}
:where(#rolePageContainer) :where(button,input,select,textarea):disabled{cursor:not-allowed;opacity:.58}
:where(#rolePageContainer) :where(table){font-size:var(--c02-font-size-secondary)}
:where(#rolePageContainer) :where(th){font-size:var(--c02-font-size-label);font-weight:var(--c02-weight-semibold)}
:where(#rolePageContainer) :where(tbody tr){transition:background-color var(--c02-motion-fast) var(--c02-ease)}
:where(#rolePageContainer) :where([role="tab"]){transition:color var(--c02-motion-fast) var(--c02-ease),border-color var(--c02-motion-fast) var(--c02-ease),background-color var(--c02-motion-fast) var(--c02-ease)}
:where(#rolePageContainer) :where([class*="badge"],[class*="status-tag"],[class*="status-badge"]){font-size:var(--c02-font-size-label);border-radius:var(--c02-radius-badge)}

:where(#rolePageContainer) :where([class*="modal"],[role="dialog"]){--c02-dialog-title-size:18px}
:where(#rolePageContainer) :where([class*="modal"] h2,[role="dialog"] h2){font-size:var(--c02-dialog-title-size);font-weight:var(--c02-weight-semibold)}
:where(#rolePageContainer) :where([class*="modal-mask"],[class*="modal-shade"],[class*="modal-overlay"],[class*="drawer-mask"],[class*="drawer-overlay"]){animation:c02-overlay-enter var(--c02-motion-standard) var(--c02-ease) both}
:where(#rolePageContainer) :where([class*="popover"],[class*="dropdown-menu"]){animation:c02-popover-enter var(--c02-motion-fast) var(--c02-ease) both}
:where(#rolePageContainer) :where([class*="toast"],[class*="message-toast"]){animation:c02-feedback-enter var(--c02-motion-standard) var(--c02-ease) both}
@keyframes c02-overlay-enter{from{opacity:0}to{opacity:1}}
@keyframes c02-popover-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes c02-feedback-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.c02-ui{box-sizing:border-box;background:var(--c02-bg);color:var(--c02-text-primary);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-width:0}
.c02-ui *, .c02-ui *::before,.c02-ui *::after{box-sizing:inherit}
.c02-ui h1{font-size:22px;font-weight:600;line-height:1.35;margin:0}
.c02-ui h2{font-size:16px;font-weight:600;line-height:1.4;margin:0}
.c02-ui .c02-muted{font-size:12px;color:var(--c02-text-muted)}
.c02-ui .c02-page{padding:24px;max-width:1440px;margin:auto;min-width:0}
.c02-ui .c02-stack{display:grid;gap:16px}
.c02-ui .c02-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.c02-ui .c02-panel{background:var(--c02-surface);border:1px solid var(--c02-border);border-radius:8px;padding:16px;min-width:0}
.c02-ui .c02-btn{height:34px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--c02-border);border-radius:8px;font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;white-space:nowrap;background:var(--c02-surface);color:var(--c02-text-primary);transition:background var(--c02-hover-ms),border-color var(--c02-hover-ms),color var(--c02-hover-ms)}
.c02-ui .c02-btn:hover:not(:disabled){background:var(--c02-border-light)}
.c02-ui .c02-btn:focus-visible,.c02-ui .c02-control:focus-visible,.c02-ui .c02-tab:focus-visible{outline:2px solid var(--c02-primary);outline-offset:2px}
.c02-ui .c02-btn:disabled{opacity:.5;cursor:not-allowed}
.c02-ui .c02-btn--small{height:28px;padding:0 8px}
.c02-ui .c02-btn--large{height:38px;padding:0 16px}
.c02-ui .c02-btn--primary{background:var(--c02-primary);border-color:var(--c02-primary);color:#fff}
.c02-ui .c02-btn--primary:hover:not(:disabled){background:var(--c02-primary-hover);color:#fff}
.c02-ui .c02-btn--ghost,.c02-ui .c02-btn--text{border-color:transparent;background:transparent}
.c02-ui .c02-btn--danger{background:var(--c02-danger);border-color:var(--c02-danger);color:#fff}
.c02-ui .c02-btn--danger:hover:not(:disabled){background:var(--c02-danger);filter:brightness(.92);color:#fff}
.c02-ui .c02-btn--text{color:var(--c02-primary)}
.c02-ui .c02-btn[aria-busy=true]{pointer-events:none}
.c02-ui .c02-btn[aria-busy=true]::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:c02-spin .7s linear infinite}
.c02-ui .c02-field{display:grid;gap:4px;min-width:0}
.c02-ui .c02-field label{font-size:13px;font-weight:500}
.c02-ui .c02-control{width:100%;height:34px;padding:0 10px;border:1px solid var(--c02-border);border-radius:8px;background:var(--c02-surface);color:var(--c02-text-primary);font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:border-color var(--c02-hover-ms),box-shadow var(--c02-hover-ms)}
.c02-ui .c02-control:hover:not(:disabled){border-color:#bbcec2}
.c02-ui .c02-control:focus{outline:0;border-color:var(--c02-primary);box-shadow:0 0 0 2px #deebdd}
.c02-ui .c02-control:disabled{background:var(--c02-border-light);opacity:.7}
.c02-ui .c02-control[aria-invalid=true]{border-color:var(--c02-danger)}
.c02-ui textarea.c02-control{height:auto;min-height:78px;padding:8px 10px;resize:vertical}
.c02-ui .c02-search{position:relative}
.c02-ui .c02-search .c02-control{padding-left:30px}
.c02-ui .c02-search::before{content:"⌕";position:absolute;left:10px;top:4px;font-size:19px;color:var(--c02-text-muted);pointer-events:none}
.c02-ui .c02-tabs{display:flex;gap:16px;min-height:40px;border-bottom:1px solid var(--c02-border);overflow-x:auto}
.c02-ui .c02-tab{border:0;border-bottom:2px solid transparent;background:transparent;padding:8px 4px;color:var(--c02-text-secondary);font:500 13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;white-space:nowrap;transition:color var(--c02-tab-ms),border-color var(--c02-tab-ms)}
.c02-ui .c02-tab:hover{color:var(--c02-primary)}
.c02-ui .c02-tab[aria-selected=true]{color:var(--c02-primary);border-color:var(--c02-primary)}
.c02-ui .c02-tag{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:500;background:#edf1ee;color:var(--c02-text-secondary)}
.c02-ui .c02-tag--success{background:#e9f1e8;color:var(--c02-primary)}
.c02-ui .c02-tag--warning{background:#f7f1e7;color:var(--c02-warning)}
.c02-ui .c02-tag--danger{background:#f8eceb;color:var(--c02-danger)}
.c02-ui .c02-tag--info{background:#e8eeea;color:var(--c02-info)}
.c02-ui .c02-table-wrap{max-width:100%;overflow-x:auto}
.c02-ui .c02-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.c02-ui .c02-table th{height:40px;text-align:left;padding:0 12px;font-weight:500;background:var(--c02-bg);border-bottom:1px solid var(--c02-border)}
.c02-ui .c02-table td{height:46px;padding:8px 12px;border-bottom:1px solid var(--c02-border-light)}
.c02-ui .c02-table tbody tr:hover{background:#f1f6f2}
.c02-ui .c02-table tbody tr[aria-selected=true]{background:#e9f1e8}
.c02-ui .c02-table .c02-number{text-align:right;font-variant-numeric:tabular-nums}
.c02-ui .c02-table .c02-actions{text-align:right}
.c02-ui .c02-pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 0;font-size:13px}
.c02-ui .c02-empty,.c02-ui .c02-error{padding:32px 16px;text-align:center;color:var(--c02-text-muted);font-size:13px}
.c02-ui .c02-error{color:var(--c02-danger)}
.c02-ui .c02-loading{display:inline-flex;align-items:center;gap:8px;color:var(--c02-text-secondary);font-size:13px}
.c02-ui .c02-spinner{width:16px;height:16px;border:2px solid var(--c02-border);border-top-color:var(--c02-primary);border-radius:50%;animation:c02-spin .7s linear infinite}
.c02-ui .c02-section-loading{min-height:80px;display:grid;place-items:center}
.c02-ui .c02-page-loading{min-height:180px;display:grid;place-items:center}
.c02-ui .c02-overlay{position:fixed;inset:0;background:rgba(20,35,27,.32);z-index:900;opacity:0;transition:opacity var(--c02-modal-ms)}
.c02-ui .c02-overlay.is-open{opacity:1}
.c02-ui .c02-dialog{position:fixed;z-index:901;background:var(--c02-surface);box-shadow:0 12px 32px rgba(20,35,27,.14);display:flex;flex-direction:column;max-height:100dvh;min-width:0}
.c02-ui .c02-drawer{right:0;top:0;height:100dvh;width:min(520px,100vw);transform:translateX(100%);transition:transform var(--c02-drawer-ms)}
.c02-ui .c02-drawer.is-open{transform:translateX(0)}
.c02-ui .c02-drawer--small{width:min(420px,100vw)}
.c02-ui .c02-drawer--large{width:min(640px,100vw)}
.c02-ui .c02-modal{left:50%;top:50%;width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border-radius:8px;transform:translate(-50%,-48%);opacity:0;transition:transform var(--c02-modal-ms),opacity var(--c02-modal-ms)}
.c02-ui .c02-modal.is-open{transform:translate(-50%,-50%);opacity:1}
.c02-ui .c02-modal--wide{width:min(520px,calc(100vw - 24px))}
.c02-ui .c02-dialog__header,.c02-ui .c02-dialog__footer{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.c02-ui .c02-dialog__header{border-bottom:1px solid var(--c02-border)}
.c02-ui .c02-dialog__content{padding:16px;overflow:auto;flex:1}
.c02-ui .c02-dialog__footer{border-top:1px solid var(--c02-border);justify-content:flex-end;background:var(--c02-surface)}
.c02-ui .c02-toast-stack{position:fixed;right:20px;top:20px;z-index:1000;display:grid;gap:8px;width:min(340px,calc(100vw - 24px))}
.c02-ui .c02-toast{background:var(--c02-surface);border:1px solid var(--c02-border);border-left:3px solid var(--c02-info);border-radius:8px;padding:10px 12px;font-size:13px;box-shadow:0 8px 24px rgba(20,35,27,.10);transition:opacity var(--c02-toast-ms),transform var(--c02-toast-ms)}
.c02-ui .c02-toast--success{border-left-color:var(--c02-success)}
.c02-ui .c02-toast--warning{border-left-color:var(--c02-warning)}
.c02-ui .c02-toast--error{border-left-color:var(--c02-danger)}
.c02-ui .c02-toast.is-leaving{opacity:0;transform:translateY(-4px)}
.c02-ui .c02-sidebar-demo{width:220px;padding:12px;background:var(--c02-surface);border:1px solid var(--c02-border);border-radius:8px}
.c02-ui .c02-sidebar-item{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;text-align:left;color:var(--c02-text-primary);font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;transition:background var(--c02-hover-ms)}
.c02-ui .c02-sidebar-item:hover{background:var(--c02-border-light)}
.c02-ui .c02-sidebar-item[aria-current=page]{background:#deebdd;color:var(--c02-primary);font-weight:600}
.c02-ui .c02-env-badge{display:inline-flex;background:#9a3412;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;border-radius:6px;padding:5px 10px}
@keyframes c02-spin{to{transform:rotate(360deg)}}
@media(max-width:1024px){.c02-ui .c02-page{padding:20px}}
@media(max-width:600px){.c02-ui .c02-page{padding:12px}.c02-ui .c02-pagination{justify-content:center;flex-wrap:wrap}.c02-ui .c02-toast-stack{right:12px;top:12px}.c02-ui .c02-panel{padding:12px}}
@media(prefers-reduced-motion:reduce){
  :where(#rolePageContainer) *, :where(#rolePageContainer) *::before,:where(#rolePageContainer) *::after,
  .c02-ui *, .c02-ui *::before,.c02-ui *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}