/* static/style.css */
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Noto Sans CJK", "Microsoft YaHei", Arial, sans-serif;
  margin: 0; padding: 0;
  background: linear-gradient(135deg, #f5e6d3 0%, #e8d4c1 25%, #f2e5da 50%, #e6d3c1 75%, #d4c4b0 100%);
  color: #3a2818;
  min-height: 100vh;
  background-attachment: fixed;
}
.container { max-width: 800px; margin: 56px auto 40px; padding: 32px; }

h1 { font-size: 28px; font-weight: 700; margin: 0 0 32px; color: #3a2818; text-align: center; text-shadow: 0 2px 4px rgba(58, 40, 24, 0.1); }
h2 { font-size: 20px; margin: 0 0 16px; color: #3a2818; font-weight: 600; }

.card {
  margin-top: 24px;
  background: rgba(255, 252, 248, 0.95);
  border: 1px solid rgba(255, 106, 51, 0.25);
  border-radius: 16px;
  padding: 24px 28px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(58, 40, 24, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(58, 40, 24, 0.25);
}
.sub { color: rgba(58, 40, 24, 0.75); margin-top: -8px; margin-bottom: 16px; font-size: 14px; }

.mic {
  width: 160px; height: 160px; border-radius: 50%;
  margin: 32px auto; position: relative; cursor: pointer;
  background: radial-gradient(circle at 35% 35%, #ff8855, #ff6a33);
  box-shadow: 0 12px 40px rgba(255, 106, 51, 0.4), inset 0 -8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.mic:hover { box-shadow: 0 16px 50px rgba(255, 106, 51, 0.5), inset 0 -8px 24px rgba(0, 0, 0, 0.3); }
.mic:active { transform: scale(0.95); }
.mic.recording {
  animation: pulse 1.5s infinite;
  background: radial-gradient(circle at 35% 35%, #ff8855, #ff6a33);
  box-shadow: 0 16px 60px rgba(255, 106, 51, 0.7), inset 0 -8px 24px rgba(0, 0, 0, 0.4);
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 106, 51, 0.7); }
  50% { box-shadow: 0 0 0 30px rgba(255, 106, 51, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(255, 106, 51, 0); }
}

.hint { text-align: center; color: rgba(58, 40, 24, 0.7); margin-top: 12px; font-size: 15px; font-weight: 500; }
.result { margin-top: 20px; background: rgba(255, 252, 248, 0.85); border-radius: 12px; padding: 16px; border: 1px solid rgba(255, 106, 51, 0.2); }
.label { color: rgba(58, 40, 24, 0.9); font-size: 14px; letter-spacing: 0.5px; margin-bottom: 8px; font-weight: 600; }
.output { white-space: pre-wrap; line-height: 1.8; color: #3a2818; min-height: 60px; font-size: 16px; }

.cfg-status { margin-left: 12px; font-size: 14px; color: rgba(58, 40, 24, 0.7); font-weight: 500; }
.env { font-size: 14px; color: rgba(58, 40, 24, 0.8); margin: 16px 0 20px; background: rgba(255, 252, 248, 0.85); padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255, 106, 51, 0.2); }
.row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

select#deviceSelect {
  flex: 1; min-width: 0;
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid rgba(255, 106, 51, 0.3);
  background: rgba(255, 252, 248, 0.9);
  color: #3a2818; font-size: 15px;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
select#deviceSelect:focus { outline: none; border-color: #ff6a33; background: rgba(255, 255, 255, 0.98); }

button#refreshDevicesBtn,
button#sendTextBtn {
  padding: 14px 20px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #ff8855, #ff6a33);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 106, 51, 0.3);
  white-space: nowrap;
}
button#refreshDevicesBtn:hover,
button#sendTextBtn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255, 106, 51, 0.4); }
button#sendTextBtn { padding: 16px 24px; font-size: 16px; }

textarea#manualText {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 106, 51, 0.3);
  background: rgba(255, 252, 248, 0.9);
  color: #3a2818;
  font-size: 16px;
  transition: border-color 0.3s ease, background 0.3s ease;
  font-family: inherit;
}
textarea#manualText:focus { outline: none; border-color: #ff6a33; background: rgba(255, 255, 255, 0.98); }
textarea#manualText::placeholder { color: rgba(58, 40, 24, 0.55); }

/* ===================== Tab + 页面切换 ===================== */
.tabbar{ display:flex; gap:12px; margin: 4px 0 18px; }
.tab{
  flex:1; padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 106, 51, 0.25);
  background: rgba(255, 252, 248, 0.9);
  cursor:pointer;
  font-weight: 800;
  color:#3a2818;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.tab:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(58, 40, 24, 0.12); }
.tab.active{
  background: linear-gradient(135deg, #ff8855, #ff6a33);
  color:#fff;
  border-color: rgba(255,106,51,.35);
}
.page{ display:none; }
.page.active{ display:block; }

/* ===================== 展会模式 ===================== */
.expo-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 520px){
  .expo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.expo-item{
  position: relative;
  border: 1px solid rgba(255, 106, 51, 0.22);
  background: rgba(255, 252, 248, 0.92);
  border-radius: 14px;
  padding: 12px;
  cursor:pointer;
  text-align:center;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.expo-item:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(58, 40, 24, 0.12); }
.expo-item.selected{
  border-color: rgba(255, 106, 51, 0.8);
  box-shadow: 0 12px 28px rgba(255, 106, 51, 0.18);
  background: rgba(255, 106, 51, 0.10);
}
.expo-item.disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.2);
}

.expo-img{
  height: 100px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 38px;
  background: rgba(255, 106, 51, 0.08);
  margin-bottom: 10px;
}

.expo-img img{
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
}

.expo-name{ font-weight: 900; color:#3a2818; }

.expo-badge{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(58,40,24,.85);
  background: rgba(255, 106, 51, 0.10);
  border: 1px solid rgba(255, 106, 51, 0.18);
  border-radius: 10px;
  padding: 6px 8px;
}

.expo-summary{
  margin-top: 16px;
  border: 1px dashed rgba(255, 106, 51, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 252, 248, 0.85);
}
.expo-summary-row{ display:flex; gap:10px; padding: 6px 0; }
.expo-summary-k{ min-width: 88px; color: rgba(58, 40, 24, 0.75); font-weight: 800; }
.expo-summary-v{ color:#3a2818; font-weight: 800; word-break: break-all; }

/* ====== 展会：确认/取消居中 + 放大 ====== */
.expo-actions{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.expo-actions-btns{
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.expo-btn{
  padding: 18px 44px;
  font-size: 18px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #ff8855, #ff6a33);
  color: #ffffff;
  font-weight: 950;
  box-shadow: 0 6px 18px rgba(255, 106, 51, 0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  min-width: 220px;
}
.expo-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(255, 106, 51, 0.35);
}
.expo-status{
  margin-top: 2px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(58, 40, 24, 0.75);
  text-align: center;
}
@media (max-width: 520px){
  .expo-actions-btns{ flex-wrap: wrap; }
  .expo-btn{ width: 100%; max-width: 320px; }
}

/* 展会标题栏（右上角设置） */
.expo-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 6px;
}
.icon-btn{
  border: 1px solid rgba(255,106,51,0.25);
  background: rgba(255,252,248,0.9);
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
  color:#3a2818;
}
.icon-btn:hover{
  box-shadow: 0 10px 24px rgba(58, 40, 24, 0.12);
  transform: translateY(-1px);
}

/* ====== Modal ====== */
.hidden{ display:none !important; }

.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.35);
}
.modal-panel{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(560px, calc(100vw - 28px));
  background: rgba(255,252,248,0.98);
  border: 1px solid rgba(255,106,51,0.25);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.22);
  overflow: hidden;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,106,51,0.18);
}
.modal-title{ font-weight: 900; color:#3a2818; }
.modal-body{ padding: 16px; }
.modal-actions{
  display:flex;
  gap:12px;
  margin-top: 14px;
}
.modal-actions button{
  padding: 12px 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #ff8855, #ff6a33);
  color: #ffffff;
  font-weight: 900;
}
.btn-ghost{
  background: rgba(255, 252, 248, 0.9) !important;
  color:#3a2818 !important;
  border: 1px solid rgba(255,106,51,0.25) !important;
}

.form-row{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.form-label{
  min-width: 92px;
  font-weight: 800;
  color: rgba(58,40,24,0.85);
}
.form-input, .form-select{
  flex: 1;
  min-width: 180px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,106,51,0.25);
  background: rgba(255,255,255,0.9);
  color:#3a2818;
  font-weight: 700;
}
.form-hint{
  margin-top: 10px;
  color: rgba(58,40,24,0.75);
  font-weight: 700;
}

/* ====== Settings blocks ====== */
.setting-block{ padding: 6px 0; }
.setting-title{
  font-weight: 900;
  margin-bottom: 10px;
  color: rgba(58,40,24,0.92);
}
.setting-sep{
  height: 1px;
  background: rgba(255,106,51,0.18);
  margin: 14px 0;
}

.inv-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
@media (max-width: 520px){
  .inv-grid{ grid-template-columns: 1fr; }
}
.inv-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,106,51,0.18);
  background: rgba(255,252,248,0.88);
}
.inv-name{ font-weight: 900; }
.inv-input{
  width: 120px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,106,51,0.25);
  font-weight: 900;
  color:#3a2818;
  background: rgba(255,255,255,0.95);
}

