body.dash { --pw: 400px; display: grid; grid-template-columns: 250px minmax(0, 1fr) var(--pw); height: 100vh; overflow: hidden; background: var(--bg); }
.hidden { display: none !important; }
.muted { color: var(--dim); font-size: 13px; font-weight: 400; }

.side { border-right: 1px solid var(--line); padding: 22px 16px; display: flex; flex-direction: column; background: var(--bg-2); }
.side .logo { padding: 0 8px; margin-bottom: 28px; }
.side-nav { display: grid; gap: 4px; }
.side-nav button {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 0; background: none;
  color: var(--muted); font-weight: 500; cursor: pointer; text-align: left; transition: .15s;
}
.side-nav svg { width: 19px; height: 19px; fill: currentColor; }
.side-nav button:hover { background: var(--panel-2); color: var(--text); }
.side-nav button.active { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 2px 0 0 var(--accent); }
.side-foot { margin-top: auto; display: grid; gap: 12px; }
.me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.me img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.me div { flex: 1; min-width: 0; }
.me b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.me small { color: var(--dim); font-size: 12px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }

.main { overflow-y: auto; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 18px 32px;
  background: rgba(11, 11, 12, .8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.topbar h1 { font-family: var(--display); font-size: 24px; letter-spacing: -.02em; flex: 1; }
.menu-btn { display: none; }
.copy-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel);
  border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; cursor: pointer; color: var(--muted); transition: .15s;
}
.copy-link:hover { color: var(--text); border-color: var(--accent); }
.copy-link svg { width: 15px; height: 15px; fill: currentColor; }
.content { padding: 26px 32px 120px; display: grid; gap: 18px; container-type: inline-size; }
.tab { display: grid; gap: 18px; }
.panel { padding: 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.panel-head h2 { font-size: 16px; font-weight: 600; }
.hint { color: var(--dim); font-size: 13px; margin-top: 4px; }
.hint a { color: var(--accent-text); }
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { position: relative; overflow: hidden; padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.stat span { color: var(--muted); font-size: 13px; }
.stat b { display: block; font-family: var(--display); font-size: 30px; margin-top: 4px; letter-spacing: -.02em; }
.si { position: absolute; right: -14px; top: -14px; width: 70px; height: 70px; border-radius: 50%; filter: blur(24px); opacity: .55; }
.si.v { background: var(--accent); } .si.c { background: var(--accent-2); } .si.u { background: #3b82f6; } .si.b { background: #f59e0b; }

.chart { height: 200px; display: flex; align-items: flex-end; gap: 6px; padding-top: 20px; }
.bar { flex: 1; position: relative; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), .25)); min-height: 3px; transition: .3s; }
.bar:hover { filter: brightness(1.3); }
.bar span { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--dim); white-space: nowrap; }
.bar em { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-style: normal; color: var(--muted); opacity: 0; transition: .15s; }
.bar:hover em { opacity: 1; }
.chart-wrap { padding-bottom: 20px; }

