/* ============================================================
   自助推广 — 前台样式
   侧栏面板复用核心 mn-panel 外壳，仅补内部布局；
   购买弹窗沿用参考稿的黄色主题（用主题变量兜底文字/边框，兼容夜间模式）
   @file plugins/self_promo/assets/style.css
   ============================================================ */

/* ---------- 侧栏面板 ---------- */
/* 桌面实例由 right_sidebar_after 输出（用户面板正下方）；
   sidebar_ads 的实例带 .sp-mobile-only：桌面右栏会在友链上方再次触发该钩子，
   必须隐藏，否则同一屏出现两块重复面板；≤768px 时作为移动端侧栏入口显示 */
.sp-panel { margin-bottom: 16px; }
.sp-panel.sp-mobile-only { display: none; }
@media (max-width: 768px) {
    .sp-panel.sp-mobile-only { display: block; }
}

/* 标题行：分隔线挂在整行上，才能横跨 100%（标题自身在 flex 里只有内容宽度） */
.sp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--mn-border-light);
}
.sp-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.sp-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--mn-text-muted);
    margin-left: 2px;
}
.sp-my-link {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--mn-text-muted);
    text-decoration: none;
}
.sp-my-link:hover { color: var(--mn-primary); }

/* 展示位网格：2 列 */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.sp-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
/* 悬停不加任何滤镜/位移效果：整块保持原色，仅超长时滚动标题 */

/* ---------- 文字标题超长：hover 向左滚动播放 ----------
   外框 .sp-item-ad 负责裁剪（overflow:hidden）；
   内层 .sp-marquee 保持自然宽度（不换行），JS 测量溢出量写入 --sp-shift / --sp-dur，
   只有确实溢出的元素才会加 .sp-marquee-on（左对齐 + hover 滚动） */
