* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

body {
    background: radial-gradient(circle at top, #1f8bff 0, #050816 55%, #02040a 100%);
    color: #f3f4f6;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

.layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

/* 顶部 */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, .8), rgba(15, 23, 42, .4));
    backdrop-filter: blur(16px);
    margin-bottom: 16px;
    border: 1px solid rgba(148, 163, 184, .2);
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.logo-text {
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 15px;
}

.nav a {
    margin-left: 16px;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    color: #cbd5f5;
}

.nav a:hover {
    border-color: rgba(148, 163, 184, .5);
    background: rgba(15, 23, 42, .7);
}

/* 页面主体 */

.main {
    margin-bottom: 16px;
}

.page-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.form-subtitle {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 12px;
}

/* 卡片网格 */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.card {
    background: radial-gradient(circle at top left, rgba(56, 189, 248, .18), rgba(15, 23, 42, .9));
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .2);
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

.card-cover {
    height: 150px;
    background-size: cover;
    background-position: center;
}

.card-body {
    padding: 12px 14px 4px;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.card-price {
    font-size: 14px;
    color: #38bdf8;
    font-weight: 600;
    margin-bottom: 4px;
}

.card-desc {
    font-size: 13px;
    color: #9ca3af;
}

.card-footer {
    padding: 10px 14px 12px;
    margin-top: auto;
}

/* 按钮 */

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color: #0b1120;
    font-weight: 600;
}

.btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 24px rgba(59, 130, 246, .45);
}

.btn-secondary {
    background: rgba(15, 23, 42, .9);
    color: #e5e7eb;
    border-color: rgba(148, 163, 184, .4);
}

.btn-secondary:hover {
    background: rgba(15, 23, 42, 1);
}

.btn-full {
    width: 100%;
}

.mt-8 {
    margin-top: 8px;
}

/* 空状态 */

.empty-box {
    margin-top: 24px;
    padding: 20px;
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, .6);
    color: #9ca3af;
    font-size: 14px;
    text-align: center;
}

/* 商品详情 */

.detail-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.detail-cover {
    flex: 1 1 320px;
    min-height: 220px;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(148, 163, 184, .3);
}

.detail-info {
    flex: 1 1 280px;
    padding: 12px 14px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15, 23, 42, .95), rgba(15, 23, 42, .7));
    border: 1px solid rgba(148, 163, 184, .3);
}

.detail-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.detail-price {
    font-size: 16px;
    color: #38bdf8;
    font-weight: 600;
    margin-bottom: 8px;
}

.detail-desc {
    font-size: 14px;
    color: #e5e7eb;
    line-height: 1.5;
    margin-bottom: 12px;
}

.detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 表单卡片 */

.form-card,
.auth-card {
    max-width: 520px;
    margin: 8px auto 0;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(15, 23, 42, .82));
    border: 1px solid rgba(148, 163, 184, .35);
}

.form-label {
    display: block;
    font-size: 13px;
    margin-bottom: 10px;
    color: #e5e7eb;
}

.form-label input,
.form-label select,
.form-label textarea {
    margin-top: 4px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .4);
    background: rgba(15, 23, 42, .9);
    color: #e5e7eb;
    font-size: 13px;
    outline: none;
}

.form-label input:focus,
.form-label select:focus,
.form-label textarea:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, .2);
}

/* 成功页面 */

.success-card {
    margin-top: 16px;
}

.success-text {
    font-size: 14px;
    margin-bottom: 12px;
}

.success-section {
    font-size: 13px;
    color: #e5e7eb;
    padding: 10px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .9);
    border: 1px solid rgba(148, 163, 184, .35);
    margin-bottom: 10px;
}

.section-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.success-tips {
    white-space: pre-wrap;
}

/* 后台布局 */

.admin-layout {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.admin-sidebar {
    width: 210px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(15, 23, 42, .8));
    border: 1px solid rgba(148, 163, 184, .4);
    padding: 12px;
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #020617;
}

.admin-username {
    font-size: 14px;
    font-weight: 500;
}

.admin-menu a {
    display: block;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 13px;
    color: #e5e7eb;
    margin-bottom: 4px;
    transition: all .16s ease;
}

.admin-menu a:hover {
    background: rgba(30, 64, 175, .9);
}

.admin-menu a.active {
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color: #020617;
    font-weight: 600;
}

.admin-main {
    flex: 1;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(15, 23, 42, .82));
    border: 1px solid rgba(148, 163, 184, .4);
    padding: 14px;
}

/* 统计卡片 */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 12px;
}

.stat-card {
    border-radius: 16px;
    padding: 10px 12px;
    background: radial-gradient(circle at top left, rgba(56, 189, 248, .25), rgba(15, 23, 42, .95));
    border: 1px solid rgba(148, 163, 184, .4);
}

.stat-label {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 18px;
    font-weight: 600;
}

/* 信息卡片 */

.info-card {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, .95);
    border: 1px solid rgba(148, 163, 184, .35);
    font-size: 13px;
    color: #e5e7eb;
}

.info-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* 表格 */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 10px;
}

.admin-table th,
.admin-table td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(31, 41, 55, .9);
}

.admin-table th {
    text-align: left;
    color: #9ca3af;
    font-weight: 500;
}

.admin-table tr:hover td {
    background: rgba(15, 23, 42, .9);
}

/* 标签 */

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .6);
    font-size: 11px;
    color: #e5e7eb;
}

.tag-online {
    border-color: rgba(56, 189, 248, .9);
    color: #38bdf8;
}

.tag-active {
    background: rgba(56, 189, 248, .18);
    border-color: rgba(56, 189, 248, .88);
}

/* 链接按钮 */

.link-btn {
    border: none;
    background: transparent;
    color: #60a5fa;
    font-size: 12px;
    cursor: pointer;
    padding: 0 2px;
}

.link-btn:hover {
    text-decoration: underline;
}

.link-danger {
    color: #f97373;
}

/* 顶部行 */

.admin-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* 过滤 */

.filter-group .tag {
    margin-left: 4px;
}

/* 后台表单 */

.admin-form .form-label {
    margin-bottom: 10px;
}

.form-actions {
    margin-top: 6px;
    display: flex;
    gap: 8px;
}

/* 消息提示 */

.flash-list {
    margin-bottom: 10px;
}

.flash {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(30, 64, 175, .9);
    border: 1px solid rgba(56, 189, 248, .5);
}

/* 页脚 */

.footer {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    padding: 10px 0 4px;
}

.footer-sub {
    margin-top: 4px;
    font-size: 10px;
}

/* 响应式 */

@media (max-width: 768px) {
    .admin-layout {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .admin-menu {
        display: flex;
        flex: 1;
        gap: 4px;
    }

    .admin-menu a {
        flex: 1;
        text-align: center;
        padding: 5px 0;
        font-size: 12px;
    }

    .header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .nav {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .nav a {
        margin-left: 0;
        margin-right: 0;
    }

    .detail-layout {
        flex-direction: column;
    }
}


/* =========================
   Mobile card-grid 3 columns + category bar
   ========================= */
@media (max-width: 768px){
  .card-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px !important;
    margin: 0 !important;
  }
  .card{
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
    border: 1px solid rgba(0,0,0,.04) !important;
    background: #fff !important;
  }
  .card-cover{
    aspect-ratio: 1 / 1 !important;
  }
  .card-cover img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    background: #f6f7f8 !important;
  }
  .card-title{
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 8px 8px 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.4em !important;
  }
  .card-price{
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #e53935 !important;
    margin: 0 8px 8px !important;
  }

  .category-bar{
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 10px !important;
    margin: 0 0 6px 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  .cat-chip{
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.05) !important;
    color: #111 !important;
    text-decoration: none !important;
  }
  .cat-chip.active{
    background: #111 !important;
    color: #fff !important;
  }
}


/* =========================
   MOBILE_COMPACT_CARDGRID_V1
   手机端商品列表：更像淘宝的紧凑卡片
   ========================= */
