:root { color-scheme: light dark; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 20px; }
h1 { margin: 0 0 10px; font-size: 20px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.card { border: 1px solid color-mix(in oklab, CanvasText 20%, transparent); border-radius: 12px; padding: 12px; margin: 12px 0; }
label { display: block; font-size: 12px; opacity: .85; margin-bottom: 6px; }
input[type="text"], input[type="url"] { width: 260px; max-width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in oklab, CanvasText 20%, transparent); background: Canvas; color: CanvasText; }
input[type="checkbox"] { transform: translateY(1px); }
button { padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in oklab, CanvasText 20%, transparent); background: color-mix(in oklab, CanvasText 8%, Canvas); cursor: pointer; }
button:hover { background: color-mix(in oklab, CanvasText 12%, Canvas); }
.muted { font-size: 12px; opacity: .8; line-height: 1.35; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid color-mix(in oklab, CanvasText 12%, transparent); vertical-align: middle; }
th { font-size: 12px; opacity: .8; }
.img { width: 64px; height: 36px; border-radius: 8px; object-fit: cover; background: color-mix(in oklab, CanvasText 6%, Canvas); }
.name { font-weight: 600; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid color-mix(in oklab, CanvasText 16%, transparent); opacity: .9; user-select: text; cursor: text; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
textarea { width: 100%; min-height: 92px; padding: 10px; border-radius: 10px; border: 1px solid color-mix(in oklab, CanvasText 20%, transparent); background: Canvas; color: CanvasText; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.warn { padding: 10px; border-radius: 10px; border: 1px solid color-mix(in oklab, CanvasText 18%, transparent); background: color-mix(in oklab, #ffcc00 14%, Canvas); }
.right { margin-left: auto; }
.drag-handle { cursor: grab; user-select: none; font-size: 18px; opacity: .4; padding: 0 8px; }
.drag-handle:hover { opacity: .8; }
tr[draggable="true"] { cursor: move; }
tr[draggable="true"] .pill { cursor: text; }
tr.dragging { opacity: .4; }
tr.drag-over { border-top: 2px solid color-mix(in oklab, CanvasText 50%, transparent); }
.history-item { border-bottom: 1px solid color-mix(in oklab, CanvasText 8%, transparent); padding: 12px 0; }
.history-item:last-child { border-bottom: none; }
.history-header { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.history-action { font-weight: 600; }
.history-time { font-size: 12px; opacity: .6; }
.history-config { background: color-mix(in oklab, CanvasText 4%, Canvas); padding: 8px 10px; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; line-height: 1.5; margin-top: 6px; overflow-x: auto; }
.history-config-line { margin: 2px 0; }
.history-config.hidden { display: none; }
.toggle-config { font-size: 12px; color: color-mix(in oklab, CanvasText 70%, transparent); cursor: pointer; text-decoration: underline; user-select: none; }
.toggle-config:hover { color: CanvasText; }
.action-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.action-add { background: color-mix(in oklab, #00cc66 20%, Canvas); color: #00aa55; }
.action-remove { background: color-mix(in oklab, #ff4444 20%, Canvas); color: #dd2222; }
.action-update { background: color-mix(in oklab, #4488ff 20%, Canvas); color: #2266dd; }
.action-fetch { background: color-mix(in oklab, #00cccc 20%, Canvas); color: #00aaaa; }
.action-toggle_workshop { background: color-mix(in oklab, #ff9900 20%, Canvas); color: #dd7700; }
.action-toggle_mod_id { background: color-mix(in oklab, #9966ff 20%, Canvas); color: #7744dd; }
.action-reorder { background: color-mix(in oklab, #ffcc00 20%, Canvas); color: #ddaa00; }
.mod-description { margin-top: 4px; font-size: 12px; opacity: .85; line-height: 1.4; max-width: 500px; white-space: pre-wrap; background: color-mix(in oklab, CanvasText 3%, Canvas); padding: 8px; border-radius: 6px; }
.mod-description.hidden { display: none; }
.toggle-description { font-size: 11px; color: color-mix(in oklab, CanvasText 60%, transparent); cursor: pointer; text-decoration: underline; user-select: none; }
.toggle-description:hover { color: CanvasText; }
.pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; }
.pagination button { min-width: 32px; }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .page-info { font-size: 12px; opacity: .7; }