/* ====== Top marquee ====== */
.top-marquee{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  height: 44px;
  display:flex;
  align-items:center;
  background: rgba(255, 106, 51, 0.92);
  color: #fff;
  overflow:hidden;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.top-marquee-inner{
  display:inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 12s linear infinite;
  font-weight: 900;
  letter-spacing: .3px;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ====== UI Lock ====== */
.ui-lock{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.28);
}
.ui-lock-panel{
  width: min(420px, calc(100vw - 40px));
  background: rgba(255,252,248,0.98);
  border: 1px solid rgba(255,106,51,0.25);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.22);
  text-align:center;
}
.ui-lock-title{ font-weight: 1000; font-size: 18px; color:#3a2818; }
.ui-lock-sub{ margin-top: 6px; color: rgba(58,40,24,0.72); font-weight: 800; }

/* ✅ 展会设置弹窗可滚动（不改变整体样式，只保证不超屏） */
.expo-modal-panel{
  max-height: 86vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}









html, body { height: 100%; }

/* ✅ 遮罩出现时禁止页面滚动（防滚动穿透） */
body.no-scroll {
  overflow: hidden;
}

/* ✅ 锁屏遮罩：永远全屏覆盖 */
.ui-lock{
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
}

/* ✅ 所有弹窗容器也强制全屏覆盖（避免滚动后遮罩不全） */
.modal{
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
}

/* ✅ 背景遮罩用 fixed（不要用 absolute） */
.modal-backdrop{
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.35);
}

