/* 电脑端面板：蓝色专业侧栏（非手机样式） */
:root {
    --smm-bg: #f4f7fb;
    --smm-side: #1e79e4;
    --smm-side-deep: #0b5fff;
    --smm-accent: #1e79e4;
    --smm-card: #ffffff;
    --smm-text: #1f2937;
    --smm-muted: #6b7280;
    --smm-radius: 12px;
}

* { box-sizing: border-box; }
body.smm-body {
    margin: 0;
    background: var(--smm-bg);
    color: var(--smm-text);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.smm-app { display: flex; min-height: 100vh; }

.smm-sidebar {
    width: 230px;
    background: linear-gradient(180deg, #1e79e4 0%, #0b5fff 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
    box-shadow: 6px 0 24px rgba(11, 95, 255, 0.18);
}

.smm-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.smm-brand img {
    width: 38px; height: 38px; object-fit: contain;
    border-radius: 10px; background: #fff;
}
.smm-brand strong { display:block; font-size: 0.95rem; }
.smm-brand span { display:block; font-size: 0.7rem; opacity: .85; }

.smm-side-balance {
    margin: 12px 12px 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 800;
    font-size: 1.02rem;
}

.smm-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 12px;
    gap: 2px;
    flex: 1;
}
.smm-nav a {
    color: rgba(255,255,255,0.95);
    text-decoration: none;
    padding: 11px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.92rem;
}
.smm-nav a:hover, .smm-nav a.active {
    background: rgba(255,255,255,0.22);
}

.smm-side-foot {
    padding: 12px 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.18);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.smm-back-home {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.smm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.smm-topbar {
    height: 58px;
    background: #fff;
    border-bottom: 1px solid #e8eef6;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.smm-top-brand-mobile { display: none; }
.smm-top-title { font-weight: 800; flex: 1; }
.smm-top-right { margin-left: auto; }
.smm-balance {
    background: #eaf3ff;
    border-radius: 999px;
    padding: 6px 12px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 0.8rem;
}
.smm-balance span { color: var(--smm-muted); font-weight: 600; }
.smm-balance strong { color: var(--smm-accent); font-weight: 800; }
.smm-login-pill {
    background: var(--smm-accent);
    color: #fff !important;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: 999px;
}

.smm-content { padding: 20px 22px; max-width: 980px; }
.smm-card {
    background: #fff;
    border: 1px solid #e8eef6;
    border-radius: var(--smm-radius);
    padding: 18px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.smm-card h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 14px; }
.smm-form-label { font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; color: #334155; }
.smm-form-control, .smm-form-select {
    border-radius: 10px; border: 1px solid #dbe3ef; padding: 10px 12px; width: 100%; font-size: 0.92rem;
}
.smm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.smm-btn-primary { background: linear-gradient(135deg,#1e79e4,#0b5fff); color:#fff; }
.smm-btn-orange { background: linear-gradient(135deg,#1e79e4,#0b5fff); color:#fff; }
.smm-charge-box {
    background: #eff6ff; border: 1px dashed #93c5fd; border-radius: 12px;
    padding: 12px 14px; display: flex; justify-content: space-between; align-items: center;
}
.smm-charge-box strong { color: #1e79e4; font-size: 1.15rem; }
.smm-alert { border-radius: 10px; padding: 10px 12px; font-size: 0.86rem; margin-bottom: 12px; }
.smm-alert-ok { background:#ecfdf5; color:#065f46; }
.smm-alert-err { background:#fef2f2; color:#991b1b; }
.smm-alert-info { background:#eff6ff; color:#1e40af; }
.smm-table { width:100%; border-collapse: collapse; font-size: 0.86rem; }
.smm-table th, .smm-table td { padding: 10px 8px; border-bottom: 1px solid #eef2f7; text-align:left; }
.smm-badge { display:inline-block; padding:3px 8px; border-radius:999px; font-size:0.72rem; font-weight:700; }
.smm-badge-ok { background:#ecfdf5; color:#047857; }
.smm-badge-pending { background:#eff6ff; color:#1d4ed8; }
.smm-badge-err { background:#fef2f2; color:#b91c1c; }
.smm-desc-box {
    background: #f8fafc; border-radius: 10px; padding: 12px; font-size: 0.84rem;
    color: #64748b; white-space: pre-wrap; min-height: 72px; margin-bottom: 12px;
    border: 1px solid #e8eef6;
}
.smm-service-item {
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
}
.smm-service-item:last-child { border-bottom: 0; }
.smm-service-item h3 { margin: 0 0 6px; font-size: 0.92rem; font-weight: 800; }
.smm-service-meta {
    display: flex; flex-wrap: wrap; gap: 8px 14px;
    font-size: 0.78rem; color: var(--smm-muted);
}

/* 手机访问 /social/ 时简化；桌面始终侧栏 */
.smm-mobile-nav { display: none; }

@media (max-width: 900px) {
    .smm-sidebar { display: none !important; }
    .smm-top-brand-mobile { display: block; font-weight: 800; color: #1e3a8a; }
    .smm-top-title { display: none !important; }
    .smm-content { padding: 12px 12px 96px; }
    .smm-mobile-nav {
        display: flex;
        position: fixed; left:0; right:0; bottom:0;
        background:#fff; border-top:1px solid #e8eef6; z-index:50;
        padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
        justify-content: space-around;
    }
    .smm-mobile-nav a {
        flex:1; text-align:center; text-decoration:none; color:#64748b;
        font-size:0.68rem; font-weight:700; padding:4px 0; border-radius:10px;
    }
    .smm-mobile-nav a i { display:block; font-size:1.2rem; margin-bottom:2px; }
    .smm-mobile-nav a.active { color:#1e79e4; background:rgba(30,121,228,.08); }
}

/* 平台图标栏 */
.smm-plat-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #e8eef6;
    border-radius: 12px;
    padding: 14px 12px;
}
.smm-plat {
    width: 72px;
    text-align: center;
    text-decoration: none;
    color: #111;
}
.smm-plat img {
    width: 48px; height: 48px;
    object-fit: contain;
    border-radius: 12px;
    background: #faf8f5;
    display: block;
    margin: 0 auto 4px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}
.smm-plat em {
    display: block;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
}
.smm-plat-ico.all {
    width: 48px; height: 48px;
    margin: 0 auto 4px;
    border-radius: 12px;
    background: linear-gradient(145deg,#1e79e4,#0b5fff);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 0.95rem;
}
.smm-plat.active img, .smm-plat.active .smm-plat-ico.all {
    box-shadow: 0 0 0 2px #1e79e4;
}
.smm-plat.active em { color: #1e79e4; }
.smm-price-table th {
    background: #f8fafc;
    font-weight: 800;
    white-space: nowrap;
}
.smm-price-name { font-weight: 700; max-width: 360px; }
.smm-form-control[rows] { min-height: 140px; resize: vertical; }

.smm-alert-wait {
    background: #fff1f2 !important;
    color: #dc2626 !important;
    font-weight: 800 !important;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.smm-pay-timer { color:#dc2626; font-weight:800; text-align:center; margin-bottom:12px; }
.smm-pay-timer strong { font-size:1.3rem; }
.smm-pay-label { font-size:0.8rem; color:#64748b; font-weight:700; margin-bottom:4px; }
.smm-pay-amt, .smm-pay-addr { font-weight:900; color:#0f172a; word-break:break-all; }
.smm-pay-amt { font-size:1.4rem; margin-bottom:8px; }
.smm-pay-addr { font-size:0.95rem; margin-bottom:8px; }
.smm-pay-amt-wrap, .smm-pay-addr-wrap, .smm-pay-qr { text-align:center; margin-bottom:14px; }

.smm-tips-red { color:#dc2626 !important; font-weight:700; font-size:0.86rem; line-height:1.6; }
.smm-pay-amt-row { display:flex; align-items:center; justify-content:center; gap:8px; }
.smm-copy-ico {
    width:36px; height:36px; border:0; border-radius:10px;
    background:#eff6ff; color:#1e79e4; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.smm-copy-ico.copied { background:#dcfce7; color:#16a34a; }
.smm-pay-orderno { margin-top:8px; font-weight:800; color:#0f172a; font-size:0.86rem; }

.smm-order-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.smm-order-tabs a {
    text-decoration:none; font-size:0.78rem; font-weight:800; color:#334155;
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:999px; padding:6px 12px;
}
.smm-order-tabs a.active { background:#1e79e4; border-color:#1e79e4; color:#fff; }

/* ===== 自定义商城（电脑端） ===== */
.smm-more-links { display:flex; gap:14px; }
.smm-more-links a { font-weight:700; color:#0b5fff; text-decoration:none; }
.smm-more-plat-grid {
  display:grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 12px 8px;
}
.smm-more-plat-grid .smm-plat {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:#111; padding:4px;
}
.smm-more-plat-grid .smm-plat img {
  width:56px; height:56px; object-fit:contain; border-radius:14px;
  box-shadow:0 2px 8px rgba(15,23,42,0.08); background:transparent;
}
.smm-more-plat-grid .smm-plat em {
  font-style:normal; font-size:0.72rem; font-weight:800; text-align:center;
  line-height:1.15; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.smm-more-plat-grid .smm-plat.active img { box-shadow:0 0 0 2px #0b5fff, 0 2px 8px rgba(15,23,42,0.08); }
.smm-more-plat-grid .smm-plat.active em { color:#0b5fff; }
.smm-shop-list { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.smm-shop-card {
  display:flex; align-items:stretch; justify-content:space-between; gap:16px;
  background:#fff; border:1px solid #e8eef7; border-radius:14px; padding:16px 18px;
  box-shadow:0 4px 14px rgba(15,23,42,0.04);
}
.smm-shop-main { flex:1; min-width:0; }
.smm-shop-title-row { display:flex; align-items:flex-start; gap:10px; }
.smm-shop-card h3 { margin:0; font-size:1.05rem; font-weight:800; color:#111; }
.smm-shop-badge {
  font-size:0.72rem; font-weight:700; color:#c2410c; background:#fff7ed;
  border-radius:999px; padding:3px 10px; white-space:nowrap;
}
.smm-shop-desc { margin:8px 0 0; }
.smm-shop-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:10px; font-size:0.86rem; color:#334155; }
.smm-shop-meta strong { color:#16a34a; font-size:1.05rem; }
.smm-shop-tag { font-style:normal; color:#2563eb; background:#e8f1ff; border-radius:8px; padding:3px 8px; font-weight:700; font-size:0.75rem; }
.smm-shop-side { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:10px; min-width:220px; }
.smm-shop-price { font-size:1.6rem; font-weight:800; color:#5b3df5; line-height:1; }
.smm-shop-price small { font-size:0.75rem; }
.smm-shop-btns { display:flex; gap:8px; }
.smm-shop-btn {
  border:0; border-radius:10px; padding:10px 12px; font-size:0.84rem; font-weight:800; color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
}
.smm-shop-btn.cart { background:linear-gradient(135deg,#7c5cfc,#5b3df5); }
.smm-shop-btn.buy { background:linear-gradient(135deg,#ff8a3d,#f97316); }
.smm-shop-btn-link { border:0; background:transparent; color:#ef4444; font-weight:700; cursor:pointer; }
.smm-cart-line { margin-bottom:10px; }
@media (max-width: 992px) {
  .smm-more-plat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .smm-shop-card { flex-direction:column; }
  .smm-shop-side { align-items:stretch; min-width:0; }
  .smm-shop-btns { width:100%; }
  .smm-shop-btn { flex:1; justify-content:center; }
}

.smm-shop-desc { margin:8px 0 0; }
.smm-shop-desc .shop-desc-title { font-size:0.95rem; line-height:1.35; margin-bottom:4px; }
.smm-shop-desc .shop-desc-body { font-size:0.88rem; line-height:1.5; }
.smm-shop-desc .shop-desc-body p { margin:0 0 6px; word-break:break-word; }
.smm-shop-desc .shop-desc-body p:last-child { margin-bottom:0; }

/* === shop order detail === */
.smm-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: #334155; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 8px 14px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.smm-btn-danger-outline {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: #b91c1c; border: 1px solid #fecaca;
    border-radius: 10px; padding: 8px 14px; font-weight: 700; cursor: pointer;
}
.smm-order-detail-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: #5b3df5; font-weight: 800; font-size: 0.86rem; text-decoration: none; white-space: nowrap;
}
.smm-order-detail-link i { color: #7c5cfc; }
.smm-od-title { text-align: center; font-weight: 900; margin-bottom: 16px; }
.smm-od-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 18px;
}
.smm-od-item label {
    display: block; color: #64748b; font-size: 0.78rem; font-weight: 700; margin-bottom: 4px;
}
.smm-od-item > div { color: #111; font-weight: 700; word-break: break-word; }
.smm-od-span2 { grid-column: span 2; }
.smm-od-full { grid-column: 1 / -1; }
.smm-od-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.smm-od-actions-cell { grid-column: span 1; }
.smm-od-keys-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.smm-od-keys-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.smm-od-btn-purple {
    display: inline-flex; align-items: center; gap: 6px;
    background: #6d5efc; color: #fff; border: 0; border-radius: 10px;
    padding: 8px 14px; font-weight: 700; cursor: pointer;
}
.smm-od-btn-purple:disabled { opacity: .5; cursor: not-allowed; }
.smm-od-pre {
    margin: 0; white-space: pre-wrap; word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem; line-height: 1.45; max-height: 360px; overflow: auto;
}
.smm-od-link-copy {
    border: 0; background: transparent; color: #5b3df5; font-weight: 800; cursor: pointer;
}
@media (max-width: 991.98px) {
    .smm-od-grid { grid-template-columns: 1fr 1fr; }
    .smm-od-span2, .smm-od-actions-cell { grid-column: 1 / -1; }
    .smm-od-actions { justify-content: stretch; }
    .smm-od-actions .smm-btn, .smm-od-actions .smm-btn-ghost, .smm-od-actions .smm-btn-danger-outline { flex: 1; justify-content: center; }
}

/* shop order info table + pipe copy */
.smm-od-table {
    width: 100%; border-collapse: collapse; font-size: 0.9rem;
    border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden;
}
.smm-od-table th, .smm-od-table td {
    border: 1px solid #e2e8f0; padding: 12px 14px; vertical-align: middle;
}
.smm-od-table th {
    width: 110px; background: #f8fafc; color: #64748b; font-weight: 800; white-space: nowrap;
}
.smm-od-table td { color: #111; font-weight: 700; word-break: break-word; }
.smm-pipe-seg {
    display: inline; cursor: pointer; border-radius: 4px; padding: 0 1px;
    background: rgba(109,94,252,0.08);
}
.smm-pipe-seg.is-copied { background: #bbf7d0; }
.smm-pipe-bar { color: #94a3b8; user-select: none; }
.smm-card-pipe { white-space: pre-wrap; word-break: break-all; }
@media (max-width: 991.98px) {
    .smm-od-table th, .smm-od-table td { display: block; width: 100%; }
    .smm-od-table tr { display: block; border-bottom: 1px solid #e2e8f0; padding: 4px 0; }
    .smm-od-table th { border: 0; padding-bottom: 2px; background: transparent; }
    .smm-od-table td { border: 0; padding-top: 0; }
}