.login-wrap { display: grid; place-items: center; min-height: 72vh; }
.login { width: min(440px, 100%); text-align: center; }
.login img { width: 84px; height: 84px; margin: 0 auto 8px; filter: drop-shadow(0 0 28px rgba(255, 122, 26, .45)); animation: bob 3.2s ease-in-out infinite; }
.login form { text-align: left; margin-top: 24px; }
.login .btn { width: 100%; margin-top: 4px; }

.cards { display: grid; gap: 18px; }
.card {
  position: relative; display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 20px; padding: 18px 22px 18px 18px;
  border-radius: 24px; color: inherit; text-decoration: none; overflow: hidden;
  background: linear-gradient(110deg, rgba(33, 26, 51, .92), rgba(16, 13, 22, .92) 55%);
  box-shadow: inset 0 0 0 1px rgba(168, 139, 245, .18), 0 18px 44px rgba(0, 0, 0, .4);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  animation: page-in .55s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
a.card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .55), 0 26px 56px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 122, 26, .14); }
.card::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(110, 86, 201, .35), transparent 70%); pointer-events: none; }
.card-icon { width: 92px; height: 92px; border-radius: 22px; object-fit: cover; display: grid; place-items: center; font-size: 38px; font-weight: 800; color: #1A0F08; background: linear-gradient(160deg, var(--pumpkin-light), var(--pumpkin)); box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 3px rgba(255, 178, 122, .2); }
.card-body { min-width: 0; position: relative; z-index: 1; }
.card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-title h3 { font-size: 20px; overflow-wrap: anywhere; }
.card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.card-desc { color: var(--ash); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--ash); }
.card-foot b { color: var(--bone); font-weight: 600; }
.card-side { position: relative; z-index: 1; display: grid; gap: 8px; justify-items: end; color: var(--ash); font-size: 13px; }
@media (max-width: 640px) {
  .card { grid-template-columns: 64px 1fr; }
  .card-icon { width: 64px; height: 64px; font-size: 26px; border-radius: 16px; }
  .card-side { grid-column: 1 / -1; justify-items: start; }
}

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.toolbar .input, .toolbar .select { width: auto; flex: 1 1 200px; }

.editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.editor-side { position: sticky; top: 92px; display: grid; gap: 20px; }
@media (max-width: 960px) { .editor { grid-template-columns: 1fr; } .editor-side { position: static; order: -1; } }
.preview-label { margin-bottom: 10px; }
.preview .card { grid-template-columns: 64px 1fr; animation: none; }
.preview .card-icon { width: 64px; height: 64px; font-size: 26px; border-radius: 16px; }
.preview .card-side { display: none; }
.selected-pack { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--witch-shade); box-shadow: inset 0 0 0 1px rgba(168, 139, 245, .45); margin-bottom: 16px; }
.locked-note { color: var(--witch); font-size: 12.5px; margin-top: -8px; margin-bottom: 14px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills button {
  min-height: 38px; padding: 0 18px; border-radius: 999px; background: rgba(11, 10, 13, .75); border: 1px solid var(--hairline); cursor: pointer; font-weight: 700;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.pills button:hover:not(:disabled) { border-color: var(--witch); }
.pills button[aria-pressed="true"] { background: var(--witch-shade); border-color: var(--witch); color: var(--witch); }
.pills button:disabled { opacity: .4; cursor: not-allowed; }
.dropzone { display: grid; gap: 10px; padding: 18px; border-radius: 18px; border: 1.5px dashed #3a3342; background: rgba(11, 10, 13, .45); }
.upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .upload-row { grid-template-columns: 1fr; } }
.release { flex-wrap: wrap; }
.release .actions { margin-left: auto; display: flex; gap: 8px; }
.danger-zone { border-color: rgba(229, 72, 77, .35); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .25); }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; color: var(--ash); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; }
.table td { padding: 12px; border-top: 1px solid var(--hairline); }
.table .path { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.account-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.panel .label { margin: 18px 0 8px; }
.panel .field > .hint { margin-top: 2px; }
.panel .list + .label { margin-top: 22px; }
.selected-pack .thumb { width: 52px; height: 52px; }