/* ✅ 提示 Tip 弹窗：确认按钮水平居中 */
#orderModal .modal-actions{
  justify-content: center;   /* 水平居中 */
}

/* ===== Items Editor（展会设置：商品增删改） ===== */
.items-editor{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item-row{
  border: 1px solid rgba(255,106,51,0.18);
  background: rgba(255,252,248,0.88);
  border-radius: 12px;
  padding: 10px 12px;
}

.item-row-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.item-row-title{
  font-weight: 900;
}

.item-row-actions{
  display:flex;
  gap: 8px;
}

.item-row-actions button{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,106,51,0.25);
  background: rgba(255,252,248,0.9);
  cursor: pointer;
  font-weight: 900;
  color:#3a2818;
}

.item-row-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

@media (max-width: 520px){
  .item-row-grid{ grid-template-columns: 1fr; }
}

.item-field{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.item-field label{
  font-weight: 900;
  color: rgba(58,40,24,0.85);
  min-width: 88px;
}

.item-field input, .item-field select{
  flex: 1;
  min-width: 160px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,106,51,0.25);
  background: rgba(255,255,255,0.95);
  font-weight: 800;
  color:#3a2818;
}

/* 订单提示按钮居中（你之前要的） */
#orderModal .modal-actions{
  justify-content: center;
}