/* H5WrapApp 用户前端 v3.8 - 专业商用版（参考快云分发风格） */
:root {
    --u-primary: #2563eb;
    --u-primary-light: #eff6ff;
    --u-primary-hover: #1d4ed8;
    --u-success: #16a34a;
    --u-danger: #dc2626;
    --u-warning: #f59e0b;
    --u-bg: #f3f4f6;
    --u-white: #fff;
    --u-text: #1e293b;
    --u-text-sec: #64748b;
    --u-border: #e2e8f0;
    --u-sidebar-bg: #ffffff;
    --u-sidebar-w: 200px;
    --u-topbar-h: 50px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--u-bg);color:var(--u-text);font-size:14px;line-height:1.6;min-height:100vh;overflow-x:hidden}

/* ====== 整体布局 ====== */
.u-app{display:flex;min-height:100vh}

/* ====== 左侧导航栏 ====== */
.u-sidebar{
    width:var(--u-sidebar-w);background:var(--u-sidebar-bg);border-right:1px solid var(--u-border);
    display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:40;transition:transform .25s ease
}
.u-sidebar-header{
    height:var(--u-topbar-h);padding:0 16px;display:flex;align-items:center;gap:10px;
    border-bottom:1px solid var(--u-border);flex-shrink:0
}
.u-sidebar-logo{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.u-sidebar-brand{font-weight:700;font-size:15px;white-space:nowrap}
.u-sidebar-nav{flex:1;overflow-y:auto;padding:10px 0}
/* 导航分组 */
.u-nav-group{margin-bottom:4px}
.u-nav-group-title{
    padding:8px 16px 6px;font-size:12px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;
    font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none
}
.u-nav-group-title .arrow{font-size:10px;transition:transform .2s}
.u-nav-group.collapsed .arrow{transform:-90deg}
.u-nav-group.collapsed .nav-items{display:none}
/* 导航项 */
.u-snav-item{
    padding:9px 16px 9px 30px;display:flex;align-items:center;gap:8px;cursor:pointer;
    font-size:13.5px;color:#475569;transition:all .15s;position:relative;
    border-left:3px solid transparent
}
.u-snav-item:hover{background:var(--u-primary-light);color:var(--u-primary)}
.u-snav-item.active{background:var(--u-primary-light);color:var(--u-primary);font-weight:600;border-left-color:var(--u-primary)}
.u-snav-item .snav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.u-snav-item .snav-badge{
    margin-left:auto;padding:1px 6px;font-size:10px;border-radius:4px;font-weight:700;
    line-height:1.4
}
.u-snav-item .snav-badge.hot{background:#fef3c7;color:#d97706}
.u-snav-item .snav-badge.new{background:#dbeafe;color:#2563eb}
.u-sidebar-footer{
    padding:12px 16px;border-top:1px solid var(--u-border);
    font-size:11px;color:#cbd5e1;text-align:center;flex-shrink:0
}

/* ====== 右侧区域 ====== */
.u-main-area{flex:1;margin-left:var(--u-sidebar-w);display:flex;flex-direction:column;min-height:100vh}

/* ====== 顶部信息栏 ====== */
.u-topbar{
    height:var(--u-topbar-h);background:var(--u-white);border-bottom:1px solid var(--u-border);
    display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:30;
    flex-shrink:0
}
.u-topbar-left{display:flex;align-items:center;gap:18px;min-height:var(--u-topbar-h)}
.u-topbar-greet{font-size:13px;color:var(--u-text)}
.u-topbar-greet strong{color:var(--u-text);font-weight:600}
.u-topbar-info{display:flex;align-items:center;gap:16px;font-size:13px;flex-wrap:wrap}
.u-top-stat{display:flex;align-items:center;gap:4px;color:var(--u-text-sec)}
.u-top-stat strong{color:var(--u-text);font-weight:600}
.u-btn-recharge{
    background:var(--u-primary);color:#fff;border:none;padding:3px 14px;border-radius:5px;
    font-size:12px;font-weight:500;cursor:pointer;transition:background .15s
}
.u-btn-recharge:hover{background:var(--u-primary-hover)}
.u-btn-buy{
    background:#16a34a;color:#fff;border:none;padding:3px 14px;border-radius:5px;
    font-size:12px;font-weight:500;cursor:pointer;transition:background .15s
}
.u-btn-buy:hover{background:#15803d}
.u-link-switch{font-size:12px;color:var(--u-primary);text-decoration:none;cursor:pointer}
.u-link-switch:hover{text-decoration:underline}

/* ====== 主内容区 ====== */
.u-content{flex:1;padding:20px 24px;overflow-y:auto}

/* ====== 面板/页面 ====== */
.u-page{display:none}
.u-page.active{display:block}

/* ========== 页面：封装向导 ========= */
/* 步骤指示器 */
.u-step-indicator{
    display:flex;align-items:center;gap:0;margin-bottom:20px;padding:16px 0 0
}
.u-step-dot{
    width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;flex-shrink:0;transition:all .2s
}
.u-step-dot.done{background:var(--u-success);color:#fff}
.u-step-dot.active{background:var(--u-primary);color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.u-step-dot.pending{background:#e2e8f0;color:#94a3b8}
.u-step-line{flex:1;height:2px;background:#e2e8f0;margin:0 8px;max-width:60px}
.u-step-line.done{background:var(--u-success)}
.u-step-label{font-size:12px;color:var(--u-text-sec);margin-top:4px;white-space:nowrap}

/* 插件卡片网格 */
.u-plugin-section-title{
    font-size:15px;font-weight:600;color:var(--u-text);margin-bottom:14px;padding-bottom:8px;
    border-bottom:1px solid var(--u-border);padding-left:4px
}
.u-plugin-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:24px
}
.u-plugin-card{
    background:var(--u-white);border:1px solid var(--u-border);border-radius:8px;
    overflow:hidden;transition:all .15s;cursor:pointer;position:relative
}
.u-plugin-card:hover{border-color:var(--u-primary);box-shadow:0 4px 12px rgba(37,99,235,.08)}
.u-plugin-card.selected{border-color:var(--u-primary);background:var(--u-primary-light);box-shadow:0 0 0 1px var(--u-primary)}

/* 插件卡片头部 */
.u-plugin-card-head{
    padding:10px 12px 6px;display:flex;align-items:center;justify-content:space-between;
    position:relative
}
.u-plugin-card-name{font-size:13.5px;font-weight:600;color:var(--u-text)}
.u-plugin-price-tag{
    display:inline-block;padding:1px 8px;border-radius:4px;font-size:11px;font-weight:600;
    line-height:1.6
}
.u-plugin-price-tag.free{background:#ecfdf5;color:#059669}
.u-plugin-price-tag.paid{background:#fef3c7;color:#d97706}
.u-plugin-card-hot{
    position:absolute;top:6px;right:8px;background:#ef4444;color:#fff;font-size:10px;
    padding:1px 6px;border-radius:3px;font-weight:700
}
.u-plugin-card-new{
    position:absolute;top:6px;right:8px;background:#3b82f6;color:#fff;font-size:10px;
    padding:1px 6px;border-radius:3px;font-weight:700
}

/* 插件描述 */
.u-plugin-card-desc{padding:0 12px;font-size:11.5px;color:var(--u-text-sec);line-height:1.55;
    min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

/* 功能标签 */
.u-plugin-tags{padding:6px 12px 8px;display:flex;flex-wrap:wrap;gap:4px}
.u-p-tag{
    display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--u-border);
    border-radius:4px;font-size:11px;color:var(--u-text-sec);background:#fafafa;transition:all .1s;
    cursor:pointer;user-select:none;line-height:1.5
}
.u-p-tag:hover{border-color:var(--u-primary);color:var(--u-primary);background:var(--u-primary-light)}
.u-p-tag.selected{border-color:var(--u-primary);color:var(--primary);background:var(--u-primary-light);
    box-shadow:inset 0 0 0 1px rgba(37,99,235,.15)
}

/* 卡片底部选项 */
.u-plugin-card-foot{padding:8px 12px 10px;border-top:1px solid #f8fafc;display:flex;align-items:center;justify-content:space-between}
.u-plugin-check-label{
    display:flex;align-items:center;gap:5px;font-size:12px;color:var(--u-text-sec);cursor:pointer
}
.u-plugin-check-label input[type="checkbox"]{accent-color:var(--u-primary)}

/* 步骤底部导航 */
.u-build-steps-bar{
    display:flex;align-items:center;justify-content:space-between;padding:16px 0;
    border-top:1px solid var(--u-border);margin-top:8px
}
.u-step-tip{font-size:12px;color:var(--u-danger)}
.u-step-buttons{display:flex;gap:10px}
.u-btn-step{
    padding:8px 32px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;
    border:1.5px solid var(--u-border);background:var(--u-white);color:var(--u-text-sec);transition:all .15s
}
.u-btn-step:hover{border-color:var(--u-primary);color:var(--u-primary)}
.u-btn-step-primary{
    background:var(--u-primary);color:#fff;border-color:var(--u-primary);min-width:120px
}
.u-btn-step-primary:hover{background:var(--u-primary-hover)}

/* ========== 页面：基本信息表单 ========= */
.u-form-card{background:var(--u-white);border:1px solid var(--u-border);border-radius:10px;padding:24px;margin-bottom:16px}
.u-form-card-title{font-size:16px;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.u-form-row{display:flex;gap:16px;margin-bottom:16px}
.u-form-row .u-fg{flex:1}
.u-fg label{display:block;font-size:13px;font-weight:500;color:var(--u-text);margin-bottom:5px}
.u-fg label .required{color:var(--u-danger)}
.u-input{
    width:100%;padding:10px 14px;border:1.5px solid var(--u-border);border-radius:8px;font-size:14px;
    outline:none;transition:all .15s;background:#fafbfc
}
.u-input:focus{border-color:var(--u-primary);box-shadow:0 0 0 3px rgba(37,99,235,.08);background:#fff}
.u-upload-box{
    display:flex;align-items:center;gap:12px;padding:14px;border:2px dashed var(--u-border);
    border-radius:8px;cursor:pointer;transition:all .15s;background:#fafbfc
}
.u-upload-box:hover{border-color:var(--u-primary);background:var(--u-primary-light)}
.u-upload-thumb{width:56px;height:56px;border-radius:8px;background:#e2e8f0;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.u-upload-thumb img{width:100%;height:100%;object-fit:cover}
.u-upload-info{flex:1}
.u-upload-info b{color:var(--u-primary);font-size:13px}
.u-upload-info small{display:block;color:var(--u-text-sec);font-size:11.5px;margin-top:2px}

/* ========== 页面：打包确认 ========= */
.u-confirm-list{background:#fafbfc;border:1px solid var(--u-border);border-radius:8px;padding:16px;margin-bottom:16px;font-size:13px;line-height:2}
.u-confirm-list dt{float:left;width:80px;color:var(--u-text-sec);font-weight:500;clear:both}
.u-confirm-list dd{margin-left:96px;color:var(--u-text)}
.u-progress-bar{width:100%;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;margin:12px 0}
.u-progress-fill{height:100%;background:linear-gradient(90deg,var(--u-primary),#60a5fa);border-radius:4px;width:0%;
    transition:width .3s linear
}
.u-progress-bar.active .u-progress-fill{animation:progressAnim 1.5s ease-in-out infinite alternate}
@keyframes progressAnim{from{width:0%}to{width:70%}}
.u-msg-box{padding:10px 14px;border-radius:6px;font-size:13px;display:none}
.u-msg-box.show{display:block}
.u-msg-box.success{background:#ecfdf5;color:#166534;border:1px solid #a7f3d0}
.u-msg-box.error{background:#fef2f2;color:#991b1b;border:1px solid#fecaca}
.u-msg-box.info{background:#eff6ff;color:#1e40af;border:1px solid#bfdbfe}

/* ========== 页面：历史记录 ========= */
.u-history-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--u-white);border-radius:8px;overflow:hidden;border:1px solid var(--u-border)}
.u-history-table th{background:#f8fafc;padding:10px 14px;text-align:left;font-weight:600;color:var(--u-text-sec);
    border-bottom:1px solid var(--u-border);font-size:12px;text-transform:uppercase;letter-spacing:.3px
}
.u-history-table td{padding:10px 14px;border-bottom:1px solid #f8fafc;vertical-align:middle}
.u-history-table tr:last-child td{border-bottom:none}
.u-history-table tr:hover td{background:#f8fafc}
.u-status{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600}
.u-status.success{background:#ecfdf5;color:#166534}
.u-status.failed{background:#fef2f2;color:#991b1b}
.u-status.pending{background:#fffbeb;color:#92400e}
.u-dl-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:5px;
    background:var(--u-primary);color:#fff;font-size:12px;text-decoration:none;transition:background .15s
}
.u-dl-btn:hover{background:var(--u-primary-hover)}

/* ========== 页面：个人中心 ========= */
.u-profile-header{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--u-border);margin-bottom:20px}
.u-avatar-lg{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--u-primary),#60a5fa);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:700;flex-shrink:0
}
.u-profile-info h3{font-size:18px;font-weight:700}
.u-profile-info p{font-size:12px;color:var(--u-text-sec)}
.u-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.u-stat-card-sm{background:var(--u-white);border:1px solid var(--u-border);border-radius:10px;padding:16px;text-align:center}
.u-stat-val{font-size:26px;font-weight:700;color:var(--u-text)}
.u-stat-lbl{font-size:12px;color:var(--u-text-sec);margin-top:2px}

/* ========== 模态框 ========= */
.u-modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:200;
    align-items:center;justify-content:center;backdrop-filter:blur(3px)
}
.u-modal-overlay.active{display:flex}
.u-modal{background:var(--u-white);border-radius:14px;padding:28px 26px;width:420px;max-width:92vw;
    box-shadow:0 20px 60px rgba(0,0,0,.2);animation:modalPop .22s ease-out;max-height:88vh;overflow-y:auto
}
@keyframes modalPop{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.u-modal h2{font-size:19px;margin-bottom:4px}
.u-modal .u-sub{font-size:13px;color:var(--u-text-sec);margin-bottom:20px}

/* 表单组件 */
.u-fg{margin-bottom:14px}
.u-fg label{display:block;font-size:13px;color:var(--u-text);margin-bottom:5px;font-weight:500}
.u-fg label .req{color:var(--u-danger)}
.u-fi{
    width:100%;padding:10px 14px;border:1.5px solid var(--u-border);border-radius:8px;font-size:14px;
    outline:none;transition:all .15s;background:#fafbfc;font-family:inherit
}
.u-fi:focus{border-color:var(--u-primary);box-shadow:0 0 0 3px rgba(37,99,235,.1);background:#fff}
.u-fi::placeholder{color:#94a3b8}
.u-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;
    border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .15s
}
.u-btn-primary{background:var(--u-primary);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.2)}
.u-btn-primary:hover{background:var(--u-primary-hover);transform:translateY(-1px)}
.u-btn-primary:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}
.u-btn-outline{background:transparent;color:var(--u-primary);border:1.5px solid var(--u-primary)}
.u-btn-outline:hover{background:var(--u-primary-light)}
.u-btn-block{width:100%}
.u-btn-sm{padding:6px 16px;font-size:12.5px}

/* Toast */
.u-toast-c{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.u-toast{padding:12px 18px;border-radius:9px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.14);
    animation:tIn .28s ease;max-width:380px;font-weight:500
}
.u-toast.tOut{animation:tOut .22s ease forwards}
@keyframes tIn{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}
@keyframes tOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(36px)}}
.u-toast.ok{background:#ecfdf5;color:#166534;border:1px solid#a7f3d0}
.u-toast.err{background:#fef2f2;color:#991b1b;border:1px solid#fecaca}
.u-toast.warn{background:#fffbeb;color:#92400e;border:1px solid#fde68a}

/* Empty state */
.u-empty{text-align:center;padding:48px 20px;color:var(--u-text-sec)}
.u-empty-icon{font-size:44px;margin-bottom:10px;opacity:.25}

/* 公告栏 */
.u-notice-bar{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;
    padding:8px 24px;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px

/* 页脚 */
.u-footer{text-align:center;padding:16px;font-size:11.5px;color:#94a3b8;border-top:1px solid var(--u-border);margin-top:auto}
.u-footer a{color:var(--u-primary);text-decoration:none}

/* 侧边栏折叠按钮（移动端） */
.u-menu-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;
    border:1.5px solid var(--u-border);border-radius:8px;background:var(--u-white);cursor:pointer;
    font-size:17px;flex-shrink:0;margin-right:10px
}

/* 响应式 */
@media(max-width:900px){
    .u-sidebar{transform:translateX(-100%)}
    .u-sidebar.show{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.12)}
    .u-main-area{margin-left:0}
    .u-menu-toggle{display:flex}
    .u-plugin-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}
    .u-form-row{flex-direction:column}
}
@media(max-width:480px){
    .u-topbar{flex-direction:column;height:auto;padding:10px 16px;gap:8px}
    .u-topbar-info{justify-content:center}
    .u-plugin-grid{grid-template-columns:1fr 1fr;gap:8px}
    .u-step-buttons{flex-direction:column}
}