/* 模块商店（客户端）—— 样式 */

.lsc { max-width: 1120px; margin: 0 auto; padding: 16px; color: var(--ls-text, #1f2937); }
.lsc * { box-sizing: border-box; }

.lsc-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-radius: 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9); color: #fff;
}
.lsc-hero-name { font-size: 22px; font-weight: 700; }
.lsc-hero-sub { margin-top: 6px; font-size: 13px; opacity: .92; white-space: pre-wrap; }
.lsc-hero-side { display: flex; gap: 8px; flex: none; }

.lsc-btn {
  appearance: none; border: 0; cursor: pointer; font-size: 13px; line-height: 1;
  padding: 9px 16px; border-radius: 10px; background: #0ea5e9; color: #fff; transition: .15s;
}
.lsc-btn:hover { filter: brightness(1.06); }
.lsc-btn:disabled { opacity: .6; cursor: default; }
.lsc-btn.sm { padding: 7px 12px; font-size: 12px; }
.lsc-btn.ghost { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.lsc-hero .lsc-btn.ghost { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .35); }

.lsc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.lsc-card { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: .18s; }
.lsc-card:hover { border-color: #c4b5fd; box-shadow: 0 8px 24px rgba(124, 58, 237, .08); transform: translateY(-1px); }
.lsc-cover { width: 100%; height: 132px; object-fit: cover; display: block; background: #f8fafc; }
.lsc-cover-ph { display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7c3aed, #0ea5e9); }
.lsc-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lsc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lsc-name { font-weight: 600; font-size: 15px; }
.lsc-ver { font-size: 11px; color: #6b7280; background: #f3f4f6; border-radius: 6px; padding: 2px 6px; }
.lsc-sum { font-size: 12.5px; color: #6b7280; line-height: 1.6; flex: 1; }
.lsc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lsc-actions { display: flex; align-items: center; gap: 6px; }
.lsc-price { font-size: 17px; font-weight: 700; color: #e11d48; }
.lsc-badge { font-size: 11px; border-radius: 6px; padding: 3px 7px; }
.lsc-badge.ok { background: #ecfdf5; color: #059669; }
.lsc-badge.upd { background: #fffbeb; color: #d97706; }
.lsc-empty { padding: 40px 0; text-align: center; color: #9ca3af; font-size: 13px; grid-column: 1 / -1; }

.lsc-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 9998; display: none; align-items: center; justify-content: center; padding: 20px; }
.lsc-mask.show { display: flex; }
.lsc-modal { width: min(560px, 100%); max-height: 86vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(2, 6, 23, .3); }
.lsc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; font-weight: 600; }
.lsc-x { appearance: none; border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: #9ca3af; }
.lsc-modal-body { padding: 16px 18px; }
.lsc-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid #f1f5f9; background: #fafafa; }
.lsc-modal-foot .lsc-hint { margin-right: auto; }
.lsc-line { display: flex; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed #f1f5f9; }
.lsc-line > span { color: #6b7280; flex: none; width: 84px; }
.lsc-field { display: block; margin: 12px 0; }
.lsc-field > span { display: block; font-size: 12.5px; color: #6b7280; margin-bottom: 5px; }
.lsc-field input { width: 100%; border: 1px solid #e5e7eb; border-radius: 9px; padding: 9px 11px; font-size: 13px; outline: none; }
.lsc-field input:focus { border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.lsc-hint { font-size: 12px; color: #9ca3af; line-height: 1.7; }
.lsc-pay { margin: 12px 0; border: 1px solid #fde68a; background: #fffbeb; border-radius: 12px; padding: 12px 14px; }
.lsc-pay-title { font-size: 12.5px; color: #92400e; font-weight: 600; margin-bottom: 6px; }
.lsc-pay-body { font-size: 13px; line-height: 1.8; }
.lsc-pay-contact { margin-top: 6px; font-size: 12px; color: #92400e; }
.lsc-log { font-size: 12.5px; line-height: 2; color: #4b5563; word-break: break-all; }
.lsc-log .ok { color: #059669; }
.lsc-log .warn { color: #b91c1c; }

.lsc-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(520px, 94vw); background: #fff; box-shadow: -12px 0 40px rgba(2, 6, 23, .18); z-index: 9999; transform: translateX(102%); transition: transform .22s ease; display: flex; flex-direction: column; }
.lsc-drawer.show { transform: none; }
.lsc-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; font-weight: 600; }
.lsc-drawer-body { padding: 14px 18px; overflow: auto; flex: 1; }
.lsc-block { margin-bottom: 18px; }
.lsc-block-title { font-size: 12.5px; color: #6b7280; margin-bottom: 6px; }
.lsc-log-row { font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.lsc-log-msg { color: #9ca3af; font-size: 12px; }

.lsc-toast { position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px); background: #111827; color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: .2s; z-index: 10000; max-width: 80vw; }
.lsc-toast.show { opacity: .95; transform: translate(-50%, 0); }
.lsc-toast.bad { background: #b91c1c; }

@media (max-width: 720px) {
  .lsc-hero { flex-direction: column; align-items: flex-start; }
}