/* Unified user theme (merged from user-index/login/reg/findpwd/regsite/shopsm) */ /* ===== Theme variable fallbacks ===== Some pages rely on theme-customizer.js adding `tc-theme-root` to . If that JS is missing/blocked (e.g. staticurl not synced), CSS variables would be undefined and the UI won't follow the theme color. Provide safe defaults here so /user/login.php and others always render correctly. */ :root{ /* Force user-side primary palette to avoid being overridden by theme-customizer cache */ --tc-primary:#2563eb; --tc-primary-strong:#1d4ed8; --tc-primary-soft:#dbeafe; --tc-text:#2f2548; --tc-muted:#6d5c95; --tc-border:color-mix(in srgb, var(--tc-primary) 28%, transparent); --tc-radius:22px; /* gradients must follow the primary variables to keep UI consistent */ --tc-grad-main:linear-gradient(120deg,var(--tc-primary-soft),var(--tc-primary),var(--tc-primary-strong)); --tc-grad-soft:linear-gradient(120deg,#ffffff,var(--tc-primary-soft),var(--tc-primary)); --tc-grad-card:linear-gradient(120deg,#ffffff,color-mix(in srgb, var(--tc-primary-soft) 70%, #fff)); --tc-page-bg:#ffffff; } /* ===== user-index.css ===== */ img.logo{width:14px;height:14px;margin:0 5px 0 3px;} .span_position{display:inline;background:red;border-radius:50%;width:10px;height:10px;position:absolute} .nickname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px;} .user-home{ padding-bottom:10px; padding-left:clamp(8px,1.2vw,18px); padding-right:clamp(8px,1.2vw,18px); } .user-home .row{margin-left:-8px;margin-right:-8px} .user-home .row>[class*="col-"]{padding-left:8px;padding-right:8px} .user-home .panel{ border:1px solid var(--tc-border); border-radius:18px; overflow:hidden; box-shadow:0 18px 35px color-mix(in srgb, var(--tc-primary-strong) 16%, transparent); /* clarity: reduce glass blur, increase solidity */ background:rgba(255,255,255,.98); backdrop-filter:none; } .user-home .panel-heading.user-panel-head{ border:0; background:var(--tc-grad-soft) !important; padding:16px 16px; color:#fff; } .user-home .panel-heading.user-panel-head .panel-title, .user-home .panel-heading.user-panel-head .panel-title *{color:#fff !important} .user-home .panel-heading.user-panel-head .img-thumbnail{ border:3px solid rgba(255,255,255,.72); box-shadow:0 8px 16px color-mix(in srgb, var(--tc-primary-strong) 24%, transparent); background:rgba(255,255,255,.35); } .user-home .user-head-flex{display:flex;align-items:center;gap:14px} .user-home .user-head-main{display:flex;align-items:center;gap:12px;min-width:0} .user-home .user-head-meta{color:#fff;min-width:0} .user-home .user-greet{ font-size:16px; font-weight:700; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .user-home .user-greet .user-name{font-weight:800} .user-home .table{margin:0} .user-home .table>tbody>tr>th, .user-home .table>tbody>tr>td{border-color:var(--tc-border);vertical-align:middle} .user-home .list-group-item{border-color:var(--tc-border);background:rgba(255,255,255,.6)} .user-home .list-group-item b{color:var(--tc-primary-strong)} .user-home .btn{border:0;border-radius:12px;font-weight:700} .user-home .btn.btn-xs{border-radius:10px;font-weight:700} .user-home .btn.btn-block{min-height:52px} .user-home .btn-primary{background:var(--tc-grad-main)} .user-home .btn-success{background:var(--tc-grad-main)} .user-home .btn-info{background:var(--tc-grad-main)} .user-home .btn-warning{background:var(--tc-grad-soft);color:var(--tc-primary-strong)} .user-home .btn-danger{background:var(--tc-grad-main)} .user-home .btn-default{background:var(--tc-grad-main);color:#fff} .user-home .user-balance{font-size:22px;font-weight:800;margin:6px 0 0;opacity:.98;line-height:1.2} .user-home .user-head-actions{display:flex;gap:10px;margin-top:10px} .user-home .user-head-actions .btn{ min-width:104px; min-height:58px; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:14px; padding:8px 12px; line-height:1.2; box-shadow:0 10px 20px rgba(50,24,108,.22); } .user-home .user-head-actions .btn i{font-size:15px;margin-bottom:4px} .user-home .user-head-actions .btn b{display:block;font-size:13px} .user-home .user-head-actions .btn span{display:block;font-size:11px;opacity:.92;margin-top:2px} .user-home .user-stat th font[color="#a9a9a9"]{color:rgba(255,255,255,.86) !important} .user-home .user-stat th font[size="4"]{color:#fff} .user-home .user-stat{background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,.04))} .user-home .user-quick td{padding:10px} .user-home .user-quick .btn i{font-size:18px} .user-home .user-quick .btn b{display:block;margin-top:6px;font-size:14px} .user-home .user-section{margin-bottom:16px} .user-home .user-stack{display:flex;flex-direction:column;gap:16px} .user-home .bind-tip-card{ border-radius:14px; padding:14px 16px; border:1px solid var(--tc-border); background:linear-gradient(120deg,rgba(255,255,255,.98),color-mix(in srgb, var(--tc-primary-soft) 45%, #fff)); box-shadow:0 10px 24px color-mix(in srgb, var(--tc-primary-strong) 12%, transparent); display:flex; align-items:center; justify-content:space-between; gap:12px; } .user-home .bind-tip-main{display:flex;align-items:center;gap:10px;min-width:0} .user-home .bind-tip-icon{ width:38px;height:38px;border-radius:12px; display:flex;align-items:center;justify-content:center; color:#fff; background:var(--tc-grad-main); box-shadow:0 8px 16px color-mix(in srgb, var(--tc-primary-strong) 24%, transparent); } .user-home .bind-tip-title{font-size:15px;font-weight:800;color:var(--tc-primary-strong)} .user-home .bind-tip-sub{font-size:12px;color:var(--tc-muted)} /* index.php important alert follows theme palette */ .user-home .alert.alert-danger{ border-color: color-mix(in srgb, var(--tc-primary) 45%, #fff) !important; background: color-mix(in srgb, var(--tc-primary-soft) 52%, #fff) !important; color: var(--tc-text) !important; } .user-home .alert.alert-danger a{ color: var(--tc-primary-strong) !important; font-weight:700; } .user-home .alert.alert-danger .btn-sm.btn-danger{ border:0 !important; background: var(--tc-grad-main) !important; color:#fff !important; } .user-home .hero-card{ --hero-right-col:clamp(168px,32%,260px); border-radius:20px; padding:clamp(12px,1.2vw,16px); color:#fff; background: var(--tc-grad-main); box-shadow:0 16px 34px color-mix(in srgb, var(--tc-primary-strong) 24%, transparent); position:relative; overflow:hidden; } /* clarity: improve text readability on gradients */ .user-home .hero-card, .user-home .hero-card *{ color:#fff !important; text-shadow: 0 2px 8px rgba(0,0,0,.32); } .user-home .hero-shell{width:100%} .user-home .hero-quick-row{display:flex;align-items:stretch;gap:clamp(10px,1.2vw,16px)} .user-home .hero-quick-col{flex:1;min-width:0;display:flex;flex-direction:column} .user-home .hero-shell, .user-home .quick-panel{flex:1} @media (max-width:992px){ .user-home .hero-quick-row{flex-direction:column} .user-home .hero-quick-col{width:100%} } .user-home .hero-card:before{ content:""; position:absolute; left:-80px; bottom:-90px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.12); } .user-home .hero-top{display:flex;justify-content:space-between;gap:clamp(8px,1vw,14px);align-items:flex-start;position:relative;z-index:1} .user-home .hero-user{display:flex;align-items:center;gap:12px;min-width:0} .user-home .hero-user img{ width:clamp(48px,3.2vw,56px);height:clamp(48px,3.2vw,56px);border-radius:16px; border:3px solid rgba(255,255,255,.8); box-shadow:0 10px 20px rgba(0,0,0,.16); object-fit:cover; } .user-home .hero-greet{font-size:clamp(24px,2.2vw,32px);font-weight:900;line-height:1.1;color:#fff;letter-spacing:.2px} .user-home .hero-badges{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap} .user-home .hero-badges-sub{margin-top:4px} .user-home .hero-badge{border-radius:999px;padding:3px 10px;font-size:clamp(11px,.85vw,12px);background:rgba(255,255,255,.22);color:#fff;font-weight:700} .user-home .hero-badge{ background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.38); color:#fff !important; text-shadow:0 1px 3px rgba(0,0,0,.35); } .user-home .hero-side{ width:min(100%,var(--hero-right-col)); min-width:0; max-width:var(--hero-right-col); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .user-home .hero-side.hero-side-single{grid-template-columns:1fr} .user-home .hero-side.hero-side-single a{width:100%;justify-self:stretch} .user-home .hero-side a{ border-radius:14px; padding:10px 8px; color:#fff; background:rgba(0,0,0,.28); text-align:center; font-weight:700; display:block; box-shadow:0 12px 18px rgba(33,14,95,.16); } .user-home .hero-side a i{ font-size:15px; margin-bottom:6px; width:24px;height:24px;line-height:24px; border-radius:999px; background:rgba(255,255,255,.24); } .user-home .hero-stats{ margin-top:12px; display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,32%); gap:10px; position:relative; z-index:1; } .user-home .hero-stat{border-radius:16px;padding:12px 12px;background:linear-gradient(120deg,rgba(255,255,255,.24),rgba(255,255,255,.14))} .user-home .hero-stat{ background:rgba(0,0,0,.46) !important; border:1px solid rgba(255,255,255,.34); } .user-home .hero-stat .label{padding:0;background:none;color:rgba(255,255,255,.9);font-size:12px} .user-home .hero-stat .value{margin-top:4px;font-size:34px;font-weight:900;line-height:1;color:#fff;white-space:nowrap} .user-home .hero-stat .value a{color:#fff;text-decoration:none} .user-home .hero-stat .label, .user-home .hero-stat .value, .user-home .hero-stat .value a{ color:#fff !important; text-shadow:0 2px 6px rgba(0,0,0,.35); } .user-home .hero-stat.self-order-stat, body.tc-theme-root .user-home .hero-stat.self-order-stat{ padding:0; overflow:hidden; background:transparent !important; background-image:none !important; border:0 !important; box-shadow:none !important; } .user-home .hero-stat.self-order-stat a{ display:flex; align-items:center; justify-content:center; min-height:62px; width:100%; max-width:none; margin:0 auto; color:#fff; text-decoration:none; border-radius:999px; font-size:clamp(16px,1.25vw,20px); font-weight:900; white-space:nowrap; letter-spacing:.4px; background:var(--tc-grad-main); box-shadow:0 14px 26px color-mix(in srgb, var(--tc-primary-strong) 28%, transparent); } .user-home .hero-stat.self-order-stat a i{margin-right:10px;font-size:16px} .user-home .balance-stat{display:flex;flex-direction:column;gap:10px} .user-home .balance-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .user-home .balance-actions a{ display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:14px;color:#fff;text-decoration:none;font-weight:900; background:linear-gradient(120deg,rgba(255,255,255,.22),rgba(255,255,255,.12)); box-shadow:0 12px 18px rgba(33,14,95,.16); } .user-home .balance-actions a i{margin-right:8px} .user-home .balance-actions a.is-disabled{opacity:.45;pointer-events:none} .user-home .hero-entry{margin-top:16px;position:relative;z-index:1} .user-home .hero-entry .btn{ border-radius:14px;min-height:56px;font-size:30px;font-weight:900; background:var(--tc-grad-main) !important;border:0; box-shadow:0 14px 26px color-mix(in srgb, var(--tc-primary-strong) 28%, transparent); } .user-home .quick-title{font-size:clamp(28px,2vw,33px);font-weight:900;color:var(--tc-primary-strong);margin:4px 2px 12px} .user-home .quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px} .user-home .quick-item{ background:rgba(255,255,255,.98); border:1px solid var(--tc-border); border-radius:16px; padding:14px 14px; box-shadow:0 12px 24px rgba(46,24,108,.12); display:block; position:relative; z-index:6; pointer-events:auto !important; } .user-home .quick-item .title{font-size:17px;font-weight:900;color:var(--tc-primary-strong);display:flex;align-items:center;gap:8px} .user-home .quick-item .title i{ width:30px;height:30px;line-height:30px;text-align:center; border-radius:999px;color:#fff; background:var(--tc-grad-main); box-shadow:0 8px 16px rgba(94,53,214,.2); } .user-home .quick-item .sub{font-size:13px;color:var(--tc-muted);margin-top:7px} /* order detail popup */ .user-theme-violet .order-layer-wrap{ padding:10px; background:linear-gradient(135deg,color-mix(in srgb, var(--tc-primary-soft) 22%, #fff) 0%,#f8fbff 100%); border-radius:12px; border:1px solid color-mix(in srgb, var(--tc-primary) 30%, #d9e6fb); } .user-theme-violet #orderItem{ margin:0; background:#fff; border:1px solid color-mix(in srgb, var(--tc-primary) 38%, #d5e2f8); border-radius:12px; overflow:hidden; box-shadow:0 10px 22px color-mix(in srgb, var(--tc-primary-strong) 12%, transparent); } .user-theme-violet #orderItem > tbody > tr > td{ padding:10px 12px; border-top:1px solid color-mix(in srgb, var(--tc-primary) 22%, #dbe7fb); vertical-align:middle; font-size:13px; color:var(--tc-text); } .user-theme-violet #orderItem > tbody > tr:first-child > td{border-top:0;} .user-theme-violet #orderItem td.info.orderTitle{ width:118px; font-weight:700; color:var(--tc-primary-strong); background:color-mix(in srgb, var(--tc-primary-soft) 30%, #fff); } .user-theme-violet #orderItem td.orderContent{color:var(--tc-text);} .user-theme-violet #orderItem td[colspan="6"].orderTitle{ font-size:16px; font-weight:800; color:var(--tc-primary-strong); letter-spacing:0; background:linear-gradient(90deg,color-mix(in srgb, var(--tc-primary) 18%, #fff) 0%,#f8fbff 100%); border-bottom:1px solid color-mix(in srgb, var(--tc-primary) 24%, #dbe7fb); } .user-theme-violet #orderItem > tbody > tr:hover > td{ background:color-mix(in srgb, var(--tc-primary-soft) 14%, #fff); } .user-theme-violet #orderItem td[colspan="6"].orderContent{ line-height:1.75; } .user-theme-violet #orderItem .btn.btn-xs{ border-radius:999px; padding:4px 11px; } .user-theme-violet #orderItem .label{ border-radius:999px; padding:3px 8px; } .user-theme-violet .layui-layer.order-detail-layer{ border:1px solid color-mix(in srgb, var(--tc-primary-strong) 30%, #e9d7c8) !important; border-radius:10px !important; overflow:hidden; } .user-theme-violet .layui-layer.order-detail-layer .layui-layer-title{ background:linear-gradient(90deg,color-mix(in srgb, var(--tc-primary-strong) 13%, #fff) 0%,#fffaf6 100%) !important; color:var(--tc-primary-strong) !important; border-bottom:1px solid color-mix(in srgb, var(--tc-primary-strong) 24%, #efe2d6) !important; font-weight:700; } .user-theme-violet .layui-layer.order-detail-layer .layui-layer-setwin .layui-layer-close1{ color:var(--tc-primary-strong) !important; } .user-theme-violet .layui-layer.order-detail-layer .table-responsive{ background:linear-gradient(180deg,#fff 0%,color-mix(in srgb, var(--tc-primary-strong) 6%, #fff) 100%); padding:0 0 8px 0; border-radius:0 0 10px 10px; } .user-theme-violet .layui-layer.order-detail-layer .table{ background:transparent; margin-bottom:0; } .user-theme-violet .layui-layer.order-detail-layer .table>thead>tr>th{ background:color-mix(in srgb, var(--tc-primary-strong) 10%, #fff); border-color:color-mix(in srgb, var(--tc-primary-strong) 18%, #efe2d6); } .user-theme-violet .layui-layer.order-detail-layer .table>tbody>tr>td{ border-color:color-mix(in srgb, var(--tc-primary-strong) 14%, #efe2d6); } /* shopm 重复下单确认弹窗：标题与按钮跟随主题色 */ .user-theme-violet .layui-layer.shopm-dup-confirm .layui-layer-content{ padding:18px 16px 12px !important; line-height:1.65; color:var(--tc-text); } .user-theme-violet .layui-layer.shopm-dup-confirm .layui-layer-btn{ padding:12px 15px 16px !important; text-align:right !important; border-top:1px solid color-mix(in srgb, var(--tc-primary-strong) 18%, #efe2d6) !important; background:linear-gradient(180deg,#fff 0%,color-mix(in srgb, var(--tc-primary-soft) 35%, #fff) 100%) !important; } .user-theme-violet .layui-layer.shopm-dup-confirm .layui-layer-btn a{ border-radius:12px !important; font-weight:700 !important; padding:8px 18px !important; height:auto !important; line-height:1.35 !important; } .user-theme-violet .layui-layer.shopm-dup-confirm .layui-layer-btn0{ border:0 !important; background:var(--tc-grad-main) !important; color:#fff !important; box-shadow:0 6px 14px color-mix(in srgb, var(--tc-primary-strong) 22%, transparent); } .user-theme-violet .layui-layer.shopm-dup-confirm .layui-layer-btn1{ background:#fff !important; border:1px solid color-mix(in srgb, var(--tc-primary-strong) 38%, #ddd) !important; color:var(--tc-primary-strong) !important; margin-left:10px !important; } .user-theme-violet .layui-layer.shopm-dup-confirm .layui-layer-btn1:hover{ border-color:var(--tc-primary) !important; color:var(--tc-primary) !important; } @media (max-width:768px){ .user-theme-violet .order-layer-wrap{padding:8px;border-radius:10px;} .user-theme-violet #orderItem > tbody > tr > td{padding:9px 8px;font-size:12px;} .user-theme-violet #orderItem td.info.orderTitle{width:92px;} .user-theme-violet #orderItem td[colspan="6"].orderTitle{font-size:15px;} } .user-home .no-site-item{text-align:center;font-weight:700} .user-home .no-site-open-btn{ display:inline-block;min-width:180px;width:auto;margin:10px auto 0;padding:8px 18px;border-radius:999px;font-size:13px;line-height:1.2; } @media (min-width:992px){ .user-home{ width:100%; max-width:1320px; box-sizing:border-box; margin-left:auto; margin-right:auto; } } @media (min-width:900px) and (max-width:1050px){ .user-home .hero-quick-row{ flex-direction:column; gap:12px; } .user-home .hero-quick-col{ width:100%; } .user-home .hero-card{ --hero-right-col:clamp(160px,26vw,210px); padding:14px; } .user-home .hero-stats{ gap:8px; } .user-home .quick-grid{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; } .user-home .quick-item{ padding:12px; } } @media (max-width:768px){ .user-home{padding-left:8px;padding-right:8px} .user-home .row{margin-left:-4px;margin-right:-4px} .user-home .row>[class*="col-"]{padding-left:4px;padding-right:4px} .user-home .btn.btn-block{min-height:50px} .user-home .user-quick td{padding:8px} .user-home .user-quick .btn b{font-size:15px} .user-home .panel-heading.user-panel-head{padding:14px 14px} .user-home .user-section{margin-bottom:12px} .user-home .user-head-flex{align-items:flex-start;gap:12px} .user-home .user-head-actions .btn{min-height:50px} .user-home .no-site-open-btn{min-width:160px;padding:8px 14px} .user-home .hero-top{flex-direction:column} .user-home .hero-card{--hero-right-col:100%} .user-home .hero-side{min-width:0;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))} .user-home .hero-greet{font-size:28px} .user-home .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .user-home .hero-stat .value{font-size:30px} .user-home .hero-stat.self-order-stat a{min-height:56px;font-size:18px;width:100%;max-width:none} .user-home .hero-stat.self-order-stat a i{font-size:16px} .user-home .hero-entry .btn{font-size:24px;min-height:50px} .user-home .quick-title{font-size:28px} .user-home .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:390px){ .user-home .user-quick .btn b{font-size:14px} .user-home .user-balance{font-size:19px} .user-home .hero-greet{font-size:27px} .user-home .hero-stat.self-order-stat a{min-height:54px;font-size:18px;width:100%} .user-home .hero-entry .btn{font-size:20px} .user-home .hero-stats{grid-template-columns:1fr} .user-home .quick-grid{grid-template-columns:1fr} } /* ===== user-login.css ===== */ html,body{ min-height:100%; } body{ background: var(--tc-page-bg); background-attachment: fixed; background-repeat:no-repeat; background-size:cover; color:var(--tc-text); } .full-bg{display:none !important;} /* theme customizer UI is allowed when enabled */ /* Force page titles (login/reg/findpwd/regsite) to follow theme color, and override any legacy/global CSS that paints / red. */ .login-card .block-title h2, .login-card .block-title h2 * , .auth-card .block-title h2, .auth-card .block-title h2 * , .site-card .block-title h2, .site-card .block-title h2 * { color: var(--tc-primary-strong) !important; } .login-card .block-title h2 i, .auth-card .block-title h2 i, .site-card .block-title h2 i{ color: var(--tc-primary-strong) !important; } .login-wrap{margin-top:34px} .login-wrap-inner{ max-width:500px; margin:0 auto; position:relative; } .login-wrap-inner:before{ content:""; position:absolute; left:-24px; right:-24px; top:-24px; bottom:-24px; z-index:0; border-radius:30px; pointer-events:none; background: transparent; } .login-card.widget{ position:relative; z-index:1; border:1px solid var(--tc-border); border-radius:18px; overflow:hidden; box-shadow:0 14px 28px color-mix(in srgb, var(--tc-primary) 20%, transparent); background:rgba(255,255,255,.92); backdrop-filter: blur(8px); margin-bottom:0; } .login-head{ background: var(--tc-grad-soft) !important; padding:22px 0 18px; } .login-head img{ border:3px solid rgba(255,255,255,.72); box-shadow:0 8px 16px color-mix(in srgb, var(--tc-primary) 28%, transparent); } .login-card .block{padding:22px 20px 6px} .login-card .block-title{border-bottom:1px solid var(--tc-border);padding-bottom:12px;margin-bottom:18px} .login-card .block-title .title-row{display:block} .login-card .block-title .back-home-btn{float:right} .login-card .block-title h2{font-size:24px;color:var(--tc-primary-strong) !important;line-height:1.2;margin:0} .login-card .block-title h2 i, .login-card .block-title h2 b, .login-card .block-title h2 span{ color:var(--tc-primary-strong) !important; } .login-card .block-title .back-home-btn{ padding:6px 12px; font-size:13px; border:0; border-radius:10px; color:#fff; background:var(--tc-grad-main); white-space:nowrap; } .login-card form{margin-bottom:0} .login-card form .form-group:last-child{margin-bottom:0} .login-card hr{margin:14px 0} .login-card .login-bottom-actions{margin-bottom:0} .login-card .block-options .btn{ padding:6px 12px; font-size:13px; border-radius:8px; border:0; color:#fff; background:var(--tc-grad-main); } .login-card .input-group-addon{ color:#fff;border-color:var(--tc-border); background:var(--tc-grad-main); } .login-card .form-control{ border-color:var(--tc-border); height:44px; border-radius:10px; font-size:15px; } .login-tabs{ display:flex; gap:8px; padding:5px; border-radius:13px; background:color-mix(in srgb, var(--tc-primary-soft) 45%, #fff); border:1px solid var(--tc-border); margin-bottom:18px; } .login-tab-btn{ flex:1; height:46px; border:0; border-radius:10px; font-size:17px; font-weight:600; color:color-mix(in srgb, var(--tc-text) 70%, #fff); background:transparent; transition:all .18s ease; } .login-tab-btn.active{ color:#fff !important; background:var(--tc-grad-main) !important; box-shadow:0 7px 14px color-mix(in srgb, var(--tc-primary) 28%, transparent); } .login-tab-btn:hover{ color:var(--tc-text); background:color-mix(in srgb, var(--tc-primary-soft) 35%, #fff); } .login-panel{display:none} .login-panel.active{display:block} .login-card .form-control:focus{ border-color:var(--tc-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--tc-primary) 18%, transparent); } .login-card .input-group-btn .btn{ height:44px; border-color:var(--tc-border); color:#fff; background:var(--tc-grad-main); } #submit_login{ height:46px; font-size:16px; border:0; border-radius:12px; background:var(--tc-grad-main); } #submit_login_email_code{ height:46px; font-size:16px; border:0; border-radius:12px; color:#fff; background:var(--tc-grad-main); box-shadow:0 10px 20px color-mix(in srgb, var(--tc-primary) 24%, transparent); } #submit_login_email_code:hover, #submit_login_email_code:focus{ color:#fff; background:var(--tc-grad-main); } .login-card .btn-info.btn-rounded, .login-card .btn-danger.btn-rounded{ border:0; background:var(--tc-grad-main); color:#fff !important; } /* === User pages: keep button text always white === Some bootstrap variants may set text color based on theme/utility classes. For /user/* we want button labels/icons fixed to white, not following theme. */ .login-card .btn, .auth-card .btn, .site-card .btn, .cfxzs-shell .btn, .shops-shell .btn, .shops-shell .shops-action-btn, .cfxzs-shell .shops-action-btn{ color:#fff !important; } .login-card .btn i, .auth-card .btn i, .site-card .btn i, .cfxzs-shell .btn i, .shops-shell .btn i, .login-card .btn .fa, .auth-card .btn .fa, .site-card .btn .fa{ color:#fff !important; } .login-card .btn *, .auth-card .btn *, .site-card .btn *, .cfxzs-shell .btn *, .shops-shell .btn *{ color:#fff !important; } .social-login-actions{ display:flex; gap:10px; margin:4px 0 0; padding-bottom:14px; border-bottom:1px solid var(--tc-border); } .social-login-actions .social-btn{ flex:1; height:36px; line-height:36px; padding:0 10px; border:0; border-radius:999px; color:#fff; font-size:14px; text-decoration:none; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 8px 16px color-mix(in srgb, var(--tc-primary) 20%, transparent); } .social-login-actions .social-btn i{margin-right:6px} .social-login-actions .social-btn-qq{ background:var(--tc-grad-main); } .social-login-actions .social-btn-wx{ background:var(--tc-grad-main); } .login-bottom-actions{ display:flex; gap:10px; margin-top:14px; } .login-bottom-actions .btn{flex:1;text-align:center} .login-field-label{ display:block; margin:2px 0 8px; font-size:18px; color:var(--tc-text); font-weight:600; } @media (max-width: 480px){ .login-wrap{margin-top:12px} .login-card .block{padding:16px 14px 4px} .login-card .block-title h2{font-size:24px} .login-bottom-actions{flex-direction:column} .social-login-actions{flex-direction:column} .social-login-actions{padding-bottom:10px} .login-bottom-actions{margin-top:10px} } @media (max-width: 768px){ .login-wrap{padding-left:8px;padding-right:8px} .login-wrap-inner{max-width:100%} .login-wrap-inner:before{left:-10px;right:-10px;top:-10px;bottom:-10px;border-radius:20px} .login-card .block-title .title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap} .login-card .block-title .back-home-btn{float:none} .login-card .block-title h2{font-size:26px} .login-card .form-control{height:46px;font-size:16px} .login-tab-btn{font-size:16px;height:44px} .login-field-label{font-size:16px} #submit_login{height:48px;font-size:17px} #submit_login_email_code{height:48px;font-size:17px} .login-bottom-actions .btn{font-size:16px;line-height:1.25} } @media (max-width: 390px){ .login-card .block{padding:14px 12px 4px} .login-card .block-title h2{font-size:24px} .login-card .form-control{height:42px;font-size:15px} #submit_login{height:44px;font-size:16px} #submit_login_email_code{height:44px;font-size:16px} } @media (max-width: 375px){ .login-card .block-title h2{font-size:20px} .login-card .block-options .btn{font-size:12px;padding:5px 10px} } /* ===== user-reg.css ===== */ .auth-wrap{margin-top:34px} .auth-wrap-inner{max-width:500px;margin:0 auto} .auth-card.widget{border:1px solid var(--tc-border);border-radius:18px;overflow:hidden;box-shadow:0 18px 35px color-mix(in srgb, var(--tc-primary-strong) 20%, transparent);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);margin-bottom:0} .auth-head{background:var(--tc-grad-soft)!important;padding:22px 0 18px} .auth-head img{border:3px solid rgba(255,255,255,.72);box-shadow:0 8px 16px color-mix(in srgb, var(--tc-primary-strong) 28%, transparent)} .auth-card .block{padding:22px 20px 6px} .auth-card .block-title{border-bottom:1px solid var(--tc-border);padding-bottom:12px;margin-bottom:18px} .auth-card .block-title .title-row{display:block} .auth-card .block-title .back-home-btn{float:right} .auth-card .block-title h2{font-size:22px;color:var(--tc-primary-strong) !important;margin:0} .auth-card .block-title h2 i, .auth-card .block-title h2 b, .auth-card .block-title h2 span{color:var(--tc-primary-strong) !important} .auth-card .block-title .back-home-btn{ padding:6px 12px; font-size:13px; border:0; border-radius:10px; color:#fff; background:var(--tc-grad-main); white-space:nowrap; } .auth-card form{margin-bottom:0} .auth-card form .form-group:last-child{margin-bottom:0} .auth-card hr{margin:14px 0} .auth-card .auth-bottom-actions{margin-bottom:0} .auth-card .block-options .btn{padding:6px 12px;font-size:13px;border:0;color:#fff;border-radius:8px;background:var(--tc-grad-main)} .auth-card .input-group-addon{color:#fff;border-color:var(--tc-primary);background:var(--tc-grad-main)} .auth-card .form-control{border-color:var(--tc-border);height:44px;border-radius:10px;font-size:15px} .auth-card .form-control:focus{border-color:var(--tc-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--tc-primary) 18%, transparent)} #submit_reg{height:46px;font-size:16px;border:0;border-radius:12px;background:var(--tc-grad-main)} #submit_reg:disabled{opacity:.45;filter:saturate(.7);cursor:not-allowed;box-shadow:none} .auth-consent{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--tc-border);border-radius:12px;background:color-mix(in srgb, var(--tc-primary-soft) 45%, #fff)} .auth-consent input[type="checkbox"]{margin-top:3px;transform:scale(1.05)} .auth-consent .consent-text{font-size:14px;line-height:1.45;color:var(--tc-muted)} .auth-consent .consent-text a{color:var(--tc-primary);font-weight:700;text-decoration:none} .auth-consent .consent-text a:hover{text-decoration:underline} .auth-card .btn-info.btn-rounded{border:0;background:var(--tc-grad-main)} .auth-card .btn-primary.btn-rounded{border:0;background:var(--tc-grad-main)} .auth-bottom-actions{display:flex;gap:10px} .auth-bottom-actions .btn{flex:1;text-align:center} @media (max-width:480px){.auth-wrap{margin-top:12px}.auth-card .block{padding:16px 14px 4px}.auth-bottom-actions{flex-direction:column}} @media (max-width:768px){.auth-wrap{padding-left:8px;padding-right:8px}.auth-wrap-inner{max-width:100%}.auth-card .block-title .title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}.auth-card .block-title .back-home-btn{float:none}.auth-card .block-title h2{font-size:24px}.auth-card .form-control{height:46px;font-size:16px}#submit_reg{height:48px;font-size:17px}.auth-bottom-actions .btn{font-size:16px;line-height:1.25}} @media (max-width:390px){.auth-card .block{padding:14px 12px 4px}.auth-card .block-title h2{font-size:22px}.auth-card .form-control{height:42px;font-size:15px}#submit_reg{height:44px;font-size:16px}} @media (max-width:375px){.auth-card .block-options .btn{font-size:12px;padding:5px 10px}} /* ===== user-findpwd.css ===== */ .auth-card{border:1px solid var(--tc-border);border-radius:18px;overflow:hidden;box-shadow:0 18px 35px color-mix(in srgb, var(--tc-primary-strong) 20%, transparent);background:rgba(255,255,255,.92);backdrop-filter:blur(8px)} .auth-card .list-group-item-info{background:color-mix(in srgb, var(--tc-primary-soft) 45%, #fff);border-color:var(--tc-border);color:var(--tc-primary-strong)} .auth-card .list-group-item{border-color:var(--tc-border)} .auth-card .btn-warning{border:0;background:var(--tc-grad-main)} .auth-card .btn-success{border:0;background:var(--tc-grad-main)} .auth-card .btn-danger.btn-rounded{border:0;background:var(--tc-grad-main)} @media (max-width:768px){.auth-card .list-group-item{font-size:15px}} @media (max-width:390px){.auth-card .list-group-item{font-size:14px}} /* ===== user-regsite.css ===== */ .site-wrap{margin-top:30px} .site-wrap-inner{max-width:560px;margin:0 auto} .site-card.widget{border:1px solid var(--tc-border);border-radius:18px;overflow:hidden;box-shadow:0 18px 35px color-mix(in srgb, var(--tc-primary-strong) 20%, transparent);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);margin-bottom:0} .site-head{background:var(--tc-grad-soft)!important;padding:22px 0 18px} .site-head img{border:3px solid rgba(255,255,255,.72);box-shadow:0 8px 16px color-mix(in srgb, var(--tc-primary-strong) 28%, transparent)} .site-card .block{padding:22px 20px 6px} .site-card .block-title{border-bottom:1px solid var(--tc-border);padding-bottom:12px;margin-bottom:18px} .site-card .block-title .title-row{display:block} .site-card .block-title .back-home-btn{float:right} .site-card .block-title h2{font-size:22px;color:var(--tc-primary-strong) !important;margin:0} .site-card .block-title h2 i, .site-card .block-title h2 b, .site-card .block-title h2 span{color:var(--tc-primary-strong) !important} .site-card .block-title .back-home-btn{ padding:6px 12px; font-size:13px; border:0; border-radius:10px; color:#fff; background:var(--tc-grad-main); white-space:nowrap; } .site-card form{margin-bottom:0} .site-card form .form-group:last-child{margin-bottom:0} .site-card hr{margin:14px 0} .site-card .site-bottom-actions{margin-bottom:0} .site-card .block-options .btn{padding:6px 12px;font-size:13px;border:0;color:#fff;border-radius:8px;background:var(--tc-grad-main)} .site-card .input-group-addon{color:#fff;border-color:var(--tc-primary);background:var(--tc-grad-main)} .site-card .form-control{border-color:var(--tc-border);height:44px;border-radius:10px;font-size:15px} .site-card .form-control:focus{border-color:var(--tc-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--tc-primary) 18%, transparent)} #submit_buy{height:46px;font-size:16px;border:0;border-radius:12px;background:var(--tc-grad-main)} .site-card .btn-info{border:0;background:var(--tc-grad-main)} .site-card .btn-primary.btn-rounded{border:0;background:var(--tc-grad-main)} .site-card .btn-default{border:0;color:#fff;background:var(--tc-grad-main)} .site-bottom-actions{display:flex;gap:10px} .site-bottom-actions .btn{flex:1;text-align:center} .modal-content{border:1px solid var(--tc-border);border-radius:16px;overflow:hidden} .modal-header{background:var(--tc-grad-main);color:#fff;border:0} .modal-title,.modal-header .close{color:#fff} @media (max-width:480px){.site-wrap{margin-top:12px}.site-card .block{padding:16px 14px 4px}.site-bottom-actions{flex-direction:column}} @media (max-width:768px){.site-wrap{padding-left:8px;padding-right:8px}.site-wrap-inner{max-width:100%}.site-card .block-title .title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}.site-card .block-title .back-home-btn{float:none}.site-card .row .col-xs-6{padding-left:6px;padding-right:6px}.site-card .block-title h2{font-size:24px}.site-card .form-control{height:46px;font-size:16px}#submit_buy{height:48px;font-size:17px}.site-bottom-actions .btn{font-size:16px;line-height:1.25}} @media (max-width:390px){.site-card .block{padding:14px 12px 4px}.site-card .block-title h2{font-size:22px}.site-card .form-control{height:42px;font-size:15px}#submit_buy{height:44px;font-size:16px}} @media (max-width:375px){.site-card .block-options .btn{font-size:12px;padding:5px 10px}.site-card .row .col-xs-6{padding-left:4px;padding-right:4px}} /* ===== user-shopsm.css ===== */ .cfxzs-shell{ width:60%; margin:0 auto; } .cfxzs-panel{ border:1px solid var(--tc-border); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.92); backdrop-filter: blur(8px); box-shadow:0 18px 35px color-mix(in srgb, var(--tc-primary-strong) 16%, transparent); min-height:640px; } .cfxzs-head{ position: relative; border:0; background:var(--tc-grad-main) !important; color:#fff !important; padding:14px 16px; font-weight:800; letter-spacing:.2px; text-shadow:0 2px 6px rgba(0,0,0,.28); /* add a themed bottom accent line for better contrast */ border-bottom: 3px solid color-mix(in srgb, var(--tc-primary-strong) 78%, #fff) !important; box-shadow: inset 0 -1px 0 rgba(255,255,255,.18); } .cfxzs-head:after{ content:none; } .cfxzs-head .cfxzs-title-badge{ display:inline-block; padding:4px 12px; border-radius:999px; background: color-mix(in srgb, var(--tc-primary-strong) 70%, #fff); box-shadow:0 4px 10px rgba(0,0,0,.18); color:#fff !important; text-shadow:0 2px 6px rgba(0,0,0,.28); } .result-head .cfxzs-title-badge{ display:inline-block; padding:3px 10px; border-radius:999px; background: color-mix(in srgb, var(--tc-primary-strong) 70%, #fff); box-shadow:0 3px 8px rgba(0,0,0,.16); color:#fff !important; text-shadow:0 1px 3px rgba(0,0,0,.25); } .cfxzs-head .pull-right{ opacity:1; font-size:inherit; font-weight:800; color:#fff !important; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:3px 10px; border-radius:999px; background:color-mix(in srgb, #fff 16%, transparent); border:1px solid color-mix(in srgb, #fff 34%, transparent); box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent); line-height:1.05; min-height:30px; margin-top:-1px; } .cfxzs-head .pull-right #user_balance_text{ font-size:inherit; font-weight:900; letter-spacing:0; color:#fff !important; text-shadow:0 2px 6px rgba(0,0,0,.24); } @media (max-width: 767px){ .cfxzs-head .pull-right{ padding:2px 8px; gap:4px; font-size:inherit; min-height:26px; } .cfxzs-head .pull-right #user_balance_text{ font-size:inherit; } } .cfxzs-head .balance-flash{ display:inline-block; animation:balanceFlash 1s ease; } @keyframes balanceFlash{ 0%{transform:scale(1);text-shadow:0 0 0 rgba(255,255,255,0)} 25%{transform:scale(1.08);text-shadow:0 0 12px rgba(255,255,255,.85)} 60%{transform:scale(1.03);text-shadow:0 0 8px rgba(255,255,255,.55)} 100%{transform:scale(1);text-shadow:0 0 0 rgba(255,255,255,0)} } .cfxzs-body{padding:18px 14px 24px} .cfxzs-row{display:flex;gap:12px;align-items:stretch} .cfxzs-main{flex:1;min-width:0;display:flex;flex-direction:column} .cfxzs-side{width:132px;flex:0 0 132px} .cfxzs-side .btn{ width:100%; border:0; border-radius:12px; font-weight:800; margin-bottom:8px; min-height:40px; padding:10px 8px; line-height:1.2; background:var(--tc-grad-main); color:#fff; box-shadow:0 10px 18px color-mix(in srgb, var(--tc-primary-strong) 20%, transparent); } .cfxzs-side .btn.btn-light{ background:linear-gradient(120deg,color-mix(in srgb, var(--tc-primary-soft) 34%, #fff),color-mix(in srgb, var(--tc-primary) 14%, #fff)); color:var(--tc-primary-strong); box-shadow:none; border:1px solid var(--tc-border); } .cfxzs-side .btn:last-child{margin-bottom:0} .cfxzs-custom-num{ margin-top:6px; display:flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--tc-primary-soft) 35%, #fff); border:1px solid var(--tc-border); border-radius:12px; padding:4px; } .cfxzs-custom-num .btn{ width:32px; min-width:32px; height:32px; line-height:32px; padding:0; margin:0; border-radius:8px; font-size:18px; font-weight:900; box-shadow:none; } .cfxzs-custom-num input{ flex:1; min-width:0; text-align:center; height:32px; border:1px solid var(--tc-border); border-radius:8px; font-weight:800; color:var(--tc-primary-strong); background:#fff; font-size:14px; padding:0 6px; } .cfxzs-custom-num .btn.btn-light{ border-color:var(--tc-border); background:var(--tc-grad-card); color:var(--tc-primary-strong); } .cfxzs-custom-num .btn.btn-light:hover, .cfxzs-custom-num .btn.btn-light:focus{ background:var(--tc-grad-card); color:var(--tc-primary-strong); } .cfxzs-body .input-group-addon{ color:#fff; border:0; background:var(--tc-grad-main); font-weight:800; } .cfxzs-body .form-control{ border-color:var(--tc-border); border-radius:12px; box-shadow:none; } .cfxzs-body .form-control:focus{ border-color:var(--tc-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--tc-primary) 18%, transparent); } #inputvalues{ border-radius:12px; min-height:34px; height:34px; font-size:14px; line-height:1.42857143; overflow-y:hidden; resize:none; } /* only cfxzs page hides these legacy blocks */ .cfxzs-shell #display_num,.cfxzs-shell #display_price,.cfxzs-shell #display_left{display:none !important;} .cfxzs-shell #alert_frame{display:none !important;} .cfxzs-result{ margin-top:10px; border:1px solid var(--tc-border); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.84); flex:1; display:flex; flex-direction:column; min-height:0; } .cfxzs-result .result-head{ padding:10px 12px; font-weight:900; color:#fff; background:var(--tc-grad-soft); } .cfxzs-result .table{margin:0} .cfxzs-result .table{ table-layout:fixed; width:100%; } .cfxzs-result .table>thead>tr>th, .cfxzs-result .table>tbody>tr>td{border-color:var(--tc-border);vertical-align:middle} .cfxzs-result .table>thead>tr>th{background:color-mix(in srgb, var(--tc-primary-soft) 45%, #fff);color:var(--tc-primary-strong)} .cfxzs-result .table>thead>tr>th{white-space:nowrap;} .cfxzs-result .table>tbody>tr>td{white-space:nowrap;} .cfxzs-result .table>tbody>tr>td:nth-child(3), .cfxzs-result .table>tbody>tr>td:nth-child(4){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cfxzs-result .table>tbody>tr>td:nth-child(6), .cfxzs-result .table>tbody>tr>td:nth-child(7), .cfxzs-result .table>tbody>tr>td:nth-child(8){ text-align:center; } .cfxzs-result .table-responsive{ flex:0 0 auto; min-height:0; max-height:280px; overflow-y:auto; overflow-x:hidden; } .cfxzs-result .table>thead>tr>th{ position:sticky; top:0; z-index:2; } .cfxzs-result .result-tools{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-top:1px solid var(--tc-border); margin-top:auto; } .cfxzs-result .result-tools .form-control{border-radius:12px} .cfxzs-result .result-tools .btn{ border:0;border-radius:12px;font-weight:900; background:var(--tc-grad-main); color:#fff; padding:9px 14px; } .cfxzs-result .result-tools .result-label{ font-weight:900; color:var(--tc-primary-strong); white-space:nowrap; } .cfxzs-result .result-tools .kw-input{min-width:260px;flex:1} .cfxzs-badge-ok{ display:inline-flex; align-items:center; justify-content:center; min-width:52px; white-space:nowrap; text-align:center; padding:2px 8px; border-radius:999px; background:rgba(39,194,76,.12); color:#169c36; font-weight:900; font-size:12px; line-height:1.2; } .cfxzs-badge-fail{ display:inline-flex; align-items:center; justify-content:center; min-width:64px; white-space:nowrap; text-align:center; padding:3px 10px; border-radius:999px; background:rgba(240,80,80,.12); color:#d83a3a; font-weight:900; line-height:1.3; } /* shops page beautify */ .shops-shell .onclick{cursor:pointer;touch-action:manipulation} .shops-top-grid{ display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:10px; align-items:start; } .shops-top-left .form-group:last-child{ margin-bottom:8px; } .shops-top-right{ display:flex; flex-direction:column; align-items:stretch; gap:6px; margin-top:0; } .shops-shell .shops-guide{ margin-bottom:0; color:var(--tc-primary-strong); font-weight:700; font-size:13px; line-height:1.5; max-width:52%; } .shops-guide-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; } .shops-entry-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:0; margin-bottom:8px; } .shops-entry-actions{ display:flex; align-items:center; gap:8px; } .shops-paste-btn{ margin-top:0; align-self:center; min-width:64px; padding:4px 12px; } .shops-action-btn{ border:0 !important; border-radius:999px; font-weight:800; color:#fff !important; background:var(--tc-grad-main) !important; box-shadow:0 8px 16px color-mix(in srgb, var(--tc-primary-strong) 22%, transparent); padding:6px 14px; min-width:70px; } .shops-action-btn:hover, .shops-action-btn:focus{ color:#fff !important; background:var(--tc-grad-main) !important; } .shops-buy-btn{ min-width:104px; padding:9px 22px; border-radius:999px; box-shadow:0 10px 20px color-mix(in srgb, var(--tc-primary-strong) 24%, transparent); } .shops-paste-format{ margin:0; color:var(--tc-primary-strong); line-height:1.32; font-size:11px; background:color-mix(in srgb, var(--tc-primary-soft) 28%, #fff); border:1px dashed color-mix(in srgb, var(--tc-primary) 42%, transparent); border-radius:10px; padding:5px 8px; width:100%; height:132px; overflow:hidden; position:relative; } .shops-paste-inline{ position:absolute; right:8px; bottom:7px; } .shops-shell #display_price .form-control{color:var(--tc-primary);font-weight:800;text-align:center} .shops-shell #inputvalues{ min-height:220px; height:220px; resize:both; overflow:auto; line-height:1.65; padding:12px 12px; } .shops-shell .form-control::placeholder, .cfxzs-shell .form-control::placeholder{ color: color-mix(in srgb, var(--tc-text) 58%, #fff) !important; opacity: 1 !important; } .shops-shell .form-control, .cfxzs-shell .form-control{ color: var(--tc-text) !important; } .shops-live-wrap{ border:1px solid var(--tc-border); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.9); margin:8px 0 10px; } .shops-live-head{ display:grid; grid-template-columns:1fr 100px 140px; gap:0; background:color-mix(in srgb, var(--tc-primary-soft) 55%, #fff); color:var(--tc-primary-strong); font-weight:900; box-sizing:border-box; padding-right:12px; } .shops-live-head span{ padding:10px 12px; border-right:1px solid var(--tc-border); } .shops-live-head span:nth-child(2), .shops-live-head span:nth-child(3){ text-align:center; } .shops-live-head span:last-child{border-right:0} .shops-live-body{ height:260px; overflow-y:scroll; overflow-x:auto; scrollbar-gutter:stable; } .shops-live-tools{ display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap; padding:8px 10px; border-bottom:1px solid var(--tc-border); background:rgba(255,255,255,.75); } .shops-live-summary{ margin-right:auto; font-size:13px; font-weight:800; color:var(--tc-primary-strong); } .shops-live-tools .btn{ border-radius:999px; padding:4px 10px; font-weight:700; } /* shops.php filter buttons colors */ .shops-live-tools #shops_show_all{ background: linear-gradient(120deg,#6fa8ff,#2f6bff,#1d4ed8) !important; border: 0 !important; color: #fff !important; } .shops-live-tools #shops_show_pending{ background: linear-gradient(120deg,#8b5cf6,#7c3aed,#6d28d9) !important; border: 0 !important; color: #fff !important; } .shops-live-tools #shops_show_ok{ background: linear-gradient(120deg,#57d88c,#22b24b,#169c3a) !important; border: 0 !important; color: #fff !important; } .shops-live-tools #shops_show_failed{ background: linear-gradient(120deg,#ff7a7a,#ef4444,#dc2626) !important; border: 0 !important; color: #fff !important; } .shops-live-tools #shops_show_cancel{ background: linear-gradient(120deg,#7b7b7b,#5f5f5f,#454545) !important; border: 0 !important; color: #fff !important; } .shops-live-tools #shops_export{ background: linear-gradient(120deg,#ffb347,#ff8c00,#ff6a00) !important; border: 0 !important; color: #fff !important; } .shops-live-body .table{margin:0} .shops-live-body .table{ width:100%; table-layout:fixed; } .shops-live-body .table>tbody>tr>td{ border-color:var(--tc-border); padding:10px 12px; vertical-align:middle; } .shops-live-body .table>tbody>tr>td:nth-child(2), .shops-live-body .table>tbody>tr>td:nth-child(3){ width:100px; text-align:center; white-space:nowrap; } .shops-live-body .table>tbody>tr>td:nth-child(3){ width:140px; } .shops-status{ display:inline-block; padding:3px 10px; border-radius:999px; font-weight:800; transform:translateY(0); transition:all .28s ease; } .shops-cancel-btn{ margin-left:6px; border:0; border-radius:999px; padding:2px 8px; font-size:12px; line-height:1.2; color:#fff; background:linear-gradient(120deg,#8b8b8b,#6f6f6f,#5b5b5b); } .shops-cancel-btn:disabled{ opacity:.5; cursor:not-allowed; } .shops-resubmit-btn{ margin-left:6px; border:0; border-radius:999px; padding:2px 8px; font-size:12px; line-height:1.2; color:#fff; background:linear-gradient(120deg,#3e82ff,#2f6bff,#1d4ed8); } .shops-status-pending{ background:rgba(120,120,120,.14); color:#666; } .shops-status-ok{ background:rgba(39,194,76,.14); color:#169c36; animation:shopsPop .28s ease; } .shops-status-fail{ background:rgba(240,80,80,.14); color:#d83a3a; animation:shopsPop .28s ease; } .shops-status-cancel{ background:rgba(120,120,120,.16); color:#666; } .shops-live-row-fail{ background:rgba(255,77,77,.04); } @keyframes shopsPop{ from{opacity:.3;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} } /* ===== user manage pages unified theme ===== */ body.user-page-classlist .app-content .wrapper .panel.panel-default, body.user-page-shoplist .app-content .wrapper .panel.panel-default, body.user-page-sitelist .app-content .wrapper .panel.panel-default, body.user-page-userlist .app-content .wrapper .panel.panel-default, body.user-page-list .app-content .wrapper .panel.panel-default, body.user-page-record .app-content .wrapper .panel.panel-default, body.user-page-message .app-content .wrapper .panel.panel-default, body.user-page-faq .app-content .wrapper .panel.panel-default, body.user-page-uset.user-mod-user .app-content .wrapper .panel.panel-default, body.user-page-uset.user-mod-site .app-content .wrapper .panel.panel-default, body.user-page-uset.user-mod-logo .app-content .wrapper .panel.panel-default, body.user-page-uset.user-mod-skimg .app-content .wrapper .panel.panel-default{ border:1px solid var(--tc-border); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.97); box-shadow:0 16px 32px color-mix(in srgb, var(--tc-primary-strong) 18%, transparent); } body.user-page-classlist .app-content .panel-heading, body.user-page-shoplist .app-content .panel-heading, body.user-page-sitelist .app-content .panel-heading, body.user-page-userlist .app-content .panel-heading, body.user-page-list .app-content .panel-heading, body.user-page-record .app-content .panel-heading, body.user-page-message .app-content .panel-heading, body.user-page-faq .app-content .panel-heading, body.user-page-uset.user-mod-user .app-content .panel-heading, body.user-page-uset.user-mod-site .app-content .panel-heading, body.user-page-uset.user-mod-logo .app-content .panel-heading, body.user-page-uset.user-mod-skimg .app-content .panel-heading{ background:var(--tc-grad-main) !important; color:#fff !important; border:0 !important; } body.user-page-classlist .app-content .panel-heading *, body.user-page-shoplist .app-content .panel-heading *, body.user-page-sitelist .app-content .panel-heading *, body.user-page-userlist .app-content .panel-heading *, body.user-page-list .app-content .panel-heading *, body.user-page-record .app-content .panel-heading *, body.user-page-message .app-content .panel-heading *, body.user-page-faq .app-content .panel-heading *, body.user-page-uset.user-mod-user .app-content .panel-heading *, body.user-page-uset.user-mod-site .app-content .panel-heading *, body.user-page-uset.user-mod-logo .app-content .panel-heading *, body.user-page-uset.user-mod-skimg .app-content .panel-heading *{ color:#fff !important; } body.user-page-classlist .app-content .well, body.user-page-shoplist .app-content .well, body.user-page-sitelist .app-content .well, body.user-page-userlist .app-content .well, body.user-page-list .app-content .well, body.user-page-record .app-content .well, body.user-page-message .app-content .well, body.user-page-faq .app-content .well, body.user-page-uset.user-mod-user .app-content .well, body.user-page-uset.user-mod-site .app-content .well, body.user-page-uset.user-mod-logo .app-content .well, body.user-page-uset.user-mod-skimg .app-content .well, body.user-page-classlist .app-content .alert, body.user-page-shoplist .app-content .alert, body.user-page-sitelist .app-content .alert, body.user-page-userlist .app-content .alert, body.user-page-list .app-content .alert, body.user-page-record .app-content .alert, body.user-page-message .app-content .alert, body.user-page-faq .app-content .alert, body.user-page-uset.user-mod-user .app-content .alert, body.user-page-uset.user-mod-site .app-content .alert, body.user-page-uset.user-mod-logo .app-content .alert, body.user-page-uset.user-mod-skimg .app-content .alert{ border-color:var(--tc-border) !important; background:color-mix(in srgb, var(--tc-primary-soft) 36%, #fff) !important; color:var(--tc-text) !important; } body.user-page-classlist .app-content .table>thead>tr>th, body.user-page-shoplist .app-content .table>thead>tr>th, body.user-page-sitelist .app-content .table>thead>tr>th, body.user-page-userlist .app-content .table>thead>tr>th, body.user-page-list .app-content .table>thead>tr>th, body.user-page-record .app-content .table>thead>tr>th, body.user-page-message .app-content .table>thead>tr>th, body.user-page-faq .app-content .table>thead>tr>th, body.user-page-uset.user-mod-user .app-content .table>thead>tr>th, body.user-page-uset.user-mod-site .app-content .table>thead>tr>th, body.user-page-uset.user-mod-logo .app-content .table>thead>tr>th, body.user-page-uset.user-mod-skimg .app-content .table>thead>tr>th{ background:color-mix(in srgb, var(--tc-primary-soft) 42%, #fff); color:var(--tc-primary-strong); border-color:var(--tc-border); } body.user-page-classlist .app-content .table>tbody>tr>td, body.user-page-shoplist .app-content .table>tbody>tr>td, body.user-page-sitelist .app-content .table>tbody>tr>td, body.user-page-userlist .app-content .table>tbody>tr>td, body.user-page-list .app-content .table>tbody>tr>td, body.user-page-record .app-content .table>tbody>tr>td, body.user-page-message .app-content .table>tbody>tr>td, body.user-page-faq .app-content .table>tbody>tr>td, body.user-page-uset.user-mod-user .app-content .table>tbody>tr>td, body.user-page-uset.user-mod-site .app-content .table>tbody>tr>td, body.user-page-uset.user-mod-logo .app-content .table>tbody>tr>td, body.user-page-uset.user-mod-skimg .app-content .table>tbody>tr>td{ border-color:var(--tc-border); } body.user-page-classlist .app-content .btn, body.user-page-shoplist .app-content .btn, body.user-page-sitelist .app-content .btn, body.user-page-userlist .app-content .btn, body.user-page-list .app-content .btn, body.user-page-record .app-content .btn, body.user-page-message .app-content .btn, body.user-page-faq .app-content .btn, body.user-page-uset.user-mod-user .app-content .btn, body.user-page-uset.user-mod-site .app-content .btn, body.user-page-uset.user-mod-logo .app-content .btn, body.user-page-uset.user-mod-skimg .app-content .btn{ border:0; border-radius:10px; } body.user-page-classlist .app-content .btn-primary, body.user-page-shoplist .app-content .btn-primary, body.user-page-sitelist .app-content .btn-primary, body.user-page-userlist .app-content .btn-primary, body.user-page-list .app-content .btn-primary, body.user-page-record .app-content .btn-primary, body.user-page-message .app-content .btn-primary, body.user-page-faq .app-content .btn-primary, body.user-page-uset.user-mod-user .app-content .btn-primary, body.user-page-uset.user-mod-site .app-content .btn-primary, body.user-page-uset.user-mod-logo .app-content .btn-primary, body.user-page-uset.user-mod-skimg .app-content .btn-primary, body.user-page-classlist .app-content .btn-info, body.user-page-shoplist .app-content .btn-info, body.user-page-sitelist .app-content .btn-info, body.user-page-userlist .app-content .btn-info, body.user-page-list .app-content .btn-info, body.user-page-record .app-content .btn-info, body.user-page-message .app-content .btn-info, body.user-page-faq .app-content .btn-info, body.user-page-uset.user-mod-user .app-content .btn-info, body.user-page-uset.user-mod-site .app-content .btn-info, body.user-page-uset.user-mod-logo .app-content .btn-info, body.user-page-uset.user-mod-skimg .app-content .btn-info{ background:var(--tc-grad-main) !important; color:#fff !important; } body.user-page-classlist .app-content .form-control, body.user-page-shoplist .app-content .form-control, body.user-page-sitelist .app-content .form-control, body.user-page-userlist .app-content .form-control, body.user-page-list .app-content .form-control, body.user-page-record .app-content .form-control, body.user-page-message .app-content .form-control, body.user-page-faq .app-content .form-control, body.user-page-uset.user-mod-user .app-content .form-control, body.user-page-uset.user-mod-site .app-content .form-control, body.user-page-uset.user-mod-logo .app-content .form-control, body.user-page-uset.user-mod-skimg .app-content .form-control{ border-color:var(--tc-border); border-radius:10px; } body.user-page-classlist .app-content .form-control:focus, body.user-page-shoplist .app-content .form-control:focus, body.user-page-sitelist .app-content .form-control:focus, body.user-page-userlist .app-content .form-control:focus, body.user-page-list .app-content .form-control:focus, body.user-page-record .app-content .form-control:focus, body.user-page-message .app-content .form-control:focus, body.user-page-faq .app-content .form-control:focus, body.user-page-uset.user-mod-user .app-content .form-control:focus, body.user-page-uset.user-mod-site .app-content .form-control:focus, body.user-page-uset.user-mod-logo .app-content .form-control:focus, body.user-page-uset.user-mod-skimg .app-content .form-control:focus{ border-color:var(--tc-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--tc-primary) 18%, transparent); } body.user-page-classlist .app-content .pagination>li>a, body.user-page-shoplist .app-content .pagination>li>a, body.user-page-sitelist .app-content .pagination>li>a, body.user-page-userlist .app-content .pagination>li>a, body.user-page-list .app-content .pagination>li>a, body.user-page-record .app-content .pagination>li>a, body.user-page-message .app-content .pagination>li>a, body.user-page-faq .app-content .pagination>li>a, body.user-page-uset.user-mod-user .app-content .pagination>li>a, body.user-page-uset.user-mod-site .app-content .pagination>li>a, body.user-page-uset.user-mod-logo .app-content .pagination>li>a, body.user-page-uset.user-mod-skimg .app-content .pagination>li>a{ color:var(--tc-primary-strong); border-color:var(--tc-border); } body.user-page-classlist .app-content .pagination>.disabled>a, body.user-page-shoplist .app-content .pagination>.disabled>a, body.user-page-sitelist .app-content .pagination>.disabled>a, body.user-page-userlist .app-content .pagination>.disabled>a, body.user-page-list .app-content .pagination>.disabled>a, body.user-page-record .app-content .pagination>.disabled>a, body.user-page-message .app-content .pagination>.disabled>a, body.user-page-faq .app-content .pagination>.disabled>a, body.user-page-uset.user-mod-user .app-content .pagination>.disabled>a, body.user-page-uset.user-mod-site .app-content .pagination>.disabled>a, body.user-page-uset.user-mod-logo .app-content .pagination>.disabled>a, body.user-page-uset.user-mod-skimg .app-content .pagination>.disabled>a{ background:color-mix(in srgb, var(--tc-primary-soft) 35%, #fff); color:var(--tc-muted); } body.user-page-faq #accordion>.panel{ border:1px solid var(--tc-border); border-radius:12px; overflow:hidden; margin-bottom:10px; } body.user-page-faq #accordion>.panel .panel-heading{ background:color-mix(in srgb, var(--tc-primary-soft) 40%, #fff) !important; } body.user-page-faq #accordion>.panel .panel-heading a{ color:var(--tc-primary-strong) !important; font-weight:700; } body.user-page-message .msg-head{ background:color-mix(in srgb, var(--tc-primary-soft) 40%, #fff) !important; border-bottom:1px solid var(--tc-border); } body.user-page-message .msg-body{ color:var(--tc-text); } body.user-page-uset.user-mod-logo .panel-body img, body.user-page-uset.user-mod-skimg .panel-body img{ border:1px solid var(--tc-border); border-radius:12px; padding:6px; background:#fff; } /* list / record / message: top summary blocks like index cards */ body.user-page-list .app-content .panel .well.well-sm:first-of-type, body.user-page-record .app-content .panel>.table.table-bordered, body.user-page-message .app-content .panel .well.well-sm:first-of-type{ margin:10px 12px 0 !important; border:1px solid var(--tc-border) !important; border-radius:14px !important; background:linear-gradient(120deg,#fff,color-mix(in srgb, var(--tc-primary-soft) 48%, #fff)) !important; box-shadow:0 10px 20px color-mix(in srgb, var(--tc-primary-strong) 12%, transparent); overflow:hidden; } body.user-page-record .app-content .panel>.table.table-bordered td{ border-color:var(--tc-border) !important; color:var(--tc-text); } body.user-page-record .app-content .panel>.table.table-bordered td b{ color:var(--tc-primary-strong); } body.user-page-list .app-content .panel form.form-inline, body.user-page-record .app-content .panel form.form-inline{ margin:12px 12px 8px; padding:12px; border:1px solid var(--tc-border); border-radius:12px; background:color-mix(in srgb, var(--tc-primary-soft) 26%, #fff); } body.user-page-list .app-content .panel form.form-inline .form-group, body.user-page-record .app-content .panel form.form-inline .form-group{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } body.user-page-list .app-content .panel form.form-inline label b, body.user-page-record .app-content .panel form.form-inline label b{ color:var(--tc-primary-strong); } body.user-page-message .app-content .panel .panel-body{ padding:12px; } body.user-page-message .app-content .panel .panel-body .btn.btn-primary{ min-width:108px; font-weight:800; } body.user-page-message .app-content .panel .table tr.warning{ background:color-mix(in srgb, var(--tc-primary-soft) 34%, #fff); } body.user-page-message .app-content .panel .table .label-warning{ background:var(--tc-grad-soft); color:var(--tc-primary-strong); } body.user-page-message .app-content .panel .table .label-success{ background:var(--tc-grad-main); color:#fff; } @media (max-width:768px){ body.user-page-list .app-content .panel form.form-inline .form-control, body.user-page-record .app-content .panel form.form-inline .form-control, body.user-page-list .app-content .panel form.form-inline .btn, body.user-page-record .app-content .panel form.form-inline .btn{ width:100%; } } /* ===== layout alignment with reference screenshots (list/record/message) ===== */ body.user-page-list .app-content .col-sm-12, body.user-page-record .app-content .col-sm-12, body.user-page-message .app-content .col-sm-12{ width:96%; max-width:1360px; margin:0 auto; float:none; } body.user-page-message .app-content .col-sm-12{ width:88%; max-width:1120px; } body.user-page-list .app-content .panel, body.user-page-record .app-content .panel, body.user-page-message .app-content .panel{ margin-top:12px; } body.user-page-list .app-content .panel .panel-heading, body.user-page-record .app-content .panel .panel-heading, body.user-page-message .app-content .panel .panel-heading{ min-height:48px; display:flex; align-items:center; border-radius:14px 14px 0 0; } body.user-page-list .app-content .panel .table-responsive, body.user-page-record .app-content .panel .table-responsive, body.user-page-message .app-content .panel .table-responsive{ padding:0 12px 12px; } body.user-page-list .app-content .panel .table, body.user-page-record .app-content .panel .table, body.user-page-message .app-content .panel .table{ margin-bottom:0; border-radius:12px; overflow:hidden; } body.user-page-list .app-content .panel .table>thead>tr>th, body.user-page-record .app-content .panel .table>thead>tr>th{ background:var(--tc-grad-main); color:#fff; } body.user-page-list .app-content .panel .table>thead>tr>th:nth-child(1), body.user-page-list .app-content .panel .table>tbody>tr>td:nth-child(1), body.user-page-list .app-content .panel .table>thead>tr>th:nth-child(4), body.user-page-list .app-content .panel .table>tbody>tr>td:nth-child(4){ text-align:center; } body.user-page-list .app-content .panel .table-striped>tbody>tr:nth-of-type(odd), body.user-page-record .app-content .panel .table-striped>tbody>tr:nth-of-type(odd), body.user-page-message .app-content .panel .table-striped>tbody>tr:nth-of-type(odd){ background:color-mix(in srgb, var(--tc-primary-soft) 20%, #fff); } /* list page: summary + search bar like screenshot */ body.user-page-list .app-content .panel .well.well-sm{ min-height:54px; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; color:var(--tc-muted) !important; font-size:16px; line-height:1.5; } body.user-page-list .app-content .panel .well.well-sm b{ color:var(--tc-primary-strong); font-size:20px; margin:0 2px; } body.user-page-list .app-content .panel form.form-inline{ border-radius:12px; background:#fff; text-align:center; } body.user-page-list .app-content .panel form.form-inline .form-group{ justify-content:center; width:100%; } body.user-page-list .app-content .panel form.form-inline input[name="kw"]{ min-width:340px; } body.user-page-list .app-content .panel form.form-inline select[name="type"]{ min-width:120px; } body.user-page-list .app-content .panel form.form-inline .btn.btn-info{ min-width:92px; } /* record page: top four metrics as cards */ body.user-page-record .app-content .panel>.table.table-bordered{ border-collapse:separate; border-spacing:10px; background:transparent !important; margin-top:20px !important; margin-bottom:2px; } body.user-page-record .app-content .panel>.table.table-bordered tbody tr{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; height:auto !important; } body.user-page-record .app-content .panel>.table.table-bordered td{ border:1px solid var(--tc-border) !important; border-radius:12px; background:#fff; box-shadow:0 8px 18px color-mix(in srgb, var(--tc-primary-strong) 9%, transparent); padding:12px 10px !important; min-height:72px; line-height:1.6; white-space:normal; overflow:visible; } body.user-page-record .app-content .panel>.table.table-bordered td font{ color:var(--tc-text) !important; } body.user-page-record .app-content .panel form.form-inline{ background:#fff; margin-top:30px; margin-bottom:18px; } body.user-page-record .app-content .panel > .wrapper{ margin-top:34px !important; margin-bottom:10px; } body.user-page-record .app-content .panel form.form-inline select[name="type"]{ min-width:92px; } body.user-page-record .app-content .panel form.form-inline input[name="kw"]{ min-width:260px; } /* record readability enhancement */ body.user-page-record .app-content .panel>.table.table-bordered td{ color:var(--tc-text) !important; font-size:15px; } body.user-page-record .app-content .panel>.table.table-bordered td b{ font-size:16px; } body.user-page-record .app-content .panel form.form-inline{ border:1px solid var(--tc-border); border-radius:12px; } body.user-page-record .app-content .panel .table-responsive{ margin-top:14px; } body.user-page-record .app-content .panel form.form-inline label b{ font-size:15px; } body.user-page-record .app-content .panel .table.table-striped>tbody>tr>td{ color:var(--tc-text) !important; font-size:14px; } body.user-page-record .app-content .panel .table.table-striped>thead>tr>th:nth-child(1), body.user-page-record .app-content .panel .table.table-striped>thead>tr>th:nth-child(2), body.user-page-record .app-content .panel .table.table-striped>thead>tr>th:nth-child(3), body.user-page-record .app-content .panel .table.table-striped>thead>tr>th:nth-child(5), body.user-page-record .app-content .panel .table.table-striped>tbody>tr>td:nth-child(1), body.user-page-record .app-content .panel .table.table-striped>tbody>tr>td:nth-child(2), body.user-page-record .app-content .panel .table.table-striped>tbody>tr>td:nth-child(3), body.user-page-record .app-content .panel .table.table-striped>tbody>tr>td:nth-child(5){ text-align:center !important; } body.user-page-record .app-content .panel .table.table-striped>tbody>tr>td:nth-child(3) font[color="green"]{ color:#169c36 !important; font-weight:700; } body.user-page-record .app-content .panel .table.table-striped>tbody>tr>td:nth-child(3) font[color="red"]{ color:#d83a3a !important; font-weight:700; } /* message page: message center block style */ body.user-page-message .app-content .panel .panel-body + .well.well-sm{ display:flex; align-items:center; min-height:56px; font-weight:700; } body.user-page-message .app-content .panel .panel-body + .well.well-sm b{ color:var(--tc-primary-strong); } body.user-page-message .app-content .panel .panel-body .btn.btn-primary{ float:right; border-radius:999px; min-height:34px; padding:6px 16px; } body.user-page-message .app-content .msg-overview{ display:flex; align-items:center; gap:24px; min-height:56px; justify-content:center; width:100%; margin:0 auto; } body.user-page-message .app-content .msg-overview-item{ display:flex; align-items:center; gap:10px; } body.user-page-message .app-content .msg-overview-label{ color:var(--tc-muted); font-size:14px; } body.user-page-message .app-content .msg-overview-num{ color:var(--tc-primary-strong); font-size:32px; line-height:1; font-weight:900; } body.user-page-message .app-content .panel .table>tbody>tr>td{ vertical-align:middle; } body.user-page-message .app-content .panel .btn.btn-info.btn-xs{ border-radius:999px; padding:3px 12px; } body.user-page-message .app-content .panel .table thead{ display:none; } body.user-page-message .app-content .panel .table tbody tr{ display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:8px; padding:12px 10px; margin-bottom:10px; border:1px solid var(--tc-border); border-radius:14px; background:#fff; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; } body.user-page-message .app-content .panel .table tbody tr:hover{ transform:translateY(-1px); box-shadow:0 12px 22px color-mix(in srgb, var(--tc-primary-strong) 14%, transparent); } body.user-page-message .app-content .panel .table tbody tr td{ border:0 !important; padding:0 !important; } body.user-page-message .app-content .panel .table tbody tr td:first-child{ text-align:center; } body.user-page-message .app-content .msg-avatar{ width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--tc-grad-main); box-shadow:0 8px 16px color-mix(in srgb, var(--tc-primary-strong) 16%, transparent); } body.user-page-message .app-content .msg-row-title{ color:var(--tc-text); font-size:22px; font-weight:800; line-height:1.25; } body.user-page-message .app-content .msg-row-time{ margin-top:4px; color:var(--tc-muted); font-size:14px; } body.user-page-message .app-content .panel .table .label{ border-radius:999px; padding:6px 12px; font-size:13px; } body.user-page-message .app-content .panel .panel-body{ padding:10px 12px 0; } body.user-page-message .app-content .panel .panel-body .btn.btn-primary{ min-width:108px; min-height:38px; font-weight:800; } body.user-page-message .app-content .panel .well.well-sm{ margin:10px 12px 12px !important; padding:14px 16px !important; border-radius:12px !important; } body.user-page-message .app-content .msg-overview{ gap:18px; } body.user-page-message .app-content .msg-overview-item{ min-width:140px; } body.user-page-message .app-content .msg-overview-icon{ width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--tc-grad-main); font-size:15px; box-shadow:0 6px 14px color-mix(in srgb, var(--tc-primary-strong) 18%, transparent); } body.user-page-message .app-content .msg-overview-icon-warn{ background:linear-gradient(120deg,#ffb05a,#ff7a2f); } body.user-page-message .app-content .msg-overview-meta{ display:flex; flex-direction:column; gap:2px; } body.user-page-message .app-content .msg-overview-label{ font-size:13px; } body.user-page-message .app-content .msg-overview-num{ font-size:34px; } body.user-page-message .app-content .table-responsive{ padding:0 12px 14px; } body.user-page-message .app-content .panel .table tbody tr{ grid-template-columns:54px 1fr auto; min-height:78px; } body.user-page-message .app-content .msg-row-title{ font-size:22px; } body.user-page-message .app-content .msg-empty{ color:var(--tc-muted); font-size:14px; text-align:center; padding:16px 0; } @media (max-width:768px){ body.user-page-message .app-content .msg-overview{ flex-direction:column; align-items:flex-start; gap:8px; } body.user-page-message .app-content .msg-overview-num{ font-size:28px; } body.user-page-message .app-content .msg-row-title{ font-size:16px; } body.user-page-message .app-content .msg-row-time{ font-size:12px; } } /* ===== user backend shell (moved from user/head.php inline