@media (max-width: 768px){
  /* 3列你已经实现了，这里只做“变短/更好看” */
  .card-body{ padding: 8px !important; }

  /* 列表页不要显示长描述（详情页再看） */
  .card-desc{ display: none !important; }

  /* 标题最多两行 */
  .card-title{
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 6px 8px 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.4em !important;
  }

  /* 价格更突出 */
  .card-price{
    font-size: 13px !important;
    font-weight: 800 !important;
    margin: 0 8px 8px !important;
  }

  /* 底部按钮缩小，别占太多高度 */
  .card-footer{ padding: 8px !important; }
  .card-footer .btn{
    width: 100% !important;
    padding: 10px 0 !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }
}


/* =========================
   MOBILE_CARD_AUTOHEIGHT_V1
   手机端：卡片高度自适应，去掉大空白
   ========================= */
@media (max-width: 768px){
  .card{ height:auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; }
  .card-body{ height:auto !important; min-height:0 !important; display:block !important; padding:8px !important; }
  .card-desc{ display:none !important; }
  .card-footer{ margin-top:0 !important; padding:8px !important; }
  .card-price{ margin:0 0 6px !important; }
  .card-title{ margin:6px 0 4px !important; }

  /* 3列下按钮太窄会自动换行，强制不换行 + 改短 */
  .card-footer .btn{ white-space:nowrap !important; font-size:12px !important; padding:10px 0 !important; border-radius:999px !important; }
}


/* =========================
   MOBILE_CARD_COMPACT_V2
   手机端：强制紧凑卡片，去掉大空白
   ========================= */
@media (max-width: 768px){
  .card-grid{ gap: 10px !important; padding: 10px !important; }
  .card-grid .card{ height:auto !important; min-height:0 !important; }
  .card-grid .card-cover{ height:auto !important; min-height:0 !important; }
  .card-grid .card-body{ padding: 8px !important; height:auto !important; min-height:0 !important; }
  .card-grid .card-footer{ padding: 8px !important; margin: 0 !important; }
  .card-grid .card-desc{ display:none !important; }
  .card-grid .card-title{ margin: 0 0 4px !important; }
  .card-grid .card-price{ margin: 0 0 6px !important; }
  .card-grid .btn{ white-space:nowrap !important; padding:10px 0 !important; }
}


/* =========================
   MOBILE_TAOBAO_UI_V3
   手机端：更紧凑、更协调（3列不撑高）
   ========================= */
