/* SPX Mobile UI for PCB v1.0.6-fullfix2 */
:root{ --spx-primary:#E53935; --spx-bg:#F6F7FB; --spx-header-bg:#fff; --spx-header-text:#222; }
body{ background:var(--spx-bg); }
/* Header */
.spx-header{position:fixed; top:0; left:0; right:0; z-index:9999; background:var(--spx-header-bg); color:var(--spx-header-text); display:flex; align-items:center; justify-content:space-between; padding:10px 14px; box-shadow:0 1px 4px rgba(0,0,0,.06);}
.spx-header .left{ display:flex; align-items:center; gap:10px; }
.spx-header .logo{ height:26px; width:auto; display:block; border-radius:6px; }
.spx-header .title{ font-weight:700; font-size:16px; }
.spx-header .right .bell{ position:relative; color:#999; font-size:20px; }
.spx-header .right .badge{ position:absolute; top:-6px; right:-10px; background:var(--spx-primary); color:#fff; font-size:10px; padding:2px 6px; border-radius:10px; }
.spx-header-spacer{ height:54px; }
/* Cards */
.spx-card{ background:#fff; border-radius:16px; padding:14px; margin:10px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.spx-card + .spx-card{ margin-top:12px; }
/* Search block */
.spx-search .search-bar{ display:flex; align-items:center; gap:10px; background:#F1F3F7; border-radius:12px; padding:10px 12px; }
.spx-search .search-bar input{ border:none; background:transparent; outline:none; flex:1; font-size:14px; color:#666; }
.spx-search .search-bar .scan{ color:#fff; background:var(--spx-primary); border-radius:10px; padding:8px 10px; display:flex; align-items:center; justify-content:center; }
.spx-search .create-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.spx-search .create-item{ background:#fff; border:1px dashed #eee; border-radius:16px; text-decoration:none; color:#222; padding:16px; position:relative; transition:transform .06s ease, box-shadow .18s ease; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.spx-search .create-item:active{ transform:scale(.98); box-shadow:0 8px 24px rgba(0,0,0,.10); }
.spx-search .create-item .coupon{ position:absolute; top:-8px; left:12px; background:#ffebe8; color:var(--spx-primary); border-radius:6px; font-size:12px; padding:2px 8px; border:1px solid #ffd2cc; }
.spx-search .create-item .icon{ font-size:28px; color:#374151; margin-bottom:6px; }
.spx-search .create-item .label{ font-weight:700; }
.spx-search .create-item .sub{ color:#777; font-size:12px; }
/* Utilities */
.spx-utils .utils-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.spx-utils .util{ position:relative; text-decoration:none; color:#303545; background:#fff; display:flex; flex-direction:column; align-items:center; gap:8px; border-radius:16px; padding:12px 8px; box-shadow:0 6px 18px rgba(0,0,0,.06); transition:transform .06s ease, box-shadow .18s ease; }
.spx-utils .util:active{ transform:scale(.98); box-shadow:0 8px 24px rgba(0,0,0,.10); }
.spx-utils .util-icon i{ font-size:26px; color:var(--spx-primary); }
.spx-utils .util-text{ font-size:12px; text-align:center; }
.spx-utils .util .tag{ position:absolute; top:6px; right:6px; font-size:10px; color:#fff; background:var(--spx-primary); padding:2px 6px; border-radius:10px; }
/* Bottom nav */
.spx-bottom{ position:fixed; bottom:0; left:0; right:0; z-index:9999; background:#fff; border-top:1px solid #eee; display:flex; justify-content:space-around; align-items:center; padding:6px 0; box-shadow:0 -2px 6px rgba(0,0,0,.08); }
.spx-bottom .nav-item{ text-decoration:none; color:#666; display:flex; flex-direction:column; align-items:center; font-size:20px; }
.spx-bottom .nav-item span{ font-size:11px; margin-top:2px; }
.spx-bottom .nav-item.active, .spx-bottom .nav-item:focus{ color:var(--spx-primary); }
.spx-bottom-spacer{ height:56px; }