.sc-skm { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#222; }
.sc-skm * { box-sizing: border-box; }
.sc-skm .skm-btn { background:#f3f5f7; border:1px solid #cfd7df; border-radius:10px; padding:8px 12px; cursor:pointer; margin:2px; }
.sc-skm .skm-btn.primary { background:#2e7dff; color:#fff; border-color:#2e7dff; }
.sc-skm .skm-btn.danger { background:#ffebee; color:#c62828; border-color:#ef9a9a; }
.sc-skm .skm-btn.small { padding:4px 8px; font-size:12px; }
.sc-skm .skm-select { padding:8px; border-radius:8px; border:1px solid #cfd7df; min-width:220px; }

.sc-skm .sc-skm-topbar { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px; background:#fff; border:1px solid #e4e8ee; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin-bottom:12px; position:sticky; top:0; z-index:1; }
.sc-skm .sc-skm-topbar .left, .sc-skm .sc-skm-topbar .center, .sc-skm .sc-skm-topbar .right { display:flex; align-items:center; gap:6px; }
.sc-skm .sc-skm-topbar .left .skm-btn#skm-dup { background:#f8f5ff; border-color:#d5c9ff; }

.sc-skm .skm-form { display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid #e4e8ee; border-radius:12px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.sc-skm[data-mode="new"] .skm-form { border-color:#2e7dff; }
.sc-skm .skm-empty { display:none; }
.sc-skm[data-empty="1"] .skm-form { display:none; }
.sc-skm[data-empty="1"] .skm-empty { display:block; margin-top:8px; }
.sc-skm .skm-empty-box { background:#fff; border:1px dashed #cfd7df; border-radius:12px; padding:20px; text-align:center; color:#51606d; }
.sc-skm .skm-empty-box .title { font-weight:700; margin-bottom:6px; color:#2b3742; }
.sc-skm .skm-empty-box .desc { margin-bottom:12px; }
.sc-skm .skm-field-hint { font-size:12px; color:#6a7885; margin:6px 0 12px; }
.sc-skm .skm-row { display:flex; gap:12px; flex-wrap:wrap; }
.sc-skm label { display:flex; flex-direction:column; gap:6px; font-weight:600; }
.sc-skm input[type="text"], .sc-skm textarea { width:100%; padding:10px 12px; border:1px solid #cfd7df; border-radius:10px; font:inherit; background:#fbfdff; }
.sc-skm textarea { min-height:120px; resize:vertical; }

.sc-skm .skm-hint { font-size:12px; color:#51606d; background:#f7fafc; border:1px dashed #d8e2ec; padding:8px 10px; border-radius:10px; }

.sc-skm .skm-params { border-top:1px solid #eef2f6; padding-top:8px; }
.sc-skm .skm-params-header { display:flex; align-items:center; justify-content:space-between; }
.sc-skm .skm-param-list { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.sc-skm .skm-param-row { display:flex; gap:6px; align-items:center; }
.sc-skm .skm-param-row .sep { opacity:.6; }
.sc-skm .skm-param-key, .sc-skm .skm-param-value { flex:1; padding:8px 10px; border:1px solid #cfd7df; border-radius:8px; }

.sc-skm .skm-actions { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.sc-skm .skm-owner-note { margin-left:auto; color:#7a8794; font-size:12px; }

/* Modal */
.sc-skm .skm-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:10px; z-index: 9999; }
.sc-skm .skm-modal[hidden] { display:none !important; }
.sc-skm .skm-modal-content { background:#fff; width:min(680px, 100%); border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.2); position: relative; z-index: 10000; }
.sc-skm .skm-modal-header, .sc-skm .skm-modal-footer { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #eef2f6; }
.sc-skm .skm-modal-footer { border-top:1px solid #eef2f6; border-bottom:none; }
.sc-skm .skm-modal-header .skm-modal-close { border:none; background:transparent; font-size:20px; cursor:pointer; }
.sc-skm .skm-modal-body { padding:12px; max-height:60vh; overflow:auto; }
.sc-skm .skm-user-item { display:flex; align-items:center; gap:8px; padding:6px 4px; }
.sc-skm .skm-users-toolbar { display:flex; gap:8px; margin-bottom:8px; }
.sc-skm .skm-users-toolbar input { flex:1; padding:8px 10px; border:1px solid #cfd7df; border-radius:8px; }
.sc-skm .skm-users-selected { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.sc-skm .skm-chip { background:#eef2ff; color:#253b80; border:1px solid #c8d1ff; border-radius:999px; padding:4px 8px; display:inline-flex; align-items:center; gap:6px; }
.sc-skm .skm-chip button { border:none; background:transparent; cursor:pointer; font-size:14px; line-height:1; }
.sc-skm .skm-users-pager { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .sc-skm .sc-skm-topbar { flex-direction:column; align-items:stretch; gap:8px; }
  .sc-skm .sc-skm-topbar .center { justify-content:space-between; }
  .sc-skm .skm-actions { flex-wrap:wrap; }
}