@media (max-width: 768px){
  /* 整体更干净 */
  body{ background: linear-gradient(180deg, #1a86ff 0%, #0b2a55 100%) !important; }

  /* 商品网格 */
  .card-grid{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
    padding:12px !important;
  }

  /* 卡片：取消任何固定高度 */
  .card{
    height:auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    border-radius:14px !important;
  }

  /* 图片：固定方形封面，视觉统一 */
  .card-cover{
    aspect-ratio: 1 / 1 !important;
    height:auto !important;
    min-height:0 !important;
  }
  .card-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }

  /* 内容区：紧凑 */
  .card-body{
    padding:8px 10px !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
  }

  .card-title{
    font-size:13px !important;
    line-height:1.2 !important;
    margin:0 0 6px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    min-height:2.4em !important;
  }

  .card-price{
    margin:0 !important;
    font-size:14px !important;
    font-weight:800 !important;
  }

  /* 底部按钮：别再撑一大块 */
  .card-footer{
    padding:8px 10px !important;
    margin:0 !important;
  }
  .card-footer .btn{
    width:100% !important;
    padding:9px 0 !important;
    font-size:12px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }
}


/* =========================
   MOBILE_THEME_TAOBAO_V1
   手机端主题：淘宝清爽风（统一配色/卡片/按钮）
   ========================= */
@media (max-width: 768px){
  :root{
    --bg: #F5F7FB;
    --surface: #FFFFFF;
    --text: #111827;
    --muted: #6B7280;
    --border: #E5E7EB;
    --primary: #FF5000;   /* 主色：淘宝橙（想用蓝色就改成 #1677FF） */
    --primary2: #D4380D;
    --price: #FF4D4F;     /* 价格红 */
    --shadow: 0 10px 24px rgba(17,24,39,.10);
  }

  body{
    background: var(--bg) !important;
    color: var(--text) !important;
    font-size: 15px !important;
  }

  /* 顶部导航（把大蓝色压下去，变成白色卡片） */
  .header{
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    border-radius: 18px !important;
    margin: 12px !important;
    padding: 12px 14px !important;
  }
  .logo-text{ color: var(--text) !important; font-weight: 900 !important; letter-spacing: .5px; }
  .header a{ color: var(--muted) !important; font-weight: 800 !important; }
  .header a:hover, .header a.active{ color: var(--text) !important; }

  /* 标题统一 */
  h1,h2,h3,.page-title{ color: var(--text) !important; }

  /* 分类 chips（现在的黑/蓝不统一，改成灰底+选中深色） */
  .category-bar{
    margin: 2px 12px 6px !important;
    padding: 4px 0 !important;
    gap: 8px !important;
  }
  .cat-chip{
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
  }
  .cat-chip.active{
    background: var(--text) !important;
    color: #fff !important;
    border-color: var(--text) !important;
  }

  /* 商品网格 & 卡片 */
  .card-grid{
    padding: 12px !important;
    gap: 12px !important;
  }
  .card{
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .card-cover{ background-color: #F3F4F6 !important; }
  .card-body{ padding: 10px !important; }
  .card-title{
    color: var(--text) !important;
    font-weight: 800 !important;
    margin: 0 0 6px !important;
  }
  .card-price{
    color: var(--price) !important;
    font-weight: 900 !important;
    margin: 0 !important;
  }
  .card-desc{ display:none !important; }

  /* 按钮：去掉蓝色渐变，统一淘宝橙，整体更协调 */
  .btn, button{
    background: var(--primary) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .btn:active, button:active{ background: var(--primary2) !important; }

  .card-footer{ padding: 10px !important; }
  .card-footer .btn{
    width: 100% !important;
    border-radius: 999px !important;
    padding: 10px 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* 订单/表单页面：白卡片 + 深色文字 + 灰边框 */
  .form-card, .product-detail{
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    border-radius: 18px !important;
  }
  input, select, textarea{
    background: #fff !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
  }
  label, .muted{ color: var(--muted) !important; }

  /* 你订单页的支付单选（我们之前做的）也统一成白卡片风格 */
  .pay-opt{
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
  }
}


/* =========================
   MOBILE_THEME_TAOBAO_V2
   手机端：统一淘宝橙主题 + 修复不协调
   ========================= */
@media (max-width: 768px){
  :root{
    --bg:#F7F8FA;
    --surface:#FFFFFF;
    --text:#111827;
    --muted:#6B7280;
    --border:#E5E7EB;
    --primary:#FF5000;      /* 淘宝橙 */
    --primary2:#D4380D;
    --price:#FF4D4F;
    --shadow:0 10px 24px rgba(17,24,39,.10);
  }

  body{ background:var(--bg) !important; color:var(--text) !important; }

  /* 顶部导航：白卡片，干净 */
  .header{
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
    box-shadow:var(--shadow) !important;
    border-radius:18px !important;
    margin:12px !important;
    padding:12px 14px !important;
  }
  .logo-text{ color:var(--text) !important; font-weight:900 !important; }
  .header a{ color:var(--muted) !important; font-weight:800 !important; }
  .header a.active, .header a:hover{ color:var(--text) !important; }

  /* 分类chips：选中用橙色，不要黑块 */
  .category-bar{ margin:6px 12px 2px !important; gap:8px !important; }
  .cat-chip{
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
    color:var(--muted) !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    font-weight:800 !important;
  }
  .cat-chip.active{
    background:var(--primary) !important;
    border-color:var(--primary) !important;
    color:#fff !important;
  }

    /* 商品卡片：白卡片统一阴影 */
    .card-grid{ padding:10px !important; gap:10px !important; }
    .card{
      background:var(--surface) !important;
      border:1px solid var(--border) !important;
      box-shadow:var(--shadow) !important;
      border-radius:16px !important;
      overflow:hidden !important;
      min-height:auto !important;
      display:flex !important;
      flex-direction:column !important;
    }

      /* 封面更规整，减少空灰块突兀 */
      .card-cover{
        aspect-ratio:1 / 0.88 !important;
        height:auto !important;
        background-color:#F3F4F6 !important;
        background-size:cover !important;
        background-position:center !important;
      }

      .card-body{
        padding:9px 10px 4px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:4px !important;
        min-height:92px !important;
      }
      .card-title{
        color:var(--text) !important;
        font-weight:900 !important;
        font-size:14px !important;
        line-height:1.18 !important;
        margin:0 !important;
        display:-webkit-box !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
        min-height:2.36em !important;
      }
    .card-price, .product-price, .price{
      color:var(--price) !important;
      font-weight:900 !important;
      font-size:16px !important;
      line-height:1.1 !important;
      margin:0 !important;
      min-height:1.1em !important;
    }

    /* 全站按钮统一橙色（详情/立即下单/提交订单都统一） */
    .btn, button, .buy-btn{
      background:var(--primary) !important;
      color:#fff !important;
      border:0 !important;
      box-shadow:none !important;
    }
    .btn:active, button:active{ background:var(--primary2) !important; }

      /* 卡片按钮更紧凑 */
      .card-footer{
        padding:0 10px 10px !important;
        margin-top:auto !important;
      }
      .card-footer .btn{
        width:100% !important;
        border-radius:999px !important;
        padding:8px 0 !important;
        font-size:12px !important;
        line-height:1.05 !important;
        min-height:38px !important;
        white-space:nowrap !important;
      }

  /* 表单/详情页：白卡片 */
  .form-card, .product-detail{
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
    box-shadow:var(--shadow) !important;
    border-radius:18px !important;
  }
  input, select, textarea{
    background:#fff !important;
    color:var(--text) !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
  }

  /* 支付单选：像列表一样的卡片 */
  .pay-group{ gap:10px !important; }
  .pay-opt{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:12px !important;
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
  }
  .pay-name{ font-weight:800 !important; color:var(--text) !important; }
}


/* =========================
   MOBILE_UI_POLISH_V1
   1) 详情页文字变清晰
   2) 按钮/价格彻底统一（防止蓝色残留）
   3) 首页背景更有层次不单调
   ========================= */
@media (max-width: 768px){
  :root{
    --bg1:#FFF7ED;        /* 顶部淡暖色 */
    --bg2:#F7F8FA;        /* 主背景灰 */
    --surface:#FFFFFF;
    --text:#111827;
    --muted:#4B5563;      /* 详情文字用更深的灰 */
    --border:#E5E7EB;
    --primary:#FF5000;    /* 淘宝橙 */
    --primary2:#D4380D;
    --price:#FF4D4F;
    --shadow:0 10px 24px rgba(17,24,39,.10);
  }

  /* 首页背景：从淡暖到浅灰，有层次但不花 */
  body{
    background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 38%, var(--bg2) 100%) !important;
    color: var(--text) !important;
  }

  /* 顶部导航再精致一点：奶橙渐变品牌卡片 */
  .header{
    background: linear-gradient(135deg, #fffaf5, #fff1e6) !important;
    border: 1px solid #f1dcc8 !important;
    box-shadow: 0 8px 20px rgba(17,24,39,.06), inset 0 1px 0 rgba(255,255,255,.85) !important;
  }

  /* ============ 彻底统一按钮（解决你截图里仍是蓝色的问题） ============ */
  .btn,
  a.btn,
  button,
  .buy-btn,
  .card-footer a,
  .card-footer .btn,
  .product-detail .btn,
  .form-card .btn{
    background: var(--primary) !important;
    background-image: none !important;  /* 干掉旧的蓝色渐变 */
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .btn:active,
  a.btn:active,
  button:active{
    background: var(--primary2) !important;
  }

  /* 次级按钮（返回商品那种） */
  .btn.secondary,
  .btn-ghost,
  .ghost{
    background: #111827 !important;
    background-image: none !important;
    color:#fff !important;
  }

  /* ============ 彻底统一价格颜色（你详情页现在还是蓝色） ============ */
  .card-price,
  .product-price,
  .price,
  .product-detail .price,
  .product-detail .product-price{
    color: var(--price) !important;
    font-weight: 900 !important;
  }

  /* ============ 详情页文字灰蒙蒙：提高对比度 + 去掉透明/滤镜 ============ */
  .product-detail,
  .form-card{
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
  }

  /* 详情描述常见写法全兜底：p/desc/description/card-desc */
  .product-detail p,
  .product-detail .desc,
  .product-detail .description,
  .product-detail .product-desc,
  .product-detail .card-desc{
    color: var(--muted) !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    line-height: 1.6 !important;
  }

  /* 详情页图片别占太夸张：更像电商 */
  .product-detail img{
    max-height: 52vh !important;
    object-fit: cover !important;
  }

  /* ============ 首页“精选商品”更有电商味：标题加橙色下划线 ============ */
  h1, h2, .page-title{
    position: relative;
  }
  h2::after{
    content:"";
    display:block;
    width:48px;
    height:4px;
    margin-top:8px;
    border-radius:999px;
    background: var(--primary);
  }

  /* 分类 chips：选中橙色、未选白底灰边 */
  .cat-chip.active{
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color:#fff !important;
  }

  /* 卡片更精致：阴影统一 */
  .card{
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
  }
}


/* =========================
   FORCE_PRODUCT_DETAIL_CONTRAST_V1
   详情页：强制文字清晰 + 价格红 + 按钮橙
   ========================= */
@media (max-width: 768px){
  /* 兜底：不管模板 class 怎么写，先锁定 product_detail 页面常见容器 */
  .product-detail, .product-detail * {
    opacity: 1 !important;
    filter: none !important;
  }

  /* 标题：更黑更清晰 */
  .product-detail h1,
  .product-detail h2,
  .product-detail .title,
  .product-detail .product-title {
    color: #111827 !important;
    font-weight: 900 !important;
  }

  /* 描述：别再灰到看不见 */
  .product-detail p,
  .product-detail .desc,
  .product-detail .description,
  .product-detail .product-desc,
  .product-detail .card-desc {
    color: #374151 !important;
    opacity: 1 !important;
    line-height: 1.65 !important;
    font-size: 14px !important;
  }

  /* 价格：强制红色（你现在是蓝色） */
  .product-detail .price,
  .product-detail .product-price,
  .product-detail .card-price {
    color: #FF4D4F !important;
    font-weight: 900 !important;
  }

  /* 按钮：强制橙色（你现在还是蓝色） */
  .product-detail .btn,
  .product-detail button,
  .product-detail a.btn,
  .product-detail .buy-btn {
    background: #FF5000 !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
  }
  .product-detail .btn:active,
  .product-detail button:active {
    background: #D4380D !important;
  }
}

/* MOBILE_CLICK_FIX_V1 */
.submit-btn{
  position: relative;
  z-index: 99999;
  pointer-events: auto;
}


/* ===== SUPPORT_UI_BATCH1 ===== */
.support-float-btn {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a18, #ff4d4f);
    color: #fff;
    box-shadow: 0 10px 26px rgba(255, 80, 0, .35);
    border: 1px solid rgba(255,255,255,.18);
    font-size: 14px;
    font-weight: 600;
}
.support-float-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.support-float-icon {
    font-size: 16px;
    line-height: 1;
}
.support-float-text {
    line-height: 1;
}

.user-center-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.user-center-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}
.user-center-subtitle {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.7;
}
.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.quick-card {
    display: block;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: linear-gradient(145deg, rgba(15, 23, 42, .95), rgba(15, 23, 42, .72));
    transition: all .2s ease;
}
.quick-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, .45);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .28);
}
.quick-card-hot {
    background: linear-gradient(145deg, rgba(255, 122, 24, .18), rgba(15, 23, 42, .92));
}
.quick-card-icon {
    font-size: 24px;
    margin-bottom: 10px;
}
.quick-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}
.quick-card-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
}

