/* Skins module - author: astrix
 * The site themes style bare button / img / input / div elements (padding, width, max-width, overflow, shadows...).
 * Every element of the module therefore sets its own box explicitly; floating parts (menu, tooltip, modal) are styled
 * by id so theme classes can't win over them. */
:root {
    --sk-bg: var(--card, #161618);
    --sk-panel: #1c1c1f;
    --sk-tile: #232326;
    --sk-tile-hover: #2a2a2e;
    --sk-line: rgba(255, 255, 255, .06);
    --sk-text: #e8e8ea;
    --sk-muted: #8d8f96;
    --sk-accent: #7d95ff;
    --sk-accent-2: #6f86f5;
    --sk-danger: #e5484d;
    --sk-ok: #37c27a;
    --sk-r: 12px;
    --sk-r-sm: 9px;
    --sk-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ reset against theme styles */
.sk, .sk-admin, .sk-top-tabs, #sk-modal, #sk-tip, #sk-float-menu, .sk-install { color: var(--sk-text); font-size: 14px; line-height: 1.35; text-align: left; }
.sk *, .sk-admin *, .sk-top-tabs *, #sk-modal *, #sk-tip *, #sk-float-menu *, .sk-install * { box-sizing: border-box; }
.sk button, .sk-admin button, #sk-modal button, #sk-float-menu button {
    margin: 0 !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important;
    font: inherit !important; font-size: inherit !important; line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important;
    color: inherit; cursor: pointer; border: 0 !important; outline: none !important; box-shadow: none; overflow: visible; text-decoration: none !important;
    -webkit-appearance: none; appearance: none; text-indent: 0; float: none;
}
.sk button::before, .sk button::after, #sk-modal button::before, #sk-modal button::after, #sk-float-menu button::before, #sk-float-menu button::after { content: none; }
.sk button:disabled, #sk-modal button:disabled { opacity: .45; cursor: default; }
.sk img, .sk-admin img, #sk-modal img, #sk-tip img, #sk-float-menu img { display: block; width: auto; height: auto; max-width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; float: none; }
.sk svg, .sk-admin svg, #sk-modal svg, #sk-float-menu svg, .sk-top-tabs svg { width: 18px; height: 18px; flex: none; display: block; }
.sk p, .sk h3, .sk-admin h3, .sk dl, .sk dd { margin: 0; }
.sk-noscroll { overflow: hidden !important; }

/* ------------------------------------------------------------------ top tabs (admins) */
.sk-top-tabs { display: flex; gap: 8px; padding: 10px; margin-bottom: 14px; background: var(--sk-bg); border-radius: var(--sk-r); flex-wrap: wrap; }
.sk-top-tabs a { display: flex !important; align-items: center; gap: 8px; padding: 10px 18px !important; border-radius: var(--sk-r-sm); color: var(--sk-text) !important; text-decoration: none !important; background: var(--sk-tile); font-weight: 600; transition: background .2s; }
.sk-top-tabs a:hover { background: var(--sk-tile-hover); }
.sk-top-tabs a.active { background: var(--sk-accent); color: #fff !important; }

/* ------------------------------------------------------------------ layout */
.sk { display: grid !important; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; }
.sk-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 14px; min-width: 0; }
.sk-main { background: var(--sk-bg); border-radius: var(--sk-r); min-height: 640px; overflow: hidden; min-width: 0; }
.sk-panel { background: var(--sk-bg); border-radius: var(--sk-r); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sk-side-body { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 290px); min-height: 300px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; margin-right: -4px; }
.sk-side-body::-webkit-scrollbar, #st-grid::-webkit-scrollbar { width: 4px; }
.sk-side-body::-webkit-scrollbar-thumb, #st-grid::-webkit-scrollbar-thumb { background: var(--sk-accent); border-radius: 4px; }

/* ------------------------------------------------------------------ alert */
.sk-alert { position: relative; padding: 18px 50px 18px 22px; border-radius: var(--sk-r); background: linear-gradient(120deg, #26315a, #2c3870 60%, #3a3f8a); overflow: hidden; animation: sk-in .35s var(--sk-ease); }
.sk-alert[hidden] { display: none !important; }
.sk-alert-title { font-size: 22px; font-weight: 800; color: #8fa6ff; margin-bottom: 6px; }
.sk-alert-text { color: #c8cee6; line-height: 1.45; }
.sk-alert-text b { color: #fff; }
.sk .sk-alert-close { position: absolute; top: 12px; right: 12px; width: 28px !important; height: 28px !important; padding: 0 !important; border-radius: 50% !important; background: #fff !important; color: #222 !important; display: grid !important; place-items: center; }
.sk-alert-close svg { width: 16px !important; height: 16px !important; }

/* ------------------------------------------------------------------ segment + common controls */
.sk-segment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.sk .sk-segment button { width: 100% !important; height: 44px !important; padding: 0 10px !important; border-radius: var(--sk-r-sm) !important; background: var(--sk-tile) !important; color: var(--sk-text) !important; font-weight: 600 !important; display: block !important; text-align: center; transition: background .2s, color .2s; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; }
.sk .sk-segment button.active { background: #fff !important; color: #111 !important; }

.sk .sk-btn, #sk-modal .sk-btn, .sk-admin .sk-btn, .sk-install .sk-btn {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: auto; height: 42px !important; padding: 0 16px !important;
    border-radius: var(--sk-r-sm) !important; background: var(--sk-tile) !important; color: var(--sk-text) !important; font-weight: 600 !important; white-space: nowrap; transition: background .2s, transform .15s;
}
.sk-btn:hover:not(:disabled) { background: var(--sk-tile-hover) !important; }
.sk-btn:active:not(:disabled) { transform: scale(.97); }
.sk .sk-btn-primary, #sk-modal .sk-btn-primary, .sk-admin .sk-btn-primary, .sk-install .sk-btn-primary { background: var(--sk-accent) !important; color: #fff !important; }
.sk-btn-primary:hover:not(:disabled) { background: var(--sk-accent-2) !important; }
.sk .sk-btn-danger, #sk-modal .sk-btn-danger { background: rgba(229, 72, 77, .16) !important; color: #ff8a8d !important; }
.sk .sk-btn-ok { background: rgba(55, 194, 122, .16) !important; color: #6ee0a3 !important; }
.sk .sk-btn.sk-liked { color: #ff6b70 !important; }
.sk-btn.loading { pointer-events: none; opacity: .7; }
.sk .sk-w100, #sk-modal .sk-w100, .sk-admin .sk-w100, .sk-install .sk-w100 { width: 100% !important; }
.sk .sk-icon-btn, .sk-admin .sk-icon-btn, #sk-modal .sk-icon-btn { width: 32px !important; height: 32px !important; padding: 0 !important; display: inline-grid !important; place-items: center; border-radius: 8px !important; background: transparent !important; color: var(--sk-muted) !important; transition: background .2s, color .2s; flex: none; }
.sk-icon-btn:hover { background: var(--sk-tile-hover) !important; color: var(--sk-text) !important; }
.sk .sk-danger, .sk-admin .sk-danger { color: var(--sk-danger) !important; }

.sk .sk-input, #sk-modal .sk-input, .sk-admin input[type=text], .sk-admin input[type=number], .sk-admin select, .sk-install input {
    display: block; width: 100% !important; height: 42px !important; margin: 0 !important; padding: 0 14px !important; border-radius: var(--sk-r-sm) !important;
    border: 1px solid var(--sk-line) !important; background: var(--sk-tile) !important; color: var(--sk-text) !important; font: inherit !important; outline: none !important; box-shadow: none !important; transition: border-color .2s;
}
.sk-input:focus, .sk-admin input:focus, .sk-admin select:focus { border-color: var(--sk-accent) !important; }
#sk-modal .sk-input-sm { width: 110px !important; flex: none; }

.sk-search { display: flex !important; align-items: center; gap: 10px; height: 44px; padding: 0 14px; margin: 0; border-radius: var(--sk-r-sm); background: var(--sk-tile); color: var(--sk-muted); flex-direction: row-reverse; cursor: text; }
.sk-search input { flex: 1; min-width: 0; width: auto !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--sk-text) !important; font: inherit !important; outline: none !important; box-shadow: none !important; }

.sk .sk-back { display: flex !important; align-items: center; justify-content: center; gap: 6px; width: 100% !important; height: 42px !important; padding: 0 12px !important; border-radius: var(--sk-r-sm) !important; background: var(--sk-tile) !important; color: var(--sk-muted) !important; font-weight: 600 !important; }
.sk .sk-back:hover { color: var(--sk-text) !important; }
.sk .sk-back-sm { display: inline-flex !important; align-items: center; gap: 4px; height: 32px !important; padding: 0 10px !important; border-radius: 8px !important; background: var(--sk-tile) !important; color: var(--sk-muted) !important; font-size: 13px !important; flex: none; }

.sk-sep { display: flex; align-items: center; gap: 10px; color: var(--sk-muted); font-size: 13px; margin-top: 4px; }
.sk-sep::after { content: ''; flex: 1; height: 1px; background: var(--sk-line); }
.sk-muted { color: var(--sk-muted); padding: 10px 2px; font-size: 13px; grid-column: 1 / -1; }
.sk-side-label { font-weight: 600; }
.sk-empty-side { padding: 30px 10px; text-align: center; color: var(--sk-muted); }

/* switch */
.sk-switch-row, .sk-st-toggle { display: flex !important; align-items: center; gap: 10px; cursor: pointer; user-select: none; padding: 4px 0; margin: 0; font-weight: 500; }
.sk-switch-row input, .sk-st-toggle input { display: none !important; }
.sk-switch { width: 42px; height: 24px; border-radius: 24px; background: #34343a; position: relative; flex: none; transition: background .2s; }
.sk-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #9a9aa2; transition: transform .25s var(--sk-ease), background .2s; }
input:checked + .sk-switch { background: var(--sk-accent); }
input:checked + .sk-switch::after { transform: translateX(18px); background: #fff; }
.sk-st-toggle { padding: 0 14px; height: 42px; border-radius: var(--sk-r-sm); background: rgba(255, 140, 40, .12); color: #ffb26b; font-weight: 600; }
.sk-st-toggle input:checked + .sk-switch { background: #ff8c28; }

/* ------------------------------------------------------------------ my collections */
.sk .sk-create { display: flex !important; align-items: center; gap: 14px; width: 100% !important; height: auto !important; padding: 14px !important; border-radius: var(--sk-r) !important; border: 1px dashed rgba(255, 255, 255, .14) !important; background: transparent !important; text-align: left; transition: background .2s; }
.sk .sk-create:hover:not(:disabled) { background: var(--sk-tile) !important; }
.sk-create b { display: block; font-size: 15px; }
.sk-create small { display: block; color: var(--sk-muted); font-size: 12px; }
.sk-create-plus { width: 40px; height: 40px; border-radius: 10px; background: var(--sk-tile); display: grid; place-items: center; flex: none; }
.sk-col-list { display: flex; flex-direction: column; gap: 6px; }
.sk-col-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: var(--sk-r-sm); background: var(--sk-tile); cursor: pointer; overflow: hidden; transition: background .2s; animation: sk-in .3s var(--sk-ease) both; min-height: 62px; }
.sk-col-row:hover { background: var(--sk-tile-hover); }
.sk-col-row.current { box-shadow: inset 0 0 0 1px rgba(125, 149, 255, .35); background: #24283a; }
.sk-col-row.current b { color: var(--sk-accent); }
.sk-col-info { flex: 1; min-width: 0; z-index: 1; }
.sk-col-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-col-info span { display: block; color: var(--sk-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-ok { color: var(--sk-ok); font-style: normal; }
.sk-col-cover { width: 90px; height: 44px; flex: none; display: grid; place-items: center; opacity: .55; }
.sk .sk-col-cover img { max-width: 90px; max-height: 44px; object-fit: contain; }
.sk-col-row:hover .sk-col-cover { opacity: .9; }
.sk-q { color: var(--sk-muted); font-weight: 700; font-size: 20px; }
.sk .sk-col-dots { position: absolute !important; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0; background: rgba(0, 0, 0, .45) !important; color: #fff !important; z-index: 2; }
.sk-col-row:hover .sk-col-dots { opacity: 1; }

/* author panel */
.sk-author { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--sk-r-sm); background: var(--sk-tile); }
.sk .sk-author img, .sk-author-ph { width: 46px !important; height: 46px !important; max-width: none; border-radius: 10px !important; object-fit: cover; display: grid; place-items: center; background: #2c2c31; flex: none; }
.sk-author small { display: block; color: var(--sk-muted); font-size: 12px; }
.sk-author b { font-size: 16px; }
.sk-stats { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 6px 4px; }
.sk-stats > div { display: flex; align-items: baseline; gap: 8px; }
.sk-stats > div::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted rgba(255, 255, 255, .15); }
.sk-stats dt { display: flex; align-items: center; gap: 6px; color: #cfd0d6; order: 0; font-weight: 400; }
.sk-stats dt svg { width: 15px !important; height: 15px !important; color: var(--sk-muted); }
.sk-stats dd { margin: 0; order: 2; font-weight: 600; }

/* ------------------------------------------------------------------ picker */
.sk-picker { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sk-picker-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sk-picker-head b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sk-wgrid-big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk .sk-wtile { width: 100% !important; height: 82px !important; padding: 8px !important; border-radius: var(--sk-r-sm) !important; background: var(--sk-tile) !important; display: grid !important; place-items: center; position: relative; overflow: hidden !important; transition: background .2s, transform .2s; }
.sk .sk-wtile:hover { background: var(--sk-tile-hover) !important; transform: translateY(-2px); }
.sk .sk-wtile img { max-width: 100%; max-height: 62px; object-fit: contain; transition: transform .3s var(--sk-ease); }
.sk .sk-wtile:hover img { transform: scale(1.06); }
.sk-wtile.has::after { content: '' !important; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--sk-accent); }
.sk .sk-more { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.sk-more b { font-size: 15px; }
.sk-more span { color: var(--sk-muted); font-size: 12px; }
.sk .sk-otile { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: var(--sk-muted) !important; }
.sk .sk-otile img { width: 34px !important; height: 34px !important; }
.sk .sk-otile svg { width: 30px !important; height: 30px !important; }
.sk-otile span { font-size: 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.sk-rarity { display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 6px; }
.sk .sk-rarity button, #sk-modal .sk-rarity button { width: 100% !important; height: 36px !important; padding: 0 6px !important; border-radius: 8px !important; background: var(--sk-tile) !important; border: 1px solid transparent !important; display: grid !important; place-items: center; font-weight: 600 !important; color: var(--sk-accent) !important; transition: border-color .2s, background .2s; }
.sk .sk-rarity button.active, #sk-modal .sk-rarity button.active { border-color: rgba(255, 255, 255, .25) !important; background: #2b2b30 !important; }
.sk .sk-bolt, #sk-modal .sk-bolt { width: 16px !important; height: 16px !important; }

.sk-sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sk-stile { position: relative; height: 88px; min-width: 0; border-radius: var(--sk-r-sm); background: radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%), var(--sk-tile); display: grid; place-items: center; padding: 8px; cursor: pointer; overflow: hidden; transition: transform .2s, box-shadow .2s; animation: sk-in .25s var(--sk-ease) both; }
.sk-sgrid-tall .sk-stile { height: 120px; }
.sk-stile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent); }
.sk-stile.in { box-shadow: 0 0 0 1px var(--sk-accent); }
.sk .sk-stile > img { max-width: 100%; max-height: 66px; object-fit: contain; }
.sk-sgrid-tall .sk-stile > img { max-height: 100px; }
.sk-stile-dot { position: absolute; left: 8px; bottom: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--rc); }
.sk-stile-teams { position: absolute; top: 6px; left: 6px; display: flex; gap: 2px; z-index: 1; }
.sk .sk-stile-teams .sk-team-ico { width: 16px !important; height: 16px !important; }
.sk .sk-stile-btn { position: absolute !important; width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center; opacity: 0; transition: opacity .2s, transform .2s; z-index: 2; }
.sk-stile:hover .sk-stile-btn { opacity: 1; }
.sk .sk-stile-add { top: 6px; right: 6px; background: rgba(229, 72, 77, .92) !important; color: #fff !important; }
.sk .sk-stile-del { bottom: 6px; right: 6px; width: 28px !important; height: 14px !important; border-radius: 8px !important; background: var(--sk-danger) !important; color: #fff !important; }
.sk .sk-stile-del svg { width: 16px !important; height: 16px !important; }
.sk-new { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 6px; background: var(--sk-accent); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .3px; z-index: 1; line-height: 1.4; }
.sk-stile.in .sk-new { left: auto; right: 40px; }

/* ------------------------------------------------------------------ main area */
.sk-main-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-bottom: 1px solid var(--sk-line); }
.sk-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.sk-title > b { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-info-wrap { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sk-tile); color: var(--sk-muted); cursor: help; flex: none; }
.sk .sk-info-wrap svg { width: 16px !important; height: 16px !important; }
.sk-info-pop { position: absolute; top: 34px; left: 0; z-index: 20; padding: 12px 14px; border-radius: var(--sk-r-sm); background: #26262b; color: var(--sk-text); font-size: 13px; line-height: 1.7; white-space: nowrap; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .2s; }
.sk-info-wrap:hover .sk-info-pop { opacity: 1; transform: none; }

.sk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 14px; }
.sk-tile { position: relative; height: 210px; min-width: 0; border-radius: var(--sk-r); background: var(--sk-tile); padding: 14px; display: flex; flex-direction: column; overflow: hidden; transition: transform .2s var(--sk-ease), box-shadow .2s, background .2s; animation: sk-in .3s var(--sk-ease) both; }
.sk-tile.filled { background: radial-gradient(140% 100% at 30% 110%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 65%), linear-gradient(180deg, #252529, #1f1f23); }
.sk-tile.clickable, .sk-tile.empty { cursor: pointer; }
.sk-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--rc, #555) 45%, transparent); }
.sk-tile.empty { background: transparent; border: 1px solid var(--sk-line); }
.sk-tile.empty:hover { background: rgba(255, 255, 255, .02); }
.sk-tile.selected { box-shadow: 0 0 0 2px var(--sk-accent); }
.sk-tile-img { flex: 1; display: grid; place-items: center; min-height: 0; }
.sk .sk-tile-img img { max-width: 92%; max-height: 120px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); transition: transform .35s var(--sk-ease); }
.sk-tile:hover .sk-tile-img img { transform: scale(1.06) rotate(-1.5deg); }
.sk .sk-tile-img .sk-silhouette { filter: grayscale(1) brightness(.45) contrast(.8); opacity: .65; transform: none !important; }
.sk-slot-ico { color: #4a4a50; }
.sk .sk-slot-ico svg { width: 46px !important; height: 46px !important; }
.sk-tile-text { display: flex; flex-direction: column; gap: 2px; z-index: 1; min-width: 0; }
.sk-tile-text span { font-size: 13px; color: #d9dae0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-tile-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-tile-text.sk-add { align-items: center; text-align: center; color: #5d5e64; }
.sk-tile-text.sk-add span { color: #5d5e64; font-size: 15px; }
.sk-tile-text.sk-add b { color: #6a6b72; font-weight: 600; }
.sk-tile-team { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .06); display: grid; place-items: center; z-index: 1; }
.sk .sk-team-ico, #sk-tip .sk-team-ico { width: 20px !important; height: 20px !important; }
.sk-check { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 7px; border: 2px solid rgba(255, 255, 255, .3); display: grid; place-items: center; z-index: 1; }
.sk-tile.selected .sk-check { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }
.sk-tile-side { position: absolute; right: 10px; top: 52px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 9px; background: rgba(0, 0, 0, .3); z-index: 1; }
.sk-tile-side span { width: 26px; height: 22px; display: grid; place-items: center; }
.sk .sk-tile-side img { max-width: 26px; max-height: 22px; }
.sk-st { display: inline-block; padding: 0 5px; border-radius: 5px; border: 1px solid #ff8c28; color: #ff9d4a; font-style: normal; font-size: 11px; line-height: 16px; }

.sk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 420px; color: var(--sk-muted); text-align: center; padding: 30px; grid-column: 1 / -1; }
.sk-empty b { color: var(--sk-text); font-size: 18px; }
.sk-empty-in { min-height: 300px; }
.sk-empty-ico { width: 64px; height: 64px; border-radius: 18px; background: var(--sk-tile); display: grid; place-items: center; }
.sk .sk-empty-ico svg { width: 30px !important; height: 30px !important; }

/* ------------------------------------------------------------------ community */
.sk-ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 10px; padding: 14px; }
.sk-ccard { border-radius: var(--sk-r); background: var(--sk-panel); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; animation: sk-in .3s var(--sk-ease) both; }
.sk-ccard-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sk-ccard-head > b { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sk-chip { padding: 3px 9px; border-radius: 7px; background: var(--sk-tile); color: var(--sk-muted); font-size: 12px; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.sk-ccard-stats { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--sk-muted); font-weight: 600; flex: none; }
.sk-ccard-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.sk .sk-like { display: inline-flex !important; align-items: center; gap: 5px; height: auto !important; padding: 0 !important; background: none !important; color: var(--sk-muted) !important; font-weight: 600 !important; transition: color .2s, transform .2s; }
.sk .sk-like:hover { transform: scale(1.08); }
.sk .sk-like.liked { color: #ff5d63 !important; }
.sk .sk-copy-btn { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 10px !important; background: var(--sk-accent) !important; color: #fff !important; display: grid !important; place-items: center; flex: none; transition: background .2s, transform .15s; }
.sk .sk-copy-btn:hover { background: var(--sk-accent-2) !important; }
.sk .sk-copy-btn:active { transform: scale(.94); }
.sk-ccard-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sk .sk-mini { width: 100% !important; height: 70px !important; min-width: 0; padding: 6px !important; border-radius: 9px !important; background: radial-gradient(120% 100% at 50% 120%, color-mix(in srgb, var(--rc, #444) 35%, transparent), transparent 70%), var(--sk-tile) !important; display: grid !important; place-items: center; cursor: pointer; overflow: hidden; transition: transform .2s; }
.sk .sk-mini:hover { transform: translateY(-2px); }
.sk .sk-mini img { max-width: 100%; max-height: 56px; object-fit: contain; }
.sk .sk-mini-empty { cursor: default; opacity: .4; }
.sk .sk-mini-go { font-weight: 700 !important; color: var(--sk-text) !important; }
.sk .sk-mini-go:hover { background: var(--sk-tile-hover) !important; }
.sk-sort { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: var(--sk-r-sm); background: var(--sk-tile); }
.sk .sk-sort button { display: block !important; width: 100% !important; height: auto !important; padding: 10px 12px !important; border-radius: 8px !important; background: transparent !important; color: var(--sk-muted) !important; text-align: left; transition: background .2s, color .2s; }
.sk .sk-sort button:hover { background: rgba(255, 255, 255, .04) !important; }
.sk .sk-sort button.active { background: #2e2e34 !important; color: var(--sk-text) !important; }

.sk-pages-main { display: flex; justify-content: center; padding: 6px 14px 20px; }
.sk-pages { display: flex; justify-content: center; }
.sk-pager { display: inline-flex; border-radius: var(--sk-r-sm); overflow: hidden; background: var(--sk-tile); max-width: 100%; }
.sk .sk-pager button, #sk-modal .sk-pager button { width: auto !important; min-width: 42px !important; height: 40px !important; padding: 0 10px !important; background: transparent !important; color: var(--sk-text) !important; font-weight: 600 !important; border-right: 1px solid var(--sk-line) !important; border-radius: 0 !important; transition: background .2s; }
.sk .sk-pager button:hover, #sk-modal .sk-pager button:hover { background: var(--sk-tile-hover) !important; }
.sk .sk-pager button.active, #sk-modal .sk-pager button.active { background: var(--sk-accent) !important; color: #fff !important; }

/* ------------------------------------------------------------------ tooltip */
#sk-tip { position: fixed !important; z-index: 100050 !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; background: none !important; width: auto !important; animation: sk-fade .15s ease; }
#sk-tip[hidden] { display: none !important; }
#sk-tip .sk-tip-skin, #sk-tip .sk-tip-card { background: #1e1e22 !important; border-radius: var(--sk-r); box-shadow: 0 16px 42px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05); overflow: hidden; }
#sk-tip .sk-tip-skin { width: 340px; padding: 14px; }
#sk-tip .sk-tip-skin img { width: 100%; height: 170px; object-fit: contain; border-radius: 9px; background: radial-gradient(100% 90% at 50% 110%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 70%), #2a1b1e; padding: 12px; }
#sk-tip .sk-tip-skin b { display: block; margin-top: 10px; color: var(--rc); font-size: 15px; }
#sk-tip .sk-tip-card { width: 330px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
#sk-tip .sk-tip-img { height: 170px; border-radius: 9px; display: grid; place-items: center; background: radial-gradient(100% 90% at 50% 110%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 70%), #241b1e; padding: 12px; }
#sk-tip .sk-tip-img img { max-width: 100%; max-height: 146px; object-fit: contain; }
#sk-tip .sk-tip-card > b { font-size: 16px; }
#sk-tip .sk-tip-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
#sk-tip .sk-tip-grid div { padding: 8px 10px; border-radius: 8px; background: #26262b; min-width: 0; }
#sk-tip .sk-tip-grid small { display: block; color: var(--sk-muted); font-size: 12px; }
#sk-tip .sk-tip-grid span { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ floating menu */
#sk-float-menu {
    position: fixed !important; z-index: 100060 !important; display: flex !important; flex-direction: column; gap: 2px;
    width: max-content !important; min-width: 230px !important; max-width: 320px !important; height: auto !important; margin: 0 !important; padding: 6px !important;
    border: 0 !important; border-radius: var(--sk-r) !important; background: #1f1f23 !important; color: var(--sk-text) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06) !important; overflow: visible !important; animation: sk-pop .16s var(--sk-ease);
}
#sk-float-menu button {
    display: flex !important; align-items: center; gap: 12px; width: 100% !important; height: auto !important; padding: 11px 12px !important;
    border-radius: 8px !important; background: transparent !important; color: #d0d1d6 !important; text-align: left; white-space: nowrap; transition: background .15s;
}
#sk-float-menu button span { flex: 1; white-space: nowrap; overflow: visible; }
#sk-float-menu button:hover { background: #2b2b30 !important; color: #fff !important; }
#sk-float-menu button.danger:hover { color: #ff8a8d !important; }
#sk-float-menu svg { color: var(--sk-muted); }
#sk-float-menu .sk-menu-ico { width: 22px !important; height: 22px !important; flex: none; }

/* ------------------------------------------------------------------ modal */
#sk-modal { position: fixed !important; inset: 0 !important; z-index: 100040 !important; background: rgba(5, 5, 8, .72) !important; backdrop-filter: blur(4px); display: grid !important; place-items: center; padding: 20px; margin: 0; animation: sk-fade .2s ease; }
#sk-modal[hidden] { display: none !important; }
#sk-modal-box { width: 100%; max-height: calc(100vh - 40px); overflow: auto; background: #1a1a1d !important; border-radius: 16px; padding: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: sk-pop .25s var(--sk-ease); }
#sk-modal-box.sk-modal-sm { max-width: 440px; }
#sk-modal-box.sk-modal-md { max-width: 560px; }
#sk-modal-box.sk-modal-lg { max-width: 1080px; }
#sk-modal .sk-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
#sk-modal .sk-modal-head b { font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#sk-modal .sk-x { width: 34px !important; height: 34px !important; padding: 0 !important; border-radius: 9px !important; background: transparent !important; font-size: 26px !important; line-height: 1 !important; color: var(--sk-muted) !important; display: grid !important; place-items: center; flex: none; }
#sk-modal .sk-x:hover { background: var(--sk-tile) !important; color: #fff !important; }
#sk-modal .sk-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

#sk-modal .sk-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
#sk-modal .sk-set-single { grid-template-columns: minmax(0, 1fr); }
#sk-modal .sk-set-left, #sk-modal .sk-set-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#sk-modal .sk-set-search { display: flex; gap: 8px; }
#sk-modal .sk-set-search .sk-search { flex: 1; min-width: 0; }
#sk-modal .sk-set-part { display: flex; gap: 4px; padding: 4px; border-radius: var(--sk-r-sm); background: var(--sk-tile); flex: none; }
#sk-modal .sk-set-part button { width: 40px !important; height: 36px !important; padding: 0 !important; border-radius: 7px !important; display: grid !important; place-items: center; background: transparent !important; color: var(--sk-muted) !important; }
#sk-modal .sk-set-part button.active { background: var(--sk-accent) !important; color: #fff !important; }
#st-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; max-height: 460px; overflow-y: auto; overflow-x: hidden; align-content: start; }
#sk-modal .sk-st-tile {
    width: 100% !important; height: 100px !important; min-width: 0 !important; padding: 8px 6px !important; border-radius: var(--sk-r-sm) !important;
    background: radial-gradient(120% 100% at 50% 120%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%), var(--sk-tile) !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden !important; transition: transform .2s, box-shadow .2s;
}
#sk-modal .sk-st-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent); }
#sk-modal .sk-st-tile img { width: auto !important; max-width: 72% !important; max-height: 56px !important; object-fit: contain; flex: none; }
#sk-modal .sk-st-tile span { display: block; width: 100%; font-size: 11px; line-height: 1.25; text-align: center; color: var(--rc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sk-modal .sk-set-preview { position: relative; height: 230px; border-radius: var(--sk-r); background: radial-gradient(110% 100% at 50% 120%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 70%), #241c1f; display: grid; place-items: center; padding: 16px 16px 60px; }
#sk-modal .sk-set-preview > img { max-width: 80%; max-height: 150px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .4)); }
#sk-modal .sk-set-slots { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
#sk-modal .sk-slot { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 9px !important; background: rgba(0, 0, 0, .35) !important; border: 1px solid rgba(255, 255, 255, .1) !important; display: grid !important; place-items: center; color: var(--sk-muted) !important; transition: border-color .2s; }
#sk-modal .sk-slot i { font-style: normal; color: var(--sk-muted); font-size: 12px; }
#sk-modal .sk-slot img { max-width: 32px !important; max-height: 32px !important; }
#sk-modal .sk-slot.active { border-color: #fff !important; }
#sk-modal .sk-slot-key { margin-left: 6px !important; }
#sk-modal .sk-set-team { position: absolute; right: 14px; bottom: 22px; font-weight: 600; color: #d0d1d6; }
#sk-modal .sk-set-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
#sk-modal .sk-set-row .sk-st-toggle { flex: 1; min-width: 0; }
#sk-modal .sk-set-label { color: var(--sk-muted); font-size: 13px; margin-top: 2px; }
#sk-modal .sk-team-pick { display: flex; gap: 4px; padding: 4px; border-radius: var(--sk-r-sm); background: var(--sk-tile); margin-left: auto; flex: none; }
#sk-modal .sk-team-pick button { width: 40px !important; height: 34px !important; padding: 0 !important; border-radius: 7px !important; display: grid !important; place-items: center; background: transparent !important; transition: background .2s; }
#sk-modal .sk-team-pick button img { width: 22px !important; height: 22px !important; }
#sk-modal .sk-team-pick button.active { background: #34343b !important; }
#sk-modal .sk-wear-btns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; flex: 1; min-width: 0; }
#sk-modal .sk-wear-btns button { width: 100% !important; height: 40px !important; padding: 0 !important; border-radius: 8px !important; background: var(--sk-tile) !important; color: var(--sk-text) !important; font-weight: 600 !important; transition: background .2s, color .2s; }
#sk-modal .sk-wear-btns button.active { background: #2f3550 !important; color: var(--sk-accent) !important; }
#sk-modal .sk-range { -webkit-appearance: none; appearance: none; display: block; width: 100% !important; height: 6px !important; margin: 8px 0 !important; padding: 0 !important; border: 0 !important; border-radius: 6px; background: linear-gradient(90deg, var(--sk-accent), #4a5ccc); outline: none; box-shadow: none !important; }
#sk-modal .sk-range-wear { background: linear-gradient(90deg, #2a9fd6 0 7%, #5bb04a 7% 15%, #d6c13a 15% 38%, #e6862f 38% 45%, #e5484d 45% 100%); }
#sk-modal .sk-set-row .sk-range { flex: 1; min-width: 0; }
#sk-modal .sk-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #1a1a1d; box-shadow: 0 0 0 2px #fff; cursor: pointer; }
#sk-modal .sk-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #1a1a1d; cursor: pointer; }

/* ------------------------------------------------------------------ admin */
.sk-admin { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sk-admin-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sk-card { background: var(--sk-bg); border-radius: var(--sk-r); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; animation: sk-in .3s var(--sk-ease) both; }
.sk-card h3 { margin: 0 0 4px !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--sk-line); font-size: 17px !important; color: var(--sk-text); }
.sk-card small { color: var(--sk-muted); line-height: 1.5; padding: 10px 12px; border-radius: var(--sk-r-sm); background: var(--sk-tile); display: block; font-size: 13px; }
.sk-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-field > b { font-size: 15px; }
.sk-inline { display: flex; gap: 8px; min-width: 0; }
.sk-inline input { flex: 1; min-width: 0; }
.sk-inline .sk-btn { flex: none; width: 46px !important; padding: 0 !important; }
.sk-table { display: flex; flex-direction: column; border-radius: var(--sk-r-sm); background: var(--sk-tile); overflow: hidden; }
.sk-table-head, .sk-table-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 40px; align-items: center; gap: 10px; padding: 10px 14px; }
#adm-ready .sk-table-head, #adm-ready .sk-table-row { grid-template-columns: 26px 50px minmax(0, 1fr) 60px 40px; }
.sk-table-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-table-head { color: var(--sk-muted); font-size: 13px; }
.sk-table-row { border-top: 1px solid var(--sk-line); font-weight: 600; transition: background .2s; }
.sk-table-row.dragging { opacity: .5; background: #2b2b30; }
.sk-drag { cursor: grab; color: var(--sk-muted); font-size: 18px; }
.sk-cache-icons { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px; border-radius: var(--sk-r-sm); background: var(--sk-tile); }
.sk-cache-icon { width: 48px; height: 48px; border-radius: 10px; background: #2b2b30; color: #6a6b72; display: grid; place-items: center; }
.sk-admin .sk-cache-icon svg { width: 24px !important; height: 24px !important; }
.sk-cache-icon.ok { background: rgba(55, 194, 122, .14); color: #4fd38b; }
.sk-admin .sk-switch-row { color: var(--sk-text); }

.sk-install { max-width: 520px; margin: 30px auto; background: var(--sk-bg); border-radius: var(--sk-r); padding: 26px; }
.sk-install form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.sk-install label span { display: block; margin-bottom: 6px; color: var(--sk-muted); }

/* ------------------------------------------------------------------ misc */
.sk-loader { width: 34px; height: 34px; margin: 26px auto; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--sk-accent); animation: sk-spin .8s linear infinite; grid-column: 1 / -1; }
.sk-loader-big { width: 46px; height: 46px; margin: 140px auto; }
.sk-img-missing { opacity: .35; }

@keyframes sk-spin { to { transform: rotate(360deg); } }
@keyframes sk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sk-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 1280px) {
    .sk-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .sk { grid-template-columns: minmax(0, 1fr); }
    .sk-side { position: static; }
    .sk-side-body { max-height: none; }
    #sk-modal .sk-set { grid-template-columns: minmax(0, 1fr); }
    .sk-admin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .sk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sk-tile { height: 180px; }
    .sk-ccard-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    #sk-tip { display: none !important; }
}