.sp-item-ad .sp-marquee {
    flex: 0 0 auto;
    max-width: none;
    white-space: nowrap;
    transform: translateX(0);
}
.sp-item-ad.sp-marquee-on {
    /* 溢出时必须左对齐，否则 flex 居中会让首字被裁到左侧无法滚出 */
    justify-content: flex-start;
}
.sp-item-ad.sp-marquee-on:hover .sp-marquee {
    animation: sp-marquee var(--sp-dur, 6s) linear infinite;
}
@keyframes sp-marquee {
    /* 停顿 → 左移露出尾部 → 停留 → 回位，循环 */
    0%, 12%    { transform: translateX(0); }
    46%, 62%   { transform: translateX(calc(-1 * var(--sp-shift, 0px))); }
    96%, 100%  { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .sp-item-ad.sp-marquee-on:hover .sp-marquee { animation: none; }
}
/* 空位：虚线描边 + 主色文字，与已投放的彩色实心块区分 */
.sp-item-buy {
    color: var(--mn-primary);
    background: var(--mn-primary-light, #eef1ff);
    border: 1px dashed var(--mn-primary);
}
.sp-item-buy:hover {
    background: var(--mn-primary);
    color: var(--mn-text-white, #fff);
    border-style: solid;
}

/* ---------- 购买弹窗 ---------- */
.sp-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 24, 39, .5);
    backdrop-filter: blur(2px);
}
.sp-mask[hidden] { display: none !important; }

.sp-modal {
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border-radius: 16px;
    background: var(--mn-bg-card, #fff);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

/* 弹窗头部：黄色渐变 */
.sp-modal-head {
    padding: 16px 18px 14px;
    background: linear-gradient(135deg, #ffe36b 0%, #ffc93c 100%);
    color: #2b2b2b;
}
.sp-modal-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sp-modal-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 800;
}
.sp-ad-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    height: 20px;
    border-radius: 5px;
    background: #d94a2b;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .5px;
}
.sp-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #2b2b2b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.sp-close:hover { background: rgba(0, 0, 0, .08); }

.sp-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}
.sp-wallet-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: 13px;
    color: #2b2b2b;
}
.sp-wallet-text b { font-size: 16px; font-weight: 800; color: #d94a2b; }
.sp-recharge {
    padding: 7px 16px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    color: #6b4a00;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.sp-recharge:hover { background: rgba(255, 255, 255, .85); }

/* 弹窗主体 */
.sp-modal-body { padding: 18px; }

.sp-price-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 18px;
    padding: 12px 0;
    border-radius: 12px;
    background: var(--mn-bg-body, #f4f5f7);
}
.sp-price-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-right: 1px solid var(--mn-border);
}
.sp-price-cell:last-child { border-right: none; }
.sp-price-k { font-size: 12px; color: var(--mn-text-muted); }
.sp-price-v { font-size: 15px; font-weight: 800; color: var(--mn-text); }
.sp-total { color: #e8590c; }

.sp-field { margin-bottom: 14px; }
.sp-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mn-text);
}
.sp-req { color: #e03131; font-style: normal; }

/* 时长档位：与档位数量一致的等分网格，横向铺满整行、无右侧空列 */
.sp-durs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}
.sp-dur {
    width: 100%;
    padding: 11px 4px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-card, #fff);
    color: var(--mn-text);
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.sp-dur:hover { border-color: #6ab04c; }
.sp-dur.active {
    background: #6ab04c;
    border-color: #6ab04c;
    color: #fff;
    font-weight: 700;
}

/* 带左侧标签的输入行 */
.sp-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sp-label-inline {
    flex-shrink: 0;
    width: 42px;
    margin-bottom: 0;
    font-weight: 400;
    color: var(--mn-text-muted);
    text-align: center;
}
.sp-input-wrap { position: relative; flex: 1; min-width: 0; }
.sp-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-input, var(--mn-bg-card, #fff));
    color: var(--mn-text);
    font-size: 13px;
    box-sizing: border-box;
}
.sp-input:focus { outline: none; border-color: var(--mn-primary); }
.sp-count {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--mn-text-muted);
    pointer-events: none;
}

/* 颜色行 */
.sp-color-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sp-color-text { flex: 1; }
.sp-color-pick {
    flex-shrink: 0;
    width: 44px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

/* 提示与错误 */
.sp-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mn-text-muted);
}
.sp-note-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--mn-primary, #4f6ef7);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}
.sp-err {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--mn-alert-error-bg, #fef2f2);
    color: var(--mn-alert-error-text, #dc2626);
    font-size: 12px;
    line-height: 1.6;
}
.sp-err[hidden] { display: none !important; }

.sp-submit {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe36b 0%, #ffc93c 100%);
    color: #2b2b2b;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: filter .15s;
}
.sp-submit:hover { filter: brightness(1.05); }
.sp-submit:disabled { opacity: .6; cursor: not-allowed; filter: none; }

.sp-login-tip {
    margin: 12px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--mn-text-muted);
}

/* ---------- 图片展示位（整宽，永远排在文字位之上） ---------- */
/* 图片位高度统一：空位按钮与已投放的图片用同一个高度变量，
   不论买家上传什么比例的图片，购买前后占位高度都一致（不会忽高忽矮） */
