/* 云森客统一组件层 v2：租户端、超管端和历史页面共用。 */
:root {
  --ysk-c-primary: var(--ysk-primary, #1769df);
  --ysk-c-primary-hover: var(--ysk-primary-hover, #0f58c7);
  --ysk-c-surface: var(--ysk-surface, #fff);
  --ysk-c-muted: var(--ysk-surface-muted, #f8fafd);
  --ysk-c-text: var(--ysk-text, #172944);
  --ysk-c-secondary: var(--ysk-text-secondary, #65758b);
  --ysk-c-border: var(--ysk-border, #dfe7f2);
  --ysk-c-radius: var(--ysk-radius, 8px);
  --ysk-c-height: var(--ysk-control-height, 32px);
}

.ysk-page-head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px }
.ysk-page-title { margin:0;color:var(--ysk-c-text);font-size:22px;line-height:1.35;font-weight:760;letter-spacing:-.02em }
.ysk-page-desc { margin-top:4px;color:var(--ysk-c-secondary);font-size:13px;line-height:1.65 }
.ysk-actions,.ysk-toolbar { display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.ysk-toolbar { padding:12px;margin-bottom:16px;border:1px solid var(--ysk-c-border);border-radius:10px;background:var(--ysk-c-muted) }

.ysk-card { background:var(--ysk-c-surface);border:1px solid var(--ysk-c-border);border-radius:10px;box-shadow:var(--ysk-shadow-card) }
.ysk-card-head { min-height:50px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--ysk-border-soft) }
.ysk-card-title { margin:0;color:var(--ysk-c-text);font-size:15px;font-weight:700 }
.ysk-card-body { padding:16px }

.ysk-btn { min-height:var(--ysk-c-height);padding:5px 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ysk-c-border);border-radius:var(--ysk-c-radius);background:#fff;color:var(--ysk-c-text);font-size:13px;line-height:20px;font-weight:600;cursor:pointer;transition:.16s ease }
.ysk-btn:hover { border-color:#9fc3f3;background:#f4f8ff;color:var(--ysk-c-primary) }
.ysk-btn-primary { border-color:var(--ysk-c-primary);background:var(--ysk-c-primary);color:#fff;box-shadow:0 3px 9px rgba(23,105,223,.18) }
.ysk-btn-primary:hover { border-color:var(--ysk-c-primary-hover);background:var(--ysk-c-primary-hover);color:#fff }
.ysk-btn-primary-soft { border-color:#bfd6f5;background:#fff;color:var(--ysk-c-primary) }
.ysk-btn-primary-soft:hover { border-color:#8ab5ee;background:#f2f7ff;color:var(--ysk-c-primary-hover) }
.ysk-btn-danger { border-color:#f2b7c0;background:#fff;color:#df4052 }
.ysk-btn-success { border-color:#22a66f;background:#22a66f;color:#fff;box-shadow:0 3px 9px rgba(34,166,111,.16) }
.ysk-btn-success:hover { border-color:#188a5b;background:#188a5b;color:#fff }
.ysk-btn-warning { border-color:#e9b75f;background:#fff7e8;color:#9b640b }
.ysk-btn-ghost { border-color:transparent;background:transparent;color:var(--ysk-c-secondary);box-shadow:none }
.ysk-btn-link { min-height:auto;padding:2px 4px;border-color:transparent;background:transparent;color:var(--ysk-c-primary);box-shadow:none }
.ysk-btn-sm { min-height:24px;padding:1px 8px;font-size:12px }
.ysk-icon-btn { width:32px;min-width:32px;height:32px;padding:0 }
.ysk-btn:disabled,.ysk-icon-btn:disabled { opacity:.5;cursor:not-allowed;box-shadow:none }
.ysk-btn[aria-busy="true"] { pointer-events:none }
.ysk-btn-spinner { width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ysk-spin .7s linear infinite }
@keyframes ysk-spin { to { transform:rotate(360deg) } }

.ysk-field { margin-bottom:16px }
.ysk-label { display:block;margin-bottom:6px;color:#40536c;font-size:12px;font-weight:650 }
.ysk-input,.ysk-select { width:100%;height:var(--ysk-c-height);padding:5px 11px;border:1px solid var(--ysk-c-border);border-radius:var(--ysk-c-radius);background:#fff;color:var(--ysk-c-text);font-size:13px;outline:0;box-shadow:none }
.ysk-input[type="file"] { height:auto;min-height:var(--ysk-c-height);padding:4px 8px }
textarea.ysk-input { height:auto;min-height:84px;resize:vertical }
.ysk-input:disabled,.ysk-select:disabled { background:#f2f5f9;color:#8b9aaf;cursor:not-allowed }
.ysk-input:focus,.ysk-select:focus { border-color:var(--ysk-c-primary);box-shadow:var(--ysk-focus-ring) }
.ysk-input.is-invalid,.ysk-select.is-invalid { border-color:#df4052;box-shadow:0 0 0 3px rgba(223,64,82,.1) }
.ysk-help { margin-top:5px;color:#8b9aaf;font-size:11px }

.ysk-table-wrap { width:100%;overflow:auto;border:1px solid var(--ysk-c-border);border-radius:10px;background:#fff }
.ysk-table { width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:13px }
.ysk-table th { height:44px;padding:8px 16px;border-bottom:1px solid var(--ysk-c-border);background:var(--ysk-c-muted);color:#6e7f95;font-size:11px;font-weight:700;white-space:nowrap }
.ysk-table td { min-height:52px;padding:10px 16px;border-bottom:1px solid var(--ysk-border-soft);background:#fff;color:#344861;vertical-align:middle }
.ysk-table tr:last-child td { border-bottom:0 }
.ysk-table tbody tr:hover td { background:#f8fbff }
.ysk-table .ysk-cell-main { color:var(--ysk-c-text);font-weight:650 }
.ysk-table .ysk-cell-sub { margin-top:2px;color:#8b9aaf;font-size:11px }
.ysk-table-actions { display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap }

.ysk-badge { min-height:22px;padding:2px 8px;display:inline-flex;align-items:center;gap:5px;border:1px solid #dce6f2;border-radius:999px;background:#f5f7fa;color:#64758b;font-size:11px;font-weight:650;white-space:nowrap }
.ysk-badge-success { border-color:#bee9d3;background:#eaf8f1;color:#12804d }
.ysk-badge-warning { border-color:#f2d7a8;background:#fff6e6;color:#a8670c }
.ysk-badge-danger { border-color:#f3c3ca;background:#fff0f2;color:#c43143 }
.ysk-badge-info { border-color:#c9ddf8;background:#eaf3ff;color:#155bc7 }
.ysk-state-dot { width:7px;height:7px;border-radius:50%;background:currentColor }

.ysk-tabs { min-height:40px;padding:4px;display:flex;align-items:center;gap:4px;overflow-x:auto;border:1px solid var(--ysk-border-soft);border-radius:10px;background:#f1f5fa;scrollbar-width:none }
.ysk-tabs::-webkit-scrollbar { display:none }
.ysk-tab { min-height:30px;padding:5px 12px;display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;border:0!important;border-radius:7px!important;background:transparent!important;color:var(--ysk-c-secondary)!important;font-size:12px;font-weight:650;text-decoration:none!important;white-space:nowrap;box-shadow:none!important }
.ysk-tab:hover { color:var(--ysk-c-primary)!important;background:#f7faff!important }
.ysk-tab.active,.ysk-tab[aria-selected="true"] { background:#fff!important;color:var(--ysk-c-primary)!important;box-shadow:0 1px 4px rgba(23,41,68,.09)!important }

.ysk-alert { padding:10px 12px;border:1px solid #cadff9;border-radius:var(--ysk-c-radius);background:#eaf3ff;color:#285681;font-size:12px;line-height:1.6 }
.ysk-alert-success { border-color:#bee9d3;background:#eaf8f1;color:#176a45 }
.ysk-alert-warning { border-color:#f2d7a8;background:#fff6e6;color:#87570e }
.ysk-alert-danger { border-color:#f3c3ca;background:#fff0f2;color:#9f2939 }

.ysk-modal { border:1px solid var(--ysk-c-border);border-radius:10px;background:#fff;box-shadow:0 18px 48px rgba(23,41,68,.16) }
.ysk-modal-head { min-height:54px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--ysk-border-soft) }
.ysk-modal-title { margin:0;color:var(--ysk-c-text);font-size:16px;font-weight:720 }
.ysk-modal-body { padding:18px }
.ysk-modal-foot { padding:12px 18px;display:flex;align-items:center;justify-content:flex-end;gap:8px;border-top:1px solid var(--ysk-border-soft);background:var(--ysk-c-muted) }

.ysk-pagination { display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin:16px 0 0 }
.ysk-page-button { min-width:30px;height:30px;padding:4px 8px;display:inline-grid;place-items:center;border:1px solid var(--ysk-c-border);border-radius:var(--ysk-c-radius);background:#fff;color:var(--ysk-c-secondary);font-size:12px;text-decoration:none }
.ysk-page-button:hover { border-color:#9fc3f3;background:#f4f8ff;color:var(--ysk-c-primary) }
.active > .ysk-page-button,.ysk-page-button.active { border-color:var(--ysk-c-primary);background:var(--ysk-c-primary);color:#fff }
.disabled > .ysk-page-button,.ysk-page-button:disabled { opacity:.5;pointer-events:none }

.ysk-progress { height:8px;overflow:hidden;border-radius:999px;background:#eaf0f7 }
.ysk-progress-fill { height:100%;border-radius:inherit;background:linear-gradient(90deg,#1769df,#4d91ef);transition:width .3s ease }

.ysk-stat-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px }
.ysk-stat { padding:16px;border:1px solid var(--ysk-c-border);border-radius:10px;background:#fff;box-shadow:var(--ysk-shadow-card) }
.ysk-stat-label { color:var(--ysk-c-secondary);font-size:12px }
.ysk-stat-value { margin-top:6px;color:var(--ysk-c-text);font-size:24px;line-height:1.2;font-weight:760 }
.ysk-avatar { width:36px;height:36px;display:inline-grid;place-items:center;flex:0 0 auto;overflow:hidden;border:1px solid #dce6f2;border-radius:9px;background:#eaf3ff;color:var(--ysk-c-primary);font-weight:700;object-fit:cover }
.ysk-list-row { min-height:42px;padding:9px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--ysk-border-soft) }
.ysk-list-row:last-child { border-bottom:0 }
.ysk-list-label { color:var(--ysk-c-secondary);font-size:12px;font-weight:600 }
.ysk-list-value { color:var(--ysk-c-text);font-size:13px;font-weight:600;text-align:right }

.ysk-switch { appearance:none;width:38px;height:22px;position:relative;flex:0 0 auto;border:1px solid #cbd7e5;border-radius:999px;background:#dce4ee;cursor:pointer;transition:.16s ease }
.ysk-switch::after { content:"";width:16px;height:16px;position:absolute;top:2px;left:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(23,41,68,.25);transition:.16s ease }
.ysk-switch:checked { border-color:var(--ysk-c-primary);background:var(--ysk-c-primary) }
.ysk-switch:checked::after { transform:translateX(16px) }
.ysk-check { width:16px;height:16px;flex:0 0 auto;margin:0 5px 0 0;accent-color:var(--ysk-c-primary);vertical-align:-3px;cursor:pointer }

.ysk-empty { padding:40px 20px;color:#8b9aaf;text-align:center;font-size:13px }
.ysk-empty i { display:block;margin:0 auto 10px;font-size:28px;color:#9bb5d4 }
.ysk-error { padding:12px;border:1px solid #f3c3ca;border-radius:8px;background:#fff0f2;color:#9f2939;font-size:12px }
.ysk-skeleton { min-height:14px;border-radius:6px;background:linear-gradient(90deg,#eef3f8 25%,#f8fafc 37%,#eef3f8 63%);background-size:400% 100%;animation:ysk-skeleton 1.4s ease infinite }
@keyframes ysk-skeleton { 0%{background-position:100% 50%}100%{background-position:0 50%} }

.ysk-toast-stack { position:fixed;top:18px;right:18px;z-index:11000;display:grid;gap:8px;pointer-events:none }
.ysk-toast { min-width:260px;max-width:420px;padding:10px 12px;display:flex;gap:8px;align-items:flex-start;border:1px solid var(--ysk-c-border);border-radius:9px;background:#fff;color:var(--ysk-c-text);box-shadow:0 12px 32px rgba(23,41,68,.14);font-size:13px;pointer-events:auto }
.ysk-toast-success { border-color:#bee9d3 }.ysk-toast-warning { border-color:#f2d7a8 }.ysk-toast-danger { border-color:#f3c3ca }

/* 组件边界校正：模板与动态 HTML 均直接声明 ysk-* 组件类。 */
.ysk-component-layer .ysk-card { overflow:visible }
.ysk-component-layer .ysk-card > .ysk-card-head:first-child { border-radius:10px 10px 0 0 }
.ysk-component-layer .ysk-card > .ysk-card-body:last-child { border-radius:0 0 10px 10px }
.ysk-component-layer .ysk-table-wrap > .ysk-table { min-width:max-content }
.ysk-component-layer .ysk-table-wrap > .ysk-table[data-fluid-table="true"] { min-width:100% }
.ysk-component-layer .ysk-toolbar > :is(.ysk-input,.ysk-select,.form-control,.form-select) { width:auto;min-width:140px;max-width:100% }
.ysk-component-layer .ysk-toolbar .search-input { min-width:220px }
.ysk-component-layer .ysk-badge :is(.status-dot,.state-dot) { flex:0 0 auto }
.ysk-component-layer .ysk-modal .btn-close { background-color:transparent }
.ysk-component-layer .ysk-empty:empty::after { content:"暂无数据" }
.ysk-component-layer .ysk-card > h3:first-child { min-height:50px;margin:0;padding:12px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ysk-border-soft);color:var(--ysk-c-text);font-size:15px;font-weight:700 }
.ysk-component-layer .ysk-btn { border-radius:var(--ysk-c-radius);font-size:13px;font-weight:600;box-shadow:none }
.ysk-component-layer .ysk-btn-primary { border-color:var(--ysk-c-primary)!important;background:var(--ysk-c-primary)!important;color:#fff!important;box-shadow:0 3px 9px rgba(23,105,223,.18) }
.ysk-component-layer .ysk-btn-primary-soft { border-color:#bfd6f5!important;background:#fff!important;color:var(--ysk-c-primary)!important }
.ysk-component-layer .ysk-btn-success { border-color:#22a66f!important;background:#22a66f!important;color:#fff!important }
.ysk-component-layer .ysk-btn-warning { border-color:#e9b75f!important;background:#fff7e8!important;color:#9b640b!important }
.ysk-component-layer .ysk-btn-danger { border-color:#f2b7c0!important;background:#fff!important;color:#df4052!important }
.ysk-component-layer .ysk-input,.ysk-component-layer .ysk-select { border-color:var(--ysk-c-border);border-radius:var(--ysk-c-radius);background:#fff;color:var(--ysk-c-text);font-size:13px;box-shadow:none }
.ysk-component-layer .ysk-input:focus,.ysk-component-layer .ysk-select:focus { border-color:var(--ysk-c-primary);box-shadow:var(--ysk-focus-ring);outline:0 }
.ysk-component-layer .ysk-tabs .ysk-tab { border:0;border-radius:7px;background:transparent;color:var(--ysk-c-secondary);box-shadow:none }
.ysk-component-layer .ysk-tabs .ysk-tab.active { background:#fff;color:var(--ysk-c-primary);box-shadow:0 1px 4px rgba(23,41,68,.09) }

@media (max-width:640px) {
  .ysk-page-title { font-size:19px }
  .ysk-toolbar { align-items:stretch }
  .ysk-toolbar > * { width:100%!important;max-width:100% }
  .ysk-modal-head,.ysk-modal-body,.ysk-modal-foot { padding-left:14px;padding-right:14px }
  .ysk-stat-grid { grid-template-columns:1fr }
  .ysk-table th,.ysk-table td { padding-left:12px;padding-right:12px }
}

@media (prefers-reduced-motion:reduce) {
  .ysk-btn,.ysk-skeleton,.ysk-btn-spinner { transition:none!important;animation-duration:.01ms!important }
}