.support-center-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.support-center-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}
.support-center-subtitle {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.7;
}
.support-center-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.support-thread-list {
    display: grid;
    gap: 14px;
}
.support-thread-card {
    display: block;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, .2);
    background: linear-gradient(145deg, rgba(15, 23, 42, .95), rgba(15, 23, 42, .72));
    transition: all .2s ease;
}
.support-thread-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, .45);
}
.support-thread-card-hot {
    border-color: rgba(255, 122, 24, .35);
    box-shadow: 0 0 0 1px rgba(255, 122, 24, .12) inset;
}
.support-thread-top,
.support-thread-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.support-thread-order {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}
.support-thread-meta,
.support-thread-time {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.6;
}
.support-thread-middle {
    margin: 12px 0;
}
.support-thread-preview {
    font-size: 14px;
    color: #f3f4f6;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.support-thread-right {
    text-align: right;
}
.support-thread-unread {
    margin-top: 8px;
    font-size: 12px;
    color: #ffd6bf;
}
.support-thread-link {
    font-size: 13px;
    font-weight: 600;
    color: #93c5fd;
}

.thread-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    font-size: 12px;
}
.thread-badge-hot {
    background: rgba(255,80,0,.18);
    color: #ffd8c9;
}
.thread-badge-ok {
    background: rgba(56,189,120,.18);
    color: #c8ffd8;
}
.thread-badge-warn {
    background: rgba(255,193,7,.18);
    color: #ffe9a8;
}