.sp-imgs {
    --sp-img-h: 70px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.sp-img-item {
    display: block;
    overflow: hidden;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    text-decoration: none;
    transition: opacity .15s;
}
.sp-img-item:hover { opacity: .88; }
.sp-img-item img {
    display: block;
    width: 100%;
    /* 定高 + cover：拒绝 indefinite 高度导致的布局跳动 */
    height: var(--sp-img-h, 70px);
    object-fit: cover;
    object-position: center;
}
.sp-img-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: var(--sp-img-h, 70px);
    padding: 12px 8px;
    border: 1px dashed var(--mn-primary);
    border-radius: 8px;
    background: var(--mn-primary-light, #eef1ff);
    color: var(--mn-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sp-img-buy:hover {
    background: var(--mn-primary);
    border-style: solid;
    color: var(--mn-text-white, #fff);
}
.sp-img-buy-tag {
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .08);
    font-size: 10px;
}
.sp-img-buy:hover .sp-img-buy-tag { background: rgba(255, 255, 255, .22); }

/* 弹窗内 [hidden] 需强制生效：这些元素自带 display:flex，会盖掉原生 hidden */
.sp-modal [hidden] { display: none !important; }

/* ---------- 类型切换（文字位 / 图片位） ---------- */
.sp-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.sp-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 8px;
    border: 1px solid var(--mn-border);
    border-radius: 10px;
    background: var(--mn-bg-card, #fff);
    color: var(--mn-text);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.sp-type b { font-size: 13px; font-weight: 700; }
.sp-type span { font-size: 11px; color: var(--mn-text-muted); }
.sp-type:hover { border-color: var(--mn-primary); }
.sp-type.active {
    border-color: var(--mn-primary);
    background: var(--mn-primary-light, #eef1ff);
    color: var(--mn-primary);
}
.sp-type.active span { color: var(--mn-primary); }

/* ---------- 我的推广页 ---------- */
.sp-page { padding-bottom: 30px; }
.sp-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.sp-page-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mn-text);
}
.sp-page-sub { margin: 0; font-size: 12.5px; color: var(--mn-text-muted); }
.sp-page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-page-points {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--mn-border);
    border-radius: 10px;
    background: var(--mn-bg-card, #fff);
    font-size: 13px;
    color: var(--mn-text-muted);
}
.sp-page-points b { color: var(--mn-primary); font-size: 15px; }
.sp-page-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffe36b 0%, #ffc93c 100%);
    color: #2b2b2b;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.sp-page-buy:hover { filter: brightness(1.05); }

.sp-empty {
    padding: 44px 16px;
    border: 1px dashed var(--mn-border);
    border-radius: 14px;
    background: var(--mn-bg-card, #fff);
    text-align: center;
}
.sp-empty p { margin: 0 0 14px; font-size: 13px; color: var(--mn-text-muted); }

.sp-records { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sp-record {
    padding: 12px 14px;
    border: 1px solid var(--mn-border);
    border-radius: 12px;
    background: var(--mn-bg-card, #fff);
}
.sp-record-off { opacity: .6; }
.sp-record-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.sp-record-slot {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--mn-text-muted);
}
.sp-record-chip {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-record-type {
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--mn-bg-body, #f4f5f7);
    color: var(--mn-text-muted);
    font-size: 11px;
}
.sp-record-thumb {
    display: block;
    max-width: 200px;
    max-height: 90px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
}
.sp-record-state {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.sp-record-state.on { background: var(--mn-alert-success-bg, #f0fdf4); color: var(--mn-alert-success-text, #16a34a); }
.sp-record-state.off { background: var(--mn-bg-body, #f4f5f7); color: var(--mn-text-muted); }
.sp-record-cost { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #e8590c; }
.sp-record-edit {
    padding: 4px 12px;
    border: 1px solid var(--mn-border);
    border-radius: 7px;
    background: var(--mn-bg-card, #fff);
    color: var(--mn-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.sp-record-edit:hover { color: var(--mn-primary); border-color: var(--mn-primary); }

/* 编辑模式提示条 */
.sp-edit-note {
    margin-bottom: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--mn-primary-light, #eef4ff);
    color: var(--mn-primary);
    font-size: 12px;
    line-height: 1.6;
}
.sp-edit-note[hidden] { display: none !important; }
.sp-record-meta {
    font-size: 12px;
    line-height: 1.7;
    color: var(--mn-text-muted);
    word-break: break-all;
}
.sp-record-url { color: var(--mn-text-link, var(--mn-primary)); text-decoration: none; }
.sp-record-url:hover { text-decoration: underline; }

.sp-page-back { margin: 18px 0 0; font-size: 13px; }
.sp-page-back a { color: var(--mn-text-muted); text-decoration: none; }
.sp-page-back a:hover { color: var(--mn-primary); }

/* ---------- 轻提示 ---------- */
.sp-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 9px 18px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 13px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.sp-toast.show { opacity: 1; }

/* ---------- 窄屏 ---------- */
@media (max-width: 520px) {
    .sp-durs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    .sp-dur { padding: 10px 2px; font-size: 12px; }
    .sp-modal-body { padding: 14px; }
    .sp-modal-head { padding: 14px; }
    .sp-modal-title { font-size: 16px; }
    .sp-record-cost { margin-left: 0; }
}

/* ============================================================
   后台管理页
   ============================================================ */

/* 概览 */
.sp-admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.sp-admin-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--mn-border);
    border-radius: 10px;
    background: var(--mn-bg-card, #fff);
}
.sp-admin-stat-k { font-size: 12px; color: var(--mn-text-muted); }
.sp-admin-stat-v { font-size: 22px; font-weight: 800; color: var(--mn-text); }
.sp-v-live { color: #16a34a; }

/* 表单 */
.sp-admin-form { max-width: 100%; }
.sp-admin-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.sp-admin-row > .form-group { margin-bottom: 12px; }
.sp-admin-w-60  { width: 60px; flex: 0 0 60px; }
.sp-admin-w-80  { width: 80px; flex: 0 0 80px; }
.sp-admin-w-100 { width: 100px; flex: 0 0 100px; }
.sp-admin-w-110 { width: 110px; flex: 0 0 110px; }
.sp-admin-w-120 { width: 120px; flex: 0 0 120px; }
.sp-admin-w-170 { width: 170px; flex: 0 0 170px; }
.sp-admin-w-200 { width: 200px; flex: 0 0 200px; }

/* 列表里的图片广告缩略图 */
.sp-admin-thumb {
    display: block;
    width: 120px;
    max-height: 56px;
    object-fit: cover;
    border: 1px solid var(--mn-border);
    border-radius: 6px;
    margin-bottom: 5px;
}

/* 后台徽章色板（与其它插件保持一致的旧类收敛补丁） */
.admin-container .badge-success { background: var(--mn-success, #10b981); color: #fff; }
.admin-container .badge-warning { background: var(--mn-tag-warning-bg, #fef3c7); color: var(--mn-tag-warning-text, #92400e); }
.admin-container .badge-default { background: var(--mn-bg-muted, #e5e7eb); color: var(--mn-text-muted, #6b7280); }
.sp-admin-inline { display: inline; }
.sp-admin-hint { margin: 6px 0 0; }
.sp-admin-user { margin-top: 3px; }

/* 时长档位 */
.sp-admin-durs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.sp-admin-dur {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-body, #f7f8fa);
}
.sp-admin-dur-name { font-size: 12px; color: var(--mn-text); font-weight: 600; }
.sp-admin-dur .form-input { width: 76px; padding: 5px 8px; font-size: 13px; }
.sp-admin-dur-tip { font-size: 11px; color: var(--mn-text-muted); }

/* 复选行 */
.sp-admin-check { display: flex; flex-direction: column; gap: 2px; }
.sp-admin-check-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--mn-text);
    cursor: pointer;
}

/* 颜色选择 */
.sp-admin-color { display: flex; align-items: center; gap: 8px; }
.sp-admin-color-text { flex: 1; min-width: 0; }
.sp-admin-color-pick {
    flex-shrink: 0;
    width: 42px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

/* 效果预览胶囊（列表与表单共用） */
.sp-admin-chip {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    padding: 3px 10px;
    border: 1px solid var(--mn-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .sp-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .sp-admin-row { flex-direction: column; gap: 0; }
    .sp-admin-row > .form-group,
    .sp-admin-w-60, .sp-admin-w-80, .sp-admin-w-100,
    .sp-admin-w-110, .sp-admin-w-120, .sp-admin-w-170, .sp-admin-w-200 { width: 100%; flex: 1 1 auto; }
}