.progress { height: 6px; border-radius: 9px; background: var(--panel-2); overflow: hidden; margin-bottom: 14px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 9px; transition: .4s; }
.checklist { list-style: none; display: grid; gap: 8px; }
.checklist li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.checklist li::before { content: ''; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-2); flex: none; }
.checklist li.done { color: var(--text); }
.checklist li.done::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; border-color: var(--accent); }
.top-links { display: grid; gap: 8px; }
.top-link { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; }
.top-link b { font-weight: 600; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 8px; }
.span-2 { grid-column: span 2; }
.label output { color: var(--text); font-weight: 600; float: right; }
.range { width: 100%; height: 44px; accent-color: var(--accent); }
.color { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .35); }
.color input { width: 30px; height: 30px; border: 0; background: none; padding: 0; cursor: pointer; }
.color input::-webkit-color-swatch-wrapper { padding: 0; }
.color input::-webkit-color-swatch { border: 0; border-radius: 8px; }
.color span { font-family: ui-monospace, monospace; font-size: 13px; color: var(--muted); text-transform: uppercase; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

.toggles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }
.tg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); cursor: pointer; }
.tg input { display: none; }
.tg i { width: 38px; height: 22px; border-radius: 99px; background: #2a2635; position: relative; flex: none; transition: .2s; }
.tg i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #8b8599; transition: .2s; }
.tg input:checked + i { background: var(--accent); }
.tg input:checked + i::after { left: 19px; background: #fff; }
.tg span { font-size: 14px; font-weight: 500; }
.tg small { display: block; color: var(--dim); font-size: 12px; font-weight: 400; }

.assets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.asset {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; text-align: center;
  padding: 12px; border-radius: 16px; border: 1.5px dashed var(--line-2); cursor: pointer; transition: .2s; min-height: 170px; overflow: hidden;
}
.asset:hover, .asset.drag { border-color: var(--accent); background: var(--accent-soft); }
.asset-prev { flex: 1; width: 100%; border-radius: 10px; margin-bottom: 8px; display: grid; place-items: center; background: rgba(0, 0, 0, .3) center/cover no-repeat; min-height: 90px; color: var(--dim); font-size: 28px; overflow: hidden; }
.asset-prev video { width: 100%; height: 100%; object-fit: cover; }
.asset[data-kind=avatar] .asset-prev, .asset[data-kind=cursor] .asset-prev { background-size: contain; }
.asset b { font-size: 14px; }
.asset small { color: var(--dim); font-size: 11px; }
.asset-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 8px; border: 0; background: rgba(0, 0, 0, .7); color: #fff; cursor: pointer; display: none; font-size: 12px; }
.asset.has .asset-x { display: block; }
.asset.loading .asset-prev::after { content: ''; width: 26px; height: 26px; border: 3px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

.platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.plat { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); cursor: pointer; transition: .15s; }
.plat svg { width: 20px; height: 20px; fill: var(--muted); transition: .15s; }
.plat:hover { border-color: var(--accent); background: var(--accent-soft); }
.plat:hover svg { fill: #fff; }
.list { display: grid; gap: 8px; }
.list:empty::after { content: 'Nothing here yet.'; color: var(--dim); font-size: 14px; padding: 6px 2px; }
.item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.item .ico { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); }
.item .ico svg { width: 20px; height: 20px; fill: #fff; }
.item .input { height: 40px; }
.item .grow { flex: 1; min-width: 0; display: flex; gap: 8px; }
.item .clicks { font-size: 12px; color: var(--dim); white-space: nowrap; padding: 0 6px; }
.item .icon-btn svg { width: 16px; height: 16px; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bcard { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.bcard.locked { opacity: .45; }
.bcard .bic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); flex: none; }
.bcard .bic svg, .bcard .bic img { width: 22px; height: 22px; }
.bcard div { flex: 1; min-width: 0; }
.bcard b { font-size: 14px; display: block; }
.bcard small { color: var(--dim); font-size: 12px; }
.bcard .tg { padding: 0; border: 0; background: none; }
.danger-zone { border-color: rgba(244, 63, 94, .25); }

.preview { position: relative; border-left: 1px solid var(--line); background: var(--bg-2); padding: 18px 22px; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.resizer { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 6; touch-action: none; }
.resizer::after {
  content: ''; position: absolute; left: 3px; top: 50%; width: 4px; height: 56px; margin-top: -28px; border-radius: 4px;
  background: var(--line-2); transition: .15s;
}
.resizer:hover::after, body.resizing .resizer::after { background: var(--accent); height: 90px; margin-top: -45px; box-shadow: 0 0 12px var(--accent); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe { pointer-events: none; }
.seg { display: flex; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.active { background: var(--accent-soft); color: var(--accent-text); }
.phone.desktop { border-width: 6px; border-radius: 14px; flex: 1; min-height: 0; }
.phone.desktop iframe { display: block; }
.preview-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 12px; }
.preview-head span { display: flex; align-items: center; gap: 8px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }
.phone { flex: 1; min-height: 0; border-radius: 30px; border: 8px solid #1a1724; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px var(--line-2); background: #000; }
.phone iframe { width: 100%; height: 100%; border: 0; display: block; }
.preview-fab { display: none; }

.savebar {
  position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translate(-50%, 200px); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2);
  display: flex; align-items: center; gap: 24px; padding: 10px 10px 10px 20px; border-radius: 16px; width: min(560px, calc(100vw - 32px));
  justify-content: space-between; background: #16131f; border: 1px solid var(--line-2); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .8);
  font-size: 14px; font-weight: 500;
}
.savebar.show { transform: translate(-50%, 0); }
.savebar.shake { animation: shake .4s; }
@keyframes shake { 25% { margin-left: -8px; } 75% { margin-left: 8px; } }
.savebar div { display: flex; gap: 6px; }
.dtoast {
  position: fixed; top: 20px; left: 50%; z-index: 60; transform: translate(-50%, -200px); transition: .3s; padding: 10px 16px; border-radius: 12px;
  background: #16131f; border: 1px solid var(--line-2); font-size: 14px; font-weight: 500;
}
.dtoast.show { transform: translate(-50%, 0); }
.dtoast.err { border-color: rgba(244, 63, 94, .5); color: #fda4af; }

@media (max-width: 1350px) {
  body.dash { grid-template-columns: 230px minmax(0, 1fr) var(--pw); }
  .assets { grid-template-columns: repeat(2, 1fr); }
  .form-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
  body.dash { grid-template-columns: 220px 1fr; }
  .preview { position: fixed; inset: 0; z-index: 30; display: none; padding: 16px; }
  .resizer { display: none; }
  .preview.open { display: flex; }
  .preview-fab { display: inline-flex; position: fixed; right: 20px; bottom: 90px; z-index: 31; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body.dash { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 35; transform: translateX(-100%); transition: .25s; }
  .side.open { transform: none; }
  .menu-btn { display: grid; }
  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .copy-link span { display: none; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .toggles { grid-template-columns: 1fr; }
  .assets { grid-template-columns: 1fr 1fr; }
  .savebar span { font-size: 13px; }
}

.admin-nav { margin-top: 10px; position: relative; }
.admin-nav::before { content: ''; position: absolute; left: 12px; right: 12px; top: -6px; height: 1px; background: var(--line); }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.badge-editor { display: grid; grid-template-columns: 170px 1fr; gap: 22px; }
.be-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 10px; border-radius: 14px; background: radial-gradient(circle at 50% 30%, var(--accent-soft), transparent 70%), rgba(0, 0, 0, .3); border: 1px solid var(--line); text-align: center; }
.be-icon { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); padding: 16px; }
.be-icon svg, .be-icon img { width: 100%; height: 100%; }
.be-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 13px; max-width: 100%; }
.be-chip span { width: 18px; height: 18px; flex: none; }
.be-chip span svg, .be-chip span img { width: 100%; height: 100%; display: block; }
.be-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; margin-bottom: 16px; }
.icon-pick button { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); display: grid; place-items: center; cursor: pointer; padding: 8px; transition: .15s; }
.icon-pick button svg { width: 100%; height: 100%; fill: var(--muted); }
.icon-pick button:hover { border-color: var(--line-2); }
.icon-pick button.active { border-color: var(--accent); background: var(--accent-soft); }
.icon-pick button.active svg { fill: #fff; }
.icon-pick.disabled { opacity: .35; pointer-events: none; }
.be-image { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line-2); margin-bottom: 16px; }
.be-image label.btn { cursor: pointer; }
.be-actions { justify-content: space-between; }
.admin-badges { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.ab { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); cursor: pointer; text-align: left; transition: .15s; width: 100%; min-width: 0; }
.ab:hover { border-color: var(--line-2); }
.ab.active { border-color: var(--accent); background: var(--accent-soft); }
.ab .bic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); flex: none; padding: 8px; }
.ab .bic svg, .ab .bic img { width: 100%; height: 100%; }
.ab div:not(.bic) { flex: 1; min-width: 0; }
.ab b { display: block; font-size: 14px; }
.ab small { color: var(--dim); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: var(--panel-2); color: var(--muted); flex: none; }
.tag.auto { background: rgba(34, 197, 94, .12); color: #86efac; }
.tag.admin { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.user-search { max-width: 300px; height: 38px; }
.user-list { display: grid; gap: 8px; }
.user { border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); overflow: hidden; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.user-row:hover { background: rgba(255, 255, 255, .02); }
.user-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #111; flex: none; }
.user-row .who { flex: 1; min-width: 0; }
.user-row .who b { display: block; font-size: 14px; }
.user-row .who small { color: var(--dim); font-size: 12px; }
.user-row .mini { display: flex; gap: 4px; }
.user-row .mini span { width: 18px; height: 18px; display: block; }
.user-row .mini svg, .user-row .mini img { width: 100%; height: 100%; display: block; }
.user-row .chev { color: var(--dim); transition: .2s; font-size: 12px; }
.user.open .chev { transform: rotate(180deg); }
.user-body { display: none; padding: 4px 14px 16px; border-top: 1px solid var(--line); }
.user.open .user-body { display: block; }
.user-body h4 { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: 14px 0 10px; }
.grant-list { display: flex; flex-wrap: wrap; gap: 8px; }
.grant { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); cursor: pointer; font-size: 13px; font-weight: 500; transition: .15s; color: var(--muted); }
.grant span { width: 18px; height: 18px; flex: none; }
.grant span svg, .grant span img { width: 100%; height: 100%; display: block; }
.grant:hover { border-color: var(--line-2); color: var(--text); }
.grant.on { border-color: var(--accent); background: var(--accent-soft); color: #fff; }
.grant.auto-on { border-style: dashed; border-color: rgba(34, 197, 94, .5); color: #d1fae5; cursor: default; }
.user-body .row { align-items: center; justify-content: space-between; margin-top: 16px; }


@media (max-width: 760px) {
  .badge-editor { grid-template-columns: 1fr; }
  .user-search { max-width: none; width: 100%; }
  .user-row .mini { display: none; }
}

@container (max-width: 980px) {
  .admin-grid { grid-template-columns: 1fr; }
  .assets { grid-template-columns: repeat(2, 1fr); }
  .form-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@container (max-width: 640px) {
  .badge-editor { grid-template-columns: 1fr; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .toggles { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .user-row .mini { display: none; }
}
@container (max-width: 420px) {
  .assets { grid-template-columns: 1fr; }
  .form-grid.cols-4 { grid-template-columns: 1fr; }
}

.price-pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); border: 1px solid rgba(var(--accent-rgb), .35); }
.price-pill:empty { display: none; }
.cur-url { color: var(--text); font-weight: 600; }
.un-form { display: flex; gap: 10px; flex-wrap: wrap; }
.un-form .input-prefix { flex: 1; min-width: 220px; }
.un-status { font-size: 13px; min-height: 20px; margin-top: 8px; }
.un-status.ok { color: #86efac; } .un-status.bad { color: #fda4af; }
.credit { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; background: rgba(34, 197, 94, .12); color: #86efac; font-size: 12px; font-weight: 600; }

.pay-list { display: grid; gap: 6px; }
.pay { display: grid; grid-template-columns: 120px minmax(0, 1fr) 80px 100px; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); font-size: 13px; }
.pay small { color: var(--dim); }
.pay .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st { justify-self: end; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--panel-2); color: var(--muted); }
.st.completed { background: rgba(34, 197, 94, .12); color: #86efac; }
.st.credited { background: rgba(59, 130, 246, .14); color: #93c5fd; }
.st.pending { background: rgba(245, 158, 11, .14); color: #fcd34d; }
.credits-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.credits-ctl .btn { width: 30px; padding: 0; }
@container (max-width: 640px) { .pay { grid-template-columns: 1fr auto; } .pay > :nth-child(1), .pay > :nth-child(3) { display: none; } }

.dash:not(.is-owner) .owner-only { display: none !important; }
.dash:not(.is-owner) .admin-grid { grid-template-columns: 1fr; }
.role-note { display: flex; gap: 12px; align-items: center; padding: 14px 18px; font-size: 14px; color: var(--muted); }
.role-note b { color: var(--text); }
.role-note:empty { display: none; }
.dash:not(.is-owner) .ab { cursor: default; }
.dash:not(.is-owner) .ab:hover { border-color: var(--line); }
.hook-state { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--panel-2); color: var(--muted); }
.hook-state.on { background: rgba(88, 101, 242, .18); color: #c7d2fe; }
.hook-box { padding: 16px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); margin-bottom: 16px; }
.hook-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.hook-cats .tg { padding: 10px 12px; }
.audit-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.audit-filter button { border: 1px solid var(--line); background: none; color: var(--muted); padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; cursor: pointer; }
.audit-filter button.active { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .4); color: var(--accent-text); }
.audit-list { display: grid; gap: 6px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.ae { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px 10px 0; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); font-size: 13px; overflow: hidden; }
.ae i { border-radius: 0 4px 4px 0; }
.ae b { font-weight: 600; }
.ae .by { color: var(--muted); }
.ae .det { color: var(--dim); font-size: 12px; margin-top: 3px; white-space: pre-line; word-break: break-word; }
.ae time { color: var(--dim); font-size: 12px; white-space: nowrap; }

.buy-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), .06)); border: 1px solid rgba(var(--accent-rgb), .25); }
.buy-box b { display: block; font-size: 14px; }
.buy-box small { color: var(--muted); font-size: 13px; }
.buy-box.locked { opacity: .6; }

.cursor-box { display: grid; grid-template-columns: 220px 1fr; gap: 14px; margin-top: 14px; }
.cursor-asset { min-height: 150px; }
.cursor-asset .asset-prev { background-size: 32px 32px !important; background-repeat: no-repeat !important; image-rendering: pixelated;
  background-color: rgba(0, 0, 0, .3); background-image: none; }
.cursor-asset.has .asset-prev { background-color: transparent; background-image: repeating-conic-gradient(#ffffff10 0 25%, transparent 0 50%) !important; background-size: 16px 16px !important; }
.cursor-asset .asset-prev img { width: 32px; height: 32px; image-rendering: pixelated; }
.cursor-try { border-radius: 16px; border: 1.5px dashed var(--line-2); padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 70% 30%, var(--accent-soft), transparent 60%), rgba(0, 0, 0, .25); }
.cursor-try b { font-size: 14px; }
.cursor-try span { color: var(--muted); font-size: 13px; }
.cursor-try code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.cursor-try.ok { border-style: solid; border-color: rgba(var(--accent-rgb), .4); }
@container (max-width: 640px) { .cursor-box { grid-template-columns: 1fr; } }

.vip-link { font-size: 12px; font-weight: 600; color: #fcd34d; cursor: pointer; }
.vip-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(251, 191, 36, .14); color: #fcd34d; border: 1px solid rgba(251, 191, 36, .3); margin-left: 6px; vertical-align: 2px; }
.side-nav button.vip-nav { color: #fcd34d; }
.side-nav button.vip-nav svg { fill: #fbbf24; }
.side-nav button.vip-nav.active { background: rgba(251, 191, 36, .12); box-shadow: inset 2px 0 0 #fbbf24; color: #fde68a; }
.vip-panel { position: relative; }
.vip-lock { display: none; position: absolute; inset: 0; border-radius: 18px; background: rgba(11, 11, 12, .72); backdrop-filter: blur(3px); align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 20px; text-align: center; font-weight: 600; }
.vip-panel.locked .vip-lock { display: flex; }
.tg-inline { padding: 0; border: 0; background: none; }

.meta-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.embed { border-left: 4px solid var(--emb, var(--accent)); background: #2b2d31; border-radius: 6px; padding: 12px 16px 16px; font-family: 'gg sans', 'Inter', system-ui, sans-serif; }
.embed-site { font-size: 12px; color: #b5bac1; margin-bottom: 6px; }
.embed-title { font-size: 15px; font-weight: 700; color: #00a8fc; margin-bottom: 6px; word-break: break-word; }
.embed-desc { font-size: 13.5px; color: #dbdee1; line-height: 1.45; white-space: pre-line; word-break: break-word; }
.embed-img { margin-top: 12px; border-radius: 6px; background: #1e1f22 center/cover no-repeat; aspect-ratio: 1.91 / 1; display: none; }
.embed.small.has-img { display: grid; grid-template-columns: 1fr 72px; column-gap: 14px; }
.embed.small.has-img .embed-img { grid-row: 1 / 4; grid-column: 2; width: 72px; height: 72px; aspect-ratio: 1; margin-top: 0; }
.embed.has-img .embed-img { display: block; }
@container (max-width: 760px) { .meta-grid { grid-template-columns: 1fr; } }

.pf-sections { display: grid; gap: 6px; margin-bottom: 6px; }
.pf-sec-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.pf-sec-row .tg { padding: 0; border: 0; background: none; flex: 1; }
.pf-sec-row.off { opacity: .55; }
.pf-proj { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.pf-proj .thumb { width: 74px; height: 74px; border-radius: 10px; background: rgba(255, 255, 255, .05) center/cover no-repeat; border: 1px dashed var(--line-2); display: grid; place-items: center; color: var(--dim); font-size: 11px; cursor: pointer; text-align: center; }
.pf-proj .thumb:hover { border-color: var(--accent); }
.pf-proj .fields { display: grid; gap: 6px; }
.pf-proj .fields .input { height: 36px; }
.pf-proj textarea.input { min-height: 56px; height: 56px; }

.vip-hero { border-radius: 22px; padding: 40px 20px; text-align: center; position: relative; overflow: hidden; border: 1px solid rgba(251, 191, 36, .3);
  background: radial-gradient(circle at 50% 0%, rgba(251, 191, 36, .22), transparent 60%), radial-gradient(circle at 80% 100%, rgba(var(--accent-rgb), .25), transparent 55%), var(--bg-2); }
.vip-hero-in { display: grid; gap: 10px; justify-items: center; }
.vip-crown { font-size: 44px; filter: drop-shadow(0 0 20px rgba(251, 191, 36, .6)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-4deg); } }
.vip-hero h2 { font-family: var(--display); font-size: 34px; letter-spacing: -.02em; background: linear-gradient(120deg, #fde68a, #fbbf24 40%, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vip-hero p { color: var(--muted); }
.vip-price b { font-family: var(--display); font-size: 40px; }
.vip-price span { color: var(--muted); margin-left: 4px; }
.vip-perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.perk { padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 4px; }
.perk > span { font-size: 24px; }
.perk b { font-size: 15px; }
.perk small { color: var(--muted); font-size: 13px; }
.vip-on .vip-hero { border-color: rgba(34, 197, 94, .4); }

.cb-buy { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), .06)); border: 1px solid rgba(var(--accent-rgb), .25); margin-bottom: 16px; }
.cb-buy b { display: block; font-size: 14px; }
.cb-buy small { color: var(--muted); font-size: 13px; }
.cb-editor { display: grid; grid-template-columns: 170px 1fr; gap: 22px; padding: 16px; border-radius: 16px; border: 1px solid var(--line-2); margin-bottom: 16px; background: rgba(0, 0, 0, .2); }
@container (max-width: 640px) { .cb-editor { grid-template-columns: 1fr; } }
.cb-list { display: grid; gap: 10px; }
.cb-item { border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); padding: 14px; display: grid; gap: 12px; }
.cb-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cb-top .bic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); padding: 8px; flex: none; }
.cb-top .bic svg, .cb-top .bic img { width: 100%; height: 100%; }
.cb-top .who { flex: 1; min-width: 160px; }
.cb-top .who b { display: block; }
.cb-top .who small { color: var(--dim); font-size: 12px; }
.cb-holders { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-holder { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }
.cb-holder button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: var(--muted); cursor: pointer; font-size: 11px; }
.cb-holder button:hover { background: rgba(244, 63, 94, .3); color: #fff; }
.cb-give { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-give .input { height: 36px; max-width: 220px; }
.bcard .leave-btn { font-size: 12px; }

.wf-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 16px; }
.wf-lists .tg { padding: 10px 12px; }
.wf-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.wf-word { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 99px; background: rgba(244, 63, 94, .12); border: 1px solid rgba(244, 63, 94, .3); font-size: 13px; font-family: ui-monospace, monospace; }
.wf-word.allow { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .3); }
.wf-word small { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--dim); text-transform: uppercase; }
.wf-word button { width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: var(--muted); cursor: pointer; font-size: 10px; }
.wf-test { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.wf-result { font-size: 13px; margin-top: 8px; min-height: 18px; }
.wf-result.bad { color: #fda4af; } .wf-result.ok { color: #86efac; }
.tag.vip { background: rgba(251, 191, 36, .14); color: #fcd34d; }
.tag.custom { background: rgba(var(--accent-rgb), .14); color: #f9a8d4; }

.plat svg, .item .ico svg { fill: var(--brand, #fff); }
.plat:hover svg { fill: var(--brand, #fff); filter: drop-shadow(0 0 6px var(--brand, #fff)); }
.plat { position: relative; }
.plat.adult::after { content: '18+'; position: absolute; top: -6px; right: -6px; font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 5px; background: #f43f5e; color: #fff; }

.badge-order { display: grid; gap: 8px; }
.bcard.sortable { cursor: grab; transition: border-color .15s, background .15s, opacity .15s, transform .15s; }
.bcard.sortable:active { cursor: grabbing; }
.bcard .pos { width: 22px; text-align: center; font-size: 12px; font-weight: 700; color: var(--dim); flex: none; }
.bcard .grip { color: var(--dim); font-size: 16px; line-height: 1; flex: none; user-select: none; }
.bcard .arrows { display: flex; gap: 2px; flex: none; }
.bcard .arrows .icon-btn { width: 28px; height: 28px; font-size: 14px; font-weight: 700; }
.bcard .arrows .icon-btn:disabled { opacity: .25; pointer-events: none; }
.bcard.dragging { opacity: .4; }
.bcard.over { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.bcard.hidden-badge .bic, .bcard.hidden-badge > div:not(.arrows) { opacity: .45; }

body.dash.no-preview { grid-template-columns: 250px minmax(0, 1fr) !important; }
body.dash.no-preview .preview, body.dash.no-preview .preview-fab { display: none !important; }
@media (max-width: 1350px) { body.dash.no-preview { grid-template-columns: 230px minmax(0, 1fr) !important; } }
@media (max-width: 1080px) { body.dash.no-preview { grid-template-columns: 220px minmax(0, 1fr) !important; } }
@media (max-width: 760px) { body.dash.no-preview { grid-template-columns: 1fr !important; } }

.ps-save { display: grid; gap: 12px; }
.ps-save .input { max-width: 420px; }
.ps-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ps-part { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); cursor: pointer; transition: .15s; }
.ps-part:has(input:checked) { border-color: rgba(var(--accent-rgb), .5); background: var(--accent-soft); }
.ps-part input { margin-top: 3px; accent-color: var(--accent); }
.ps-part span { font-size: 14px; font-weight: 600; }
.ps-part small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.ps-save .btn { justify-self: start; }
.ps-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ps-list:empty::after { content: 'No presets yet. Save one above.'; color: var(--dim); font-size: 14px; }
.ps-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.ps-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.ps-thumb { height: 96px; position: relative; background: #111 center/cover no-repeat; display: grid; place-items: center; }
.ps-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .55)); }
.ps-thumb .av { width: 46px; height: 46px; border-radius: 50%; background: #222 center/cover; border: 2px solid var(--psa, var(--accent)); box-shadow: 0 0 18px var(--psa, var(--accent)); position: relative; z-index: 1; }
.ps-thumb .chip { position: absolute; left: 10px; bottom: 8px; z-index: 1; font-size: 11px; font-weight: 600; color: #fff; opacity: .85; }
.ps-thumb .dot { position: absolute; right: 10px; bottom: 9px; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--psa); box-shadow: 0 0 10px var(--psa); }
.ps-thumb.nolook { background: repeating-linear-gradient(45deg, #15121e 0 10px, #110f18 10px 20px); }
.ps-body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.ps-name { display: flex; align-items: center; gap: 8px; }
.ps-name b { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-name input { flex: 1; height: 32px; }
.ps-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ps-tags span { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--muted); }
.ps-when { font-size: 12px; color: var(--dim); }
.ps-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ps-actions .btn { height: 32px; padding: 0 11px; font-size: 12.5px; }
@container (max-width: 640px) { .ps-parts { grid-template-columns: 1fr; } }

.shield-state { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(34, 197, 94, .14); color: #86efac; }
.shield-state.attack { background: rgba(244, 63, 94, .16); color: #fda4af; animation: pulseRed 1.6s infinite; }
@keyframes pulseRed { 50% { box-shadow: 0 0 0 6px rgba(244, 63, 94, 0); } 0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .35); } }
.sh-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sh-stat { padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.sh-stat span { display: block; font-size: 12px; color: var(--muted); }
.sh-stat b { font-family: var(--display); font-size: 22px; }
.sh-bans { display: grid; gap: 6px; margin-top: 10px; max-height: 260px; overflow-y: auto; }
.sh-ban { display: grid; grid-template-columns: 150px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(244, 63, 94, .06); border: 1px solid rgba(244, 63, 94, .2); font-size: 13px; }
.sh-ban code { font-size: 12.5px; }
.sh-ban small { color: var(--muted); }
@container (max-width: 640px) { .sh-ban { grid-template-columns: 1fr auto; } .sh-ban > :nth-child(2) { display: none; } }

.sh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@container (max-width: 760px) { .sh-cols { grid-template-columns: 1fr; } }
.sh-ban { grid-template-columns: minmax(120px, auto) 1fr auto auto; }
.sh-ban .lvl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; background: rgba(244, 63, 94, .18); color: #fda4af; margin-right: 6px; }
.sh-tops { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-topi { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 12px; background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .3); font-size: 13px; }
.sh-topi b { font-family: ui-monospace, monospace; }
.sh-topi small { color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-look { font-size: 13px; margin-top: 8px; color: var(--muted); }
.sh-look b { color: var(--text); }
.sh-edge { margin-top: 16px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-2); font-size: 13px; color: var(--muted); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.sh-edge.on { border-style: solid; border-color: rgba(34, 197, 94, .35); }
.sh-edge code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; }

.sh-net { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.sh-net.alert { border-color: rgba(244, 63, 94, .55); background: rgba(244, 63, 94, .07); }
.sh-net .rates { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); margin-top: 6px; }
.sh-net .rates b { color: var(--text); font-variant-numeric: tabular-nums; }
.sh-net .now { font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sh-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; background: var(--panel-2); color: var(--muted); }
.sh-tag.red { background: rgba(244, 63, 94, .18); color: #fda4af; }
.sh-tag.amber { background: rgba(245, 158, 11, .18); color: #fcd34d; }
.sh-inc { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.sh-inc .why { color: var(--muted); font-size: 12px; }
.sh-inc .row2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; }

.dm-list { display: grid; gap: 10px; }
.dm-item { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.dm-item[open] { border-color: var(--line-2); }
.dm-item summary { cursor: pointer; padding: 12px 14px; display: flex; gap: 10px; align-items: center; list-style: none; font-size: 14px; }
.dm-item summary::-webkit-details-marker { display: none; }
.dm-item summary b { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.dm-item summary .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-st { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; background: var(--panel-2); color: var(--muted); }
.dm-st.new { background: rgba(244, 63, 94, .18); color: #fda4af; }
.dm-st.removed { background: rgba(34, 197, 94, .15); color: #86efac; }
.dm-body { padding: 0 14px 14px; display: grid; gap: 8px; font-size: 13.5px; }
.dm-body dt { color: var(--muted); font-size: 12px; }
.dm-body dd { white-space: pre-wrap; word-break: break-word; margin: 0 0 4px; }
.dm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* sign-in methods */
.conn-list { display: grid; gap: 8px; }
.conn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.conn-row b { display: block; font-size: 14px; }
.conn-row small { font-size: 12.5px; }

/* custom badge image */
.cb-img { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-2); background: rgba(0, 0, 0, .25); margin-bottom: 16px; }
.cb-img-thumb { width: 64px; height: 64px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); overflow: hidden; }
.cb-img-thumb svg { width: 20px; height: 20px; fill: var(--dim); }
.cb-img-thumb img { width: 52px; height: 52px; object-fit: contain; image-rendering: auto; }
.cb-img-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cb-img-text b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-img-text small { font-size: 12px; color: var(--muted); }
.icon-pick.using-img { opacity: .35; }
.icon-pick.using-img button.active { border-color: var(--line); background: rgba(0, 0, 0, .3); } .icon-pick.using-img button.active svg { fill: var(--muted); }

.be-icon:has(img) { padding: 8px; }

/* 2026-11 redesign: flat surfaces */
.bar { background: var(--accent); opacity: .85; }
.progress i { background: var(--accent); }
.be-preview, .buy-box, .cb-buy { background: rgba(255, 255, 255, .03) !important; }

/* background asset gets a big 16:9 preview so videos are easy to see */
.asset[data-kind=background] { grid-column: span 2; }
.asset[data-kind=background] .asset-prev { aspect-ratio: 16 / 9; min-height: 0; flex: none; }
@container (max-width: 980px) { .asset[data-kind=background] { grid-column: 1 / -1; } }
@container (max-width: 420px) { .asset[data-kind=background] { grid-column: auto; } }
.tg.off { opacity: .45; }

/* expand button: preview takes over the editor's space (Esc or the button again to go back) */
.pv-actions { display: flex; gap: 4px; }
body.dash.pv-max { grid-template-columns: 250px 0 minmax(0, 1fr) !important; }
body.dash.pv-max > .main { visibility: hidden; overflow: hidden; }
body.dash.pv-max .resizer { display: none; }
#maxPrev[aria-pressed="true"] { background: var(--panel-2); color: var(--text); }

/* Discord roles panel */
.dc-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.dc-chip { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); opacity: .6; }
.dc-chip b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dc-chip b::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.dc-chip.on { opacity: 1; border-color: var(--line-2); }
.dc-chip.on b::before { background: var(--ok); }
.dc-chip small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.dc-note { margin-top: 12px; font-size: 13.5px; }
.dc-note a { color: var(--accent-text); text-decoration: underline; }
.dc-roles-mini { font-size: 12.5px; color: var(--muted); align-self: center; }

/* FiveM editor */
.fm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fm-three { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 6px; flex: 1; }
.fm-char { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.fm-char .input { height: 36px; }
.fm-current { padding: 6px 2px; border: 0; background: none; }
.fm-server .input:disabled { opacity: .4; }
@container (max-width: 560px) { .fm-two, .fm-three { grid-template-columns: 1fr; } }