@media (max-width: 768px) {
    .support-float-btn {
        right: 12px;
        bottom: 16px;
        padding: 12px 14px;
    }
    .support-float-text {
        display: none;
    }
    .quick-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   ADMIN_UI_UNIFY_V1
   只覆盖继承 base.html 的后台页：
   商品 / 订单 / 客服 / 设置 / 工具 等
   不动独立仪表盘与独立支付页
   ========================= */

body:has(.admin-layout){
  background: linear-gradient(180deg,#f7f9fc 0%, #f1f5fa 100%) !important;
  color:#1f2d3d !important;
}

body:has(.admin-layout) .layout{
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: 16px !important;
}

body:has(.admin-layout) .header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:14px 18px !important;
  border-radius:20px !important;
  background:linear-gradient(90deg,#ffffff 0%, #fff8f2 100%) !important;
  border:1px solid #e7edf5 !important;
  box-shadow:0 8px 24px rgba(31,45,61,.06) !important;
  backdrop-filter:none !important;
}

body:has(.admin-layout) .logo-text{
  color:#10233c !important;
  font-size:15px !important;
  font-weight:800 !important;
}

body:has(.admin-layout) .nav a{
  color:#44566c !important;
  background:#fff !important;
  border:1px solid #e7edf5 !important;
  border-radius:999px !important;
  box-shadow:0 4px 14px rgba(31,45,61,.05) !important;
}

body:has(.admin-layout) .nav a:hover{
  color:#ff7a00 !important;
  background:#fff8f2 !important;
  border-color:#ffd6b1 !important;
}

body:has(.admin-layout) .main{
  margin-bottom: 12px !important;
}

body:has(.admin-layout) .footer{
  color:#8ea0b5 !important;
  padding:10px 0 4px !important;
}

body:has(.admin-layout) .footer-sub{
  color:#a5b3c2 !important;
}

/* 后台外壳 */
body:has(.admin-layout) .admin-layout{
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr) !important;
  gap:16px !important;
  margin-top:12px !important;
  align-items:start !important;
}

body:has(.admin-layout) .admin-sidebar{
  width:auto !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,#1f3b64 0%, #122845 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  padding:14px 12px !important;
  box-shadow:0 10px 26px rgba(17,40,69,.18) !important;
  position:sticky !important;
  top:16px !important;
}

body:has(.admin-layout) .admin-user{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:14px !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

body:has(.admin-layout) .admin-avatar{
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ff9a2f,#ff7a00) !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:0 8px 20px rgba(255,122,0,.24) !important;
}

body:has(.admin-layout) .admin-username{
  font-size:15px !important;
  font-weight:800 !important;
  color:#fff !important;
}

body:has(.admin-layout) .admin-menu a{
  display:block !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  font-size:14px !important;
  color:rgba(255,255,255,.94) !important;
  margin-bottom:6px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid transparent !important;
  transition:all .16s ease !important;
}

body:has(.admin-layout) .admin-menu a:hover{
  background:rgba(255,255,255,.09) !important;
  transform:translateX(2px) !important;
}

body:has(.admin-layout) .admin-menu a.active{
  background:linear-gradient(90deg,#ff7a00,#ff9a2f) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 10px 20px rgba(255,122,0,.22) !important;
}

body:has(.admin-layout) .admin-main{
  flex:none !important;
  border-radius:20px !important;
  background:#ffffff !important;
  border:1px solid #e7edf5 !important;
  padding:16px !important;
  box-shadow:0 8px 24px rgba(31,45,61,.06) !important;
  color:#1f2d3d !important;
  min-width:0 !important;
}

/* 标题、按钮、顶部行 */
body:has(.admin-layout) .page-title{
  font-size:28px !important;
  font-weight:900 !important;
  color:#10233c !important;
  margin-bottom:0 !important;
}

body:has(.admin-layout) .admin-header-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:14px !important;
  flex-wrap:wrap !important;
}

body:has(.admin-layout) .btn-primary,
body:has(.admin-layout) .btn-secondary{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:9px 16px !important;
  border-radius:999px !important;
  font-size:14px !important;
  border:1px solid transparent !important;
  cursor:pointer !important;
  transition:all .16s ease !important;
}

body:has(.admin-layout) .btn-primary{
  background:linear-gradient(90deg,#ff7a00,#ff9a2f) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 8px 16px rgba(255,122,0,.18) !important;
}

body:has(.admin-layout) .btn-primary:hover{
  filter:brightness(1.03) !important;
  box-shadow:0 10px 18px rgba(255,122,0,.22) !important;
}

body:has(.admin-layout) .btn-secondary{
  background:#fff !important;
  color:#44566c !important;
  border-color:#e7edf5 !important;
}

body:has(.admin-layout) .btn-secondary:hover{
  color:#ff7a00 !important;
  background:#fff8f2 !important;
  border-color:#ffd6b1 !important;
}

/* 表格 */
body:has(.admin-layout) .admin-table{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:13px !important;
  margin-top:10px !important;
  color:#24364a !important;
  background:#fbfdff !important;
  border:1px solid #e7edf5 !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

body:has(.admin-layout) .admin-table th,
body:has(.admin-layout) .admin-table td{
  padding:10px 8px !important;
  border-bottom:1px solid #edf2f8 !important;
  vertical-align:middle !important;
}

body:has(.admin-layout) .admin-table th{
  text-align:left !important;
  color:#66788f !important;
  font-weight:800 !important;
  background:linear-gradient(180deg,#f7faff,#eef4fb) !important;
}

body:has(.admin-layout) .admin-table tr:hover td{
  background:#f7fbff !important;
}

/* 标签 */
body:has(.admin-layout) .tag{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  border:1px solid #dbe5f0 !important;
  font-size:11px !important;
  color:#5f7084 !important;
  background:#f3f7fb !important;
}

body:has(.admin-layout) .tag-online{
  border-color:#bfe8d1 !important;
  color:#19a55d !important;
  background:#eafaf1 !important;
}

body:has(.admin-layout) .tag-active{
  background:#fff4e8 !important;
  border-color:#ffd8a8 !important;
  color:#d78000 !important;
}

/* 链接按钮 */
body:has(.admin-layout) .link-btn{
  border:none !important;
  background:transparent !important;
  color:#2f7cff !important;
  font-size:12px !important;
  cursor:pointer !important;
  padding:0 4px !important;
}

body:has(.admin-layout) .link-btn:hover{
  text-decoration:underline !important;
}

body:has(.admin-layout) .link-danger{
  color:#e4556d !important;
}

/* 过滤条 */
body:has(.admin-layout) .filter-group .tag{
  margin-left:6px !important;
}

/* Flash 提示 */
body:has(.admin-layout) .flash-list{
  margin-bottom:12px !important;
}

body:has(.admin-layout) .flash{
  font-size:13px !important;
  padding:8px 12px !important;
  border-radius:12px !important;
  background:#edf5ff !important;
  border:1px solid #d6e7ff !important;
  color:#2f5f9f !important;
}

/* 响应式 */
@media (max-width: 980px){
  body:has(.admin-layout){
    overflow:auto !important;
  }

  body:has(.admin-layout) .admin-layout{
    grid-template-columns:1fr !important;
  }

  body:has(.admin-layout) .admin-sidebar{
    position:static !important;
  }
}

@media (max-width: 768px){
  body:has(.admin-layout) .admin-sidebar{
    width:100% !important;
    display:block !important;
  }

  body:has(.admin-layout) .admin-menu{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  body:has(.admin-layout) .admin-menu a{
    margin-bottom:0 !important;
    text-align:center !important;
    justify-content:center !important;
  }

  body:has(.admin-layout) .header{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }

  body:has(.admin-layout) .nav{
    width:100% !important;
  }

  body:has(.admin-layout) .nav a{
    margin-left:0 !important;
    margin-right:8px !important;
  }
}


/* =========================
   FRONT_HOME_COMPACT_V1
   手机前台：首页 / 我的 顶部压缩 + 分类横滑更明显
   只做最终覆盖，不拆旧样式
   ========================= */
@media (max-width: 768px){
  body:not(:has(.admin-layout)) .layout{
    max-width:none !important;
    margin:0 !important;
    padding:8px !important;
  }

  body:not(:has(.admin-layout)) .header{
    margin:4px 6px 6px !important;
    padding:8px 12px !important;
    border-radius:16px !important;
    min-height:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    position:relative !important;
  }

  body:not(:has(.admin-layout)) .logo{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
  }

    body:not(:has(.admin-layout)) .logo-text{
      font-size:21px !important;
      font-weight:900 !important;
      line-height:1.02 !important;
      white-space:nowrap !important;
      color:#0f172a !important;
      letter-spacing:0 !important;
      text-shadow:0 1px 0 rgba(255,255,255,.70), 0 2px 6px rgba(17,24,39,.06) !important;
    }

  body:not(:has(.admin-layout)) .nav{
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;
    flex-wrap:nowrap !important;
    flex:0 0 auto !important;
    position:absolute !important;
    right:10px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }

  body:not(:has(.admin-layout)) .nav a{
    margin:0 !important;
    padding:4px 8px !important;
    font-size:11px !important;
    line-height:1 !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    background:#fff !important;
    border:1px solid var(--border) !important;
    box-shadow:none !important;
    color:var(--text) !important;
  }

  body:not(:has(.admin-layout)) .main{
    margin:0 !important;
  }

  body:not(:has(.admin-layout)) .main > .page-title{
    margin:2px 8px 6px !important;
    font-size:18px !important;
    line-height:1.2 !important;
  }

  body:not(:has(.admin-layout)) .category-bar{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    margin:2px 6px 8px !important;
    padding:0 10px 4px 0 !important;
    gap:8px !important;
    scroll-snap-type:x proximity;
  }

  body:not(:has(.admin-layout)) .category-bar::-webkit-scrollbar{
    display:none !important;
  }

  body:not(:has(.admin-layout)) .cat-chip{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    scroll-snap-align:start;
    padding:7px 12px !important;
    font-size:13px !important;
    line-height:1.1 !important;
  }

  body:not(:has(.admin-layout)) .card-grid{
    padding:8px !important;
    gap:10px !important;
  }
}

/* FRONT_HOME_DENSE_V6 */
@media (max-width: 768px){
  body:not(:has(.admin-layout)) .header{
    padding:8px 10px 6px !important;
    min-height:50px !important;
  }

  body:not(:has(.admin-layout)) .logo{
    justify-content:center !important;
    gap:2px !important;
  }

  body:not(:has(.admin-layout)) .logo-text{
    font-size:24px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:-0.2px !important;
  }

  body:not(:has(.admin-layout)) .nav{
    right:8px !important;
    gap:3px !important;
  }

  body:not(:has(.admin-layout)) .nav a{
    padding:3px 7px !important;
    font-size:10px !important;
    min-height:22px !important;
  }

  body:not(:has(.admin-layout)) .card-grid{
    padding:8px 8px 0 !important;
    gap:8px !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }

  body:not(:has(.admin-layout)) .card{
    border-radius:14px !important;
    min-height:0 !important;
  }

  body:not(:has(.admin-layout)) .card-cover{
    aspect-ratio:1 / 0.86 !important;
  }

  body:not(:has(.admin-layout)) .card-body{
    padding:7px 8px 2px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
  }

  body:not(:has(.admin-layout)) .card-title{
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    margin:0 !important;
    min-height:2.3em !important;
    letter-spacing:-0.1px !important;
  }

  body:not(:has(.admin-layout)) .card-price{
    font-size:15px !important;
    line-height:1 !important;
    margin:0 !important;
  }

  body:not(:has(.admin-layout)) .card-footer{
    padding:6px 8px 8px !important;
  }

  body:not(:has(.admin-layout)) .card-footer .btn,
  body:not(:has(.admin-layout)) .card-footer .btn-primary{
    width:100% !important;
    min-height:34px !important;
    padding:7px 0 !important;
    font-size:13px !important;
    line-height:1 !important;
    border-radius:999px !important;
  }
}

/* FRONT_HOME_BRAND_TUNE_V7 */
@media (max-width: 768px){
  body:not(:has(.admin-layout)) .header{
    background: linear-gradient(180deg, #fff8f1 0%, #fff1e3 100%) !important;
    border: 1px solid #efd7bb !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, .08) !important;
  }

  body:not(:has(.admin-layout)) .logo-text{
    color:#111827 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 2px 8px rgba(249,115,22,.08) !important;
  }

  body:not(:has(.admin-layout)) .card-body{
    padding:6px 8px 2px !important;
    gap:2px !important;
  }

  body:not(:has(.admin-layout)) .card-title{
    font-size:13px !important;
    line-height:1.1 !important;
    min-height:2.2em !important;
    letter-spacing:-0.15px !important;
  }

  body:not(:has(.admin-layout)) .card-price{
    font-size:14px !important;
  }
}

/* FRONT_HOME_LOGO_PLATE_V8 */
@media (max-width: 768px){
  body:not(:has(.admin-layout)) .logo-text{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px 18px 9px !important;
    border-radius:16px !important;
    background:linear-gradient(180deg, #fff6ea 0%, #ffe8cf 100%) !important;
    border:1px solid #efcfab !important;
    box-shadow:0 2px 8px rgba(249,115,22,.10) !important;
    color:#0f172a !important;
  }
}

/* FRONT_HOME_LOGO_PLATE_V9 */
@media (max-width: 768px){
  body:not(:has(.admin-layout)) .header{
    background:linear-gradient(180deg, #fffaf4 0%, #fff4e8 100%) !important;
    border:1px solid #ecd9bf !important;
    box-shadow:0 2px 8px rgba(148, 163, 184, .06) !important;
  }

  body:not(:has(.admin-layout)) .logo-text{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px 18px 9px !important;
    border-radius:16px !important;
    background:linear-gradient(180deg, #ffd8a8 0%, #ffe9cc 100%) !important;
    border:1px solid #f2b36a !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.55) inset,
      0 4px 12px rgba(245, 158, 11, .18) !important;
    color:#111827 !important;
    text-shadow:none !important;
  }
}

/* FRONT_HOME_REFINEMENT_V10 */
@media (max-width: 768px){
  body:not(:has(.admin-layout)) .header{
    padding:6px 10px 5px !important;
    border-radius:22px !important;
    margin-bottom:8px !important;
  }

  body:not(:has(.admin-layout)) .logo-text{
    font-size:22px !important;
    padding:7px 16px 8px !important;
    border-radius:15px !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.58) inset,
      0 3px 10px rgba(245,158,11,.14) !important;
  }

  body:not(:has(.admin-layout)) .nav a{
    padding:3px 7px !important;
    min-height:20px !important;
    font-size:10px !important;
    background:#fffdf9 !important;
    border-color:#ddd5c8 !important;
    color:#374151 !important;
  }

  body:not(:has(.admin-layout)) .category-bar{
    margin:0 6px 6px !important;
    padding:0 8px 2px 0 !important;
    gap:6px !important;
  }

  body:not(:has(.admin-layout)) .cat-chip{
    padding:6px 11px !important;
    font-size:12px !important;
    line-height:1 !important;
    border-radius:999px !important;
  }

  body:not(:has(.admin-layout)) .card{
    border:1px solid #ece4d8 !important;
    box-shadow:0 2px 8px rgba(17,24,39,.05) !important;
  }

  body:not(:has(.admin-layout)) .card-body{
    padding:6px 8px 1px !important;
    gap:2px !important;
  }

  body:not(:has(.admin-layout)) .card-title{
    font-size:12.5px !important;
    font-weight:700 !important;
    line-height:1.1 !important;
    letter-spacing:-0.15px !important;
    min-height:2.2em !important;
    color:#1f2937 !important;
  }

  body:not(:has(.admin-layout)) .card-price{
    font-size:13.5px !important;
    font-weight:800 !important;
    color:#ef5a46 !important;
  }

  body:not(:has(.admin-layout)) .card-price[style]{
    font-size:13px !important;
    font-weight:700 !important;
    color:#7b8794 !important;
  }

  body:not(:has(.admin-layout)) .card-footer{
    padding:5px 8px 8px !important;
  }

  body:not(:has(.admin-layout)) .card-footer .btn,
  body:not(:has(.admin-layout)) .card-footer .btn-primary{
    min-height:31px !important;
    padding:6px 0 !important;
    font-size:12px !important;
    font-weight:700 !important;
    box-shadow:none !important;
  }
}

/* FRONT_HOME_POLISH_V11 */
@media (max-width: 768px){
  body:not(:has(.admin-layout)) .header{
    padding:5px 10px 4px !important;
    border-radius:20px !important;
    margin-bottom:10px !important;
  }

  body:not(:has(.admin-layout)) .logo-text{
    font-size:21px !important;
    padding:7px 15px 8px !important;
    border-radius:14px !important;
  }

  body:not(:has(.admin-layout)) .nav a{
    padding:2px 7px !important;
    min-height:19px !important;
    font-size:10px !important;
  }

  body:not(:has(.admin-layout)) .category-bar{
    margin:2px 6px 7px !important;
    padding:0 8px 2px 0 !important;
    gap:6px !important;
  }

  body:not(:has(.admin-layout)) .cat-chip{
    padding:5px 10px !important;
    font-size:11.5px !important;
    line-height:1 !important;
  }

  body:not(:has(.admin-layout)) .card-body{
    padding:6px 8px 1px !important;
  }

  body:not(:has(.admin-layout)) .card-title{
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.08 !important;
    min-height:2.15em !important;
  }

  body:not(:has(.admin-layout)) .card-price{
    font-size:13px !important;
  }

  body:not(:has(.admin-layout)) .card-price[style]{
    font-size:12.5px !important;
  }

  body:not(:has(.admin-layout)) .card-footer{
    padding:4px 8px 7px !important;
  }

  body:not(:has(.admin-layout)) .card-footer .btn,
  body:not(:has(.admin-layout)) .card-footer .btn-primary{
    min-height:29px !important;
    padding:5px 0 !important;
    font-size:11.5px !important;
    font-weight:700 !important;
    box-shadow:none !important;
  }

  .support-float-btn{
    right:12px !important;
    bottom:88px !important;
    width:54px !important;
    height:54px !important;
    padding:0 !important;
    gap:0 !important;
    justify-content:center !important;
    border-radius:999px !important;
    box-shadow:0 8px 18px rgba(255,80,0,.22) !important;
  }

  .support-float-icon{
    font-size:22px !important;
  }

  .support-float-text{
    display:none !important;
  }
}

/* FRONT_HOME_LOGO_COLOR_V12 */
@media (max-width: 768px){
  body:not(:has(.admin-layout)) .logo-text{
    background:linear-gradient(180deg, #f6d7a8 0%, #fcebd2 100%) !important;
    border:1px solid #d9a35f !important;
    color:#1e293b !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.60) inset,
      0 3px 10px rgba(217,163,95,.16) !important;
  }
}

/* HOME_FLOAT_PLAYER_V1 */
.home-float-player{
  position:fixed;
  right:18px;
  bottom:94px;
  z-index:998;
}
.home-float-shell{
  position:relative;
  width:120px;
  height:164px;
  overflow:hidden;
  border-radius:18px;
  background:rgba(15,23,42,.96);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(15,23,42,.24);
  cursor:pointer;
}
.home-float-stage{
  width:100%;
  height:100%;
  background:#0f172a;
}
.home-float-media{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}
.home-float-fold{
  position:absolute;
  top:6px;
  right:6px;
  z-index:2;
  width:24px;
  height:24px;
  border:none;
  border-radius:999px;
  background:rgba(15,23,42,.72);
  color:#fff;
  font-size:14px;
  line-height:1;
  cursor:pointer;
}
.home-float-collapsed{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#ffb347,#ff7a18);
  color:#fff;
  box-shadow:0 8px 18px rgba(255,122,24,.28);
  cursor:pointer;
}
.home-float-player.is-collapsed .home-float-shell{
  display:none;
}
.home-float-player.is-collapsed .home-float-collapsed{
  display:inline-flex;
}
@media (max-width: 768px){
  .home-float-player{
    right:12px;
    bottom:150px;
  }
  .home-float-shell{
    width:96px;
    height:132px;
    border-radius:16px;
  }
  .home-float-fold{
    width:22px;
    height:22px;
    top:5px;
    right:5px;
  }
  .home-float-collapsed{
    width:40px;
    height:40px;
  }
}

/* HOME_FLOAT_FULLSCREEN_V2 */
.home-float-player{
  left:8px !important;
  right:8px !important;
  bottom:8px !important;
  top:8px !important;
  z-index:1200 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
}

.home-float-shell{
  width:min(96vw, 560px) !important;
  height:min(92vh, 860px) !important;
  max-width:96vw !important;
  max-height:92vh !important;
  border-radius:20px !important;
  box-shadow:0 18px 48px rgba(15,23,42,.32) !important;
  pointer-events:auto !important;
}

.home-float-stage{
  position:absolute !important;
  inset:0 !important;
}

.home-float-media{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:#000 !important;
}

.home-float-fold{
  width:30px !important;
  height:30px !important;
  top:10px !important;
  right:10px !important;
  font-size:18px !important;
}

.home-float-collapsed{
  width:56px !important;
  height:56px !important;
  pointer-events:auto !important;
}

.home-float-ticker{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:38px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.88) 35%, rgba(15,23,42,.96) 100%) !important;
  display:flex !important;
  align-items:flex-end !important;
  pointer-events:none !important;
}

.home-float-ticker-text{
  display:inline-block !important;
  white-space:nowrap !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:1 !important;
  padding:0 14px 10px !important;
  min-width:100% !important;
  animation:homeFloatTickerMarquee 10s linear infinite !important;
}

@keyframes homeFloatTickerMarquee{
  0%   { transform:translateX(100%); }
  100% { transform:translateX(-100%); }
}

@media (max-width: 768px){
  .home-float-player{
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
  }

  .home-float-shell{
    width:100vw !important;
    height:100vh !important;
    max-width:100vw !important;
    max-height:100vh !important;
    border-radius:0 !important;
  }

  .home-float-fold{
    width:34px !important;
    height:34px !important;
    top:12px !important;
    right:12px !important;
    font-size:20px !important;
  }

  .home-float-collapsed{
    width:52px !important;
    height:52px !important;
  }

  .home-float-ticker{
    height:42px !important;
  }

  .home-float-ticker-text{
    font-size:15px !important;
    padding:0 12px 12px !important;
  }
}

/* HOME_FLOAT_PANEL_V3 */
.home-float-player{
  left:auto !important;
  top:auto !important;
  right:12px !important;
  bottom:88px !important;
  width:auto !important;
  height:auto !important;
  z-index:1200 !important;
  display:block !important;
  pointer-events:none !important;
}

.home-float-shell{
  position:relative !important;
  width:min(78vw, 420px) !important;
  height:min(62vh, 560px) !important;
  max-width:78vw !important;
  max-height:62vh !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 18px 48px rgba(15,23,42,.30) !important;
  pointer-events:auto !important;
}

.home-float-stage{
  position:absolute !important;
  inset:0 !important;
}

.home-float-media{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:#000 !important;
}

.home-float-fold{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:5 !important;
  width:40px !important;
  height:40px !important;
  border:none !important;
  border-radius:999px !important;
  background:rgba(220,38,38,.92) !important;
  color:#fff !important;
  font-size:24px !important;
  line-height:1 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.28) !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

.home-float-collapsed{
  width:52px !important;
  height:52px !important;
  border-radius:999px !important;
  pointer-events:auto !important;
  box-shadow:0 10px 20px rgba(255,122,24,.30) !important;
}

.home-float-ticker{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:42px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.88) 38%, rgba(15,23,42,.96) 100%) !important;
  display:flex !important;
  align-items:flex-end !important;
  pointer-events:none !important;
  z-index:3 !important;
}

.home-float-ticker-text{
  display:inline-block !important;
  white-space:nowrap !important;
  color:#fff !important;
  font-size:15px !important;
  line-height:1 !important;
  padding:0 12px 12px !important;
  min-width:100% !important;
  animation:homeFloatTickerMarquee 10s linear infinite !important;
}

@media (max-width: 768px){
  .home-float-player{
    right:8px !important;
    bottom:82px !important;
  }

  .home-float-shell{
    width:min(88vw, 360px) !important;
    height:min(54vh, 420px) !important;
    max-width:88vw !important;
    max-height:54vh !important;
    border-radius:16px !important;
  }

  .home-float-fold{
    top:8px !important;
    right:8px !important;
    width:38px !important;
    height:38px !important;
    font-size:22px !important;
  }

  .home-float-collapsed{
    width:48px !important;
    height:48px !important;
  }

  .home-float-ticker{
    height:38px !important;
  }

  .home-float-ticker-text{
    font-size:14px !important;
    padding:0 10px 10px !important;
  }
}

/* HOME_FLOAT_PANEL_V4_NO_SUPPORT_OVERLAP */
.home-float-player{
  left:auto !important;
  top:auto !important;
  right:10px !important;
  bottom:156px !important;
  width:auto !important;
  height:auto !important;
  z-index:1100 !important;
  display:block !important;
  pointer-events:none !important;
}

.home-float-shell{
  position:relative !important;
  width:min(42vw, 220px) !important;
  height:min(28vh, 260px) !important;
  max-width:42vw !important;
  max-height:28vh !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:#0b1220 !important;
  box-shadow:0 10px 26px rgba(15,23,42,.22) !important;
  pointer-events:auto !important;
}

.home-float-stage{
  position:absolute !important;
  inset:0 !important;
}

.home-float-media{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  background:#000 !important;
}

.home-float-fold{
  position:absolute !important;
  top:6px !important;
  right:6px !important;
  z-index:6 !important;
  width:30px !important;
  height:30px !important;
  border:none !important;
  border-radius:999px !important;
  background:rgba(220,38,38,.92) !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1 !important;
  box-shadow:0 6px 14px rgba(0,0,0,.22) !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

.home-float-collapsed{
  width:44px !important;
  height:44px !important;
  border-radius:999px !important;
  pointer-events:auto !important;
  box-shadow:0 8px 18px rgba(255,122,24,.26) !important;
}

.home-float-ticker{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:30px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.78) 40%, rgba(15,23,42,.92) 100%) !important;
  display:flex !important;
  align-items:flex-end !important;
  pointer-events:none !important;
  z-index:4 !important;
}

.home-float-ticker-text{
  display:inline-block !important;
  white-space:nowrap !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1 !important;
  padding:0 8px 8px !important;
  min-width:100% !important;
  animation:homeFloatTickerMarquee 9s linear infinite !important;
}

@media (max-width: 768px){
  .home-float-player{
    right:8px !important;
    bottom:150px !important;
  }

  .home-float-shell{
    width:36vw !important;
    height:24vh !important;
    max-width:36vw !important;
    max-height:24vh !important;
    border-radius:14px !important;
  }

  .home-float-fold{
    width:28px !important;
    height:28px !important;
    top:6px !important;
    right:6px !important;
    font-size:17px !important;
  }

  .home-float-collapsed{
    width:42px !important;
    height:42px !important;
  }

  .home-float-ticker{
    height:28px !important;
  }

  .home-float-ticker-text{
    font-size:11px !important;
    padding:0 7px 7px !important;
  }
}

/* HOME_FLOAT_PANEL_V5_LEFT_LANDSCAPE */
.home-float-player{
  left:10px !important;
  right:auto !important;
  top:auto !important;
  bottom:96px !important;
  width:auto !important;
  height:auto !important;
  z-index:1100 !important;
  display:block !important;
  pointer-events:none !important;
}

.home-float-shell{
  position:relative !important;
  width:min(52vw, 320px) !important;
  height:min(19vh, 160px) !important;
  max-width:52vw !important;
  max-height:19vh !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:#0b1220 !important;
  box-shadow:0 10px 26px rgba(15,23,42,.22) !important;
  pointer-events:auto !important;
}

.home-float-stage{
  position:absolute !important;
  inset:0 !important;
}

.home-float-media{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  background:#000 !important;
}

.home-float-fold{
  position:absolute !important;
  top:6px !important;
  right:6px !important;
  z-index:6 !important;
  width:30px !important;
  height:30px !important;
  border:none !important;
  border-radius:999px !important;
  background:rgba(220,38,38,.92) !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1 !important;
  box-shadow:0 6px 14px rgba(0,0,0,.22) !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

.home-float-collapsed{
  width:44px !important;
  height:44px !important;
  border-radius:999px !important;
  pointer-events:auto !important;
  box-shadow:0 8px 18px rgba(255,122,24,.26) !important;
}

.home-float-ticker{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:28px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.78) 40%, rgba(15,23,42,.92) 100%) !important;
  display:flex !important;
  align-items:flex-end !important;
  pointer-events:none !important;
  z-index:4 !important;
}

.home-float-ticker-text{
  display:inline-block !important;
  white-space:nowrap !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1 !important;
  padding:0 8px 7px !important;
  min-width:100% !important;
  animation:homeFloatTickerMarquee 9s linear infinite !important;
}

@media (max-width: 768px){
  .home-float-player{
    left:8px !important;
    right:auto !important;
    bottom:92px !important;
  }

  .home-float-shell{
    width:44vw !important;
    height:15.5vh !important;
    max-width:44vw !important;
    max-height:15.5vh !important;
    border-radius:14px !important;
  }

  .home-float-fold{
    width:28px !important;
    height:28px !important;
    top:6px !important;
    right:6px !important;
    font-size:17px !important;
  }

  .home-float-collapsed{
    width:42px !important;
    height:42px !important;
  }

  .home-float-ticker{
    height:26px !important;
  }

  .home-float-ticker-text{
    font-size:11px !important;
    padding:0 7px 6px !important;
  }
}

/* HOME_FLOAT_PANEL_V6_BIGGER_LOWER */
.home-float-player{
  left:6px !important;
  right:auto !important;
  top:auto !important;
  bottom:68px !important;
  width:auto !important;
  height:auto !important;
  z-index:1100 !important;
  display:block !important;
  pointer-events:none !important;
}

.home-float-shell{
  position:relative !important;
  width:min(56vw, 350px) !important;
  height:min(21vh, 182px) !important;
  max-width:56vw !important;
  max-height:21vh !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:#0b1220 !important;
  box-shadow:0 10px 26px rgba(15,23,42,.22) !important;
  pointer-events:auto !important;
}

.home-float-media{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  background:#000 !important;
}

.home-float-fold{
  top:6px !important;
  right:6px !important;
  width:31px !important;
  height:31px !important;
  font-size:18px !important;
}

.home-float-ticker{
  height:30px !important;
}

.home-float-ticker-text{
  font-size:12px !important;
  padding:0 8px 7px !important;
}

@media (max-width: 768px){
  .home-float-player{
    left:6px !important;
    right:auto !important;
    bottom:74px !important;
  }

  .home-float-shell{
    width:49vw !important;
    height:17.5vh !important;
    max-width:49vw !important;
    max-height:17.5vh !important;
    border-radius:14px !important;
  }

  .home-float-fold{
    width:29px !important;
    height:29px !important;
    top:6px !important;
    right:6px !important;
    font-size:17px !important;
  }

  .home-float-ticker{
    height:27px !important;
  }

  .home-float-ticker-text{
    font-size:11px !important;
    padding:0 7px 6px !important;
  }
}

/* HOME_FLOAT_PANEL_V7_WIDER_LOWER */
.home-float-player{
  left:6px !important;
  right:auto !important;
  top:auto !important;
  bottom:60px !important;
  width:auto !important;
  height:auto !important;
  z-index:1100 !important;
  display:block !important;
  pointer-events:none !important;
}

.home-float-shell{
  position:relative !important;
  width:min(60vw, 380px) !important;
  height:min(22vh, 196px) !important;
  max-width:60vw !important;
  max-height:22vh !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:#0b1220 !important;
  box-shadow:0 10px 26px rgba(15,23,42,.22) !important;
  pointer-events:auto !important;
}

.home-float-media{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  background:#000 !important;
}

.home-float-fold{
  top:6px !important;
  right:6px !important;
  width:31px !important;
  height:31px !important;
  font-size:18px !important;
}

.home-float-ticker{
  height:31px !important;
}

.home-float-ticker-text{
  font-size:12px !important;
  padding:0 8px 7px !important;
}

@media (max-width: 768px){
  .home-float-player{
    left:6px !important;
    right:auto !important;
    bottom:62px !important;
  }

  .home-float-shell{
    width:53vw !important;
    height:18.8vh !important;
    max-width:53vw !important;
    max-height:18.8vh !important;
    border-radius:14px !important;
  }

  .home-float-fold{
    width:29px !important;
    height:29px !important;
    top:6px !important;
    right:6px !important;
    font-size:17px !important;
  }

  .home-float-ticker{
    height:28px !important;
  }

  .home-float-ticker-text{
    font-size:11px !important;
    padding:0 7px 6px !important;
  }
}

/* HOME_FLOAT_PANEL_V8_WIDER */
.home-float-shell{
  width:min(64vw, 405px) !important;
  max-width:64vw !important;
}

@media (max-width: 768px){
  .home-float-shell{
    width:57vw !important;
    max-width:57vw !important;
  }
}

/* HOME_FLOAT_BUTTON_LABELS_V9 */
@media (max-width: 768px){
  /* 播放按钮：稍微往里、往上一点，避免贴边 */
  .home-float-player.is-collapsed{
    left:10px !important;
    bottom:88px !important;
  }

  .home-float-collapsed{
    position:relative !important;
    overflow:visible !important;
  }

  .home-float-collapsed::after{
    content:"播放";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-20px;
    white-space:nowrap;
    font-size:11px;
    line-height:1;
    color:#fff;
    background:rgba(15,23,42,.78);
    padding:4px 8px;
    border-radius:999px;
    box-shadow:0 4px 12px rgba(0,0,0,.16);
    pointer-events:none;
  }

  /* 客服按钮：轻微上收，给文字留位置 */
  .support-float-btn{
    right:10px !important;
    bottom:90px !important;
    overflow:visible !important;
  }

  .support-float-btn::after{
    content:"客服";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-20px;
    white-space:nowrap;
    font-size:11px;
    line-height:1;
    color:#fff;
    background:rgba(15,23,42,.78);
    padding:4px 8px;
    border-radius:999px;
    box-shadow:0 4px 12px rgba(0,0,0,.16);
    pointer-events:none;
  }
}

/* HOME_FLOAT_BUTTON_POSITION_V10 */
@media (max-width: 768px){
  /* 播放按钮：往下、往右一点，并放大到和客服一样大 */
  .home-float-player.is-collapsed{
    left:18px !important;
    bottom:76px !important;
  }

  .home-float-collapsed{
    width:54px !important;
    height:54px !important;
    font-size:22px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .home-float-collapsed::after{
    bottom:-22px !important;
  }

  /* 客服按钮：也稍微往下、往右一点 */
  .support-float-btn{
    right:6px !important;
    bottom:82px !important;
    width:54px !important;
    height:54px !important;
  }

  .support-float-icon{
    font-size:22px !important;
  }

  .support-float-btn::after{
    bottom:-22px !important;
  }
}

/* HOME_FLOAT_PANEL_V11_EXPANDED_CLEANUP */
@media (max-width: 768px){
  /* 展开时：播放器整体再往下贴一点 */
  .home-float-player{
    left:6px !important;
    bottom:34px !important;
  }

  /* 收起时：保留左下播放键原来的位置 */
  .home-float-player.is-collapsed{
    left:10px !important;
    bottom:88px !important;
  }

  /* 展开时：彻底隐藏左下播放键，避免显得多余 */
  .home-float-player:not(.is-collapsed) .home-float-collapsed{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  .home-float-player:not(.is-collapsed) .home-float-collapsed::after{
    display:none !important;
    content:none !important;
  }
}

/* HOME_FLOAT_PANEL_V12_SLIGHTLY_BIGGER */
.home-float-shell{
  width:min(66vw, 420px) !important;
  height:min(23vh, 208px) !important;
  max-width:66vw !important;
  max-height:23vh !important;
}

@media (max-width: 768px){
  .home-float-shell{
    width:60vw !important;
    height:20.5vh !important;
    max-width:60vw !important;
    max-height:20.5vh !important;
  }
}

/* HOME_CATEGORY_SECTIONS_V1 */
.home-cat-sections{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:8px 10px 12px;
}

.home-cat-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.home-cat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 2px;
}

.home-cat-title{
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  color:#111827;
}

.home-cat-more{
  flex:0 0 auto;
  font-size:12px;
  line-height:1;
  color:#2563eb;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(37,99,235,.16);
  border-radius:999px;
  padding:6px 10px;
}

.home-cat-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  padding:2px 2px 4px;
}

.home-cat-row::-webkit-scrollbar{
  display:none;
}

.home-cat-card{
  flex:0 0 168px;
  width:168px;
  min-height:0 !important;
  scroll-snap-align:start;
}

.home-cat-card .card-cover{
  height:170px !important;
}

.home-cat-card .card-body{
  padding:8px 9px 8px !important;
  min-height:0 !important;
}

.home-cat-card .card-title{
  font-size:13px !important;
  line-height:1.18 !important;
  min-height:2.36em !important;
  margin:0 0 4px !important;
}

.home-cat-card .card-price{
  font-size:13px !important;
  margin:0 !important;
}

@media (max-width: 768px){
  body:not(:has(.admin-layout)) .home-cat-sections{
    gap:16px !important;
    padding:6px 8px 10px !important;
  }

  body:not(:has(.admin-layout)) .home-cat-head{
    padding:0 2px !important;
  }

  body:not(:has(.admin-layout)) .home-cat-title{
    font-size:15px !important;
  }

  body:not(:has(.admin-layout)) .home-cat-more{
    font-size:11px !important;
    padding:5px 9px !important;
  }

  body:not(:has(.admin-layout)) .home-cat-row{
    gap:8px !important;
    padding:2px 2px 4px !important;
  }

  body:not(:has(.admin-layout)) .home-cat-card{
    flex:0 0 138px !important;
    width:138px !important;
    border-radius:14px !important;
  }

  body:not(:has(.admin-layout)) .home-cat-card .card-cover{
    height:142px !important;
    aspect-ratio:auto !important;
  }

  body:not(:has(.admin-layout)) .home-cat-card .card-body{
    padding:7px 8px 7px !important;
  }

  body:not(:has(.admin-layout)) .home-cat-card .card-title{
    font-size:12px !important;
    line-height:1.15 !important;
    min-height:2.3em !important;
    margin:0 0 3px !important;
  }

  body:not(:has(.admin-layout)) .home-cat-card .card-price{
    font-size:12.5px !important;
  }
}