:root{
  --ink:#1c1c1c;
  --paper:#f6f4ef;
  --line:#d8d3c6;
  --accent:#8a5a2e;
  --accent-dark:#5c3a1a;
  --danger:#b23a2e;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:-apple-system,"Noto Sans SC",sans-serif;
  background:var(--paper); color:var(--ink);
}
.hidden{ display:none !important; }

.screen{ min-height:100vh; }

/* login */
#login-screen{ display:flex; align-items:center; justify-content:center; padding:20px 0; }
.login-box{
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:32px 28px; width:320px; text-align:center;
}
.login-box h1{ font-size:18px; margin:0 0 16px; }
.login-box .hint{ font-size:12px; color:#777; margin-bottom:12px; text-align:left; }
.login-box input{ width:100%; padding:10px; margin-bottom:12px; border:1px solid var(--line); border-radius:4px; }

/* 品牌小标签：小号咖啡色文字 + 圆形logo，不用外部字体文件
   （国内常连不上谷歌字体CDN），纯CSS保证稳定显示 */
.brand-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; color:#6b4423;
  letter-spacing:1px; margin-top:16px; margin-bottom:0;
}
.brand-tag.inline{
  margin-left:8px; margin-top:0; vertical-align:middle;
}
.brand-logo{
  width:14px; height:14px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.login-box button{ width:100%; }

/* 商家信息卡片——登录后要第一眼就看到自己是哪个商家、用哪个账号登录的 */
.tenant-info-card{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff; padding:16px 20px; margin:16px 20px 0;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(138,90,46,0.28);
}
.tenant-info-icon{ font-size:30px; line-height:1; }
.tenant-info-name{ font-size:19px; font-weight:700; }
.tenant-info-account{ font-size:13px; opacity:0.88; margin-top:3px; }

.qrcode-btn{
  margin-left:auto; background:rgba(255,255,255,0.18); color:#fff;
  border:1px solid rgba(255,255,255,0.4) !important; font-size:13px; padding:9px 16px;
  flex-shrink:0;
}
.qrcode-btn:hover{ background:rgba(255,255,255,0.28); }

.qrcode-modal{
  position:fixed; inset:0; background:rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
.qrcode-modal-content{
  background:#fff; border-radius:10px; padding:28px; width:300px; text-align:center;
  position:relative;
}
.qrcode-close{
  position:absolute; top:10px; right:14px; background:none; color:#999;
  font-size:20px; padding:0; width:auto;
}
.qrcode-modal-content h3{ margin:0 0 6px; font-size:16px; }
#qrcode-img{ width:220px; height:220px; margin:14px 0; border:1px solid var(--line); border-radius:6px; }
.qrcode-url{
  font-size:12px; color:#777; word-break:break-all; background:#f7f4ec;
  padding:8px; border-radius:4px; margin-bottom:14px;
}
.qrcode-actions{ display:flex; gap:10px; }
.qrcode-actions button{ flex:1; font-size:13px; padding:10px; }
#qrcode-copy-hint{ color:#5c7050; margin-top:8px; margin-bottom:0; min-height:16px; }

/* 订阅状态卡片 */
.subscription-card{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:14px 20px; margin:12px 20px 0;
}
.subscription-status{ font-size:15px; font-weight:600; }
.subscription-status.valid{ color:#5c7050; }
.subscription-status.expiring{ color:#b57b1e; }
.subscription-status.expired{ color:var(--danger); }
.subscription-detail{ font-size:12px; color:#888; margin-top:3px; }
.renew-btn{ background:var(--accent); color:#fff; font-size:13px; padding:9px 18px; flex-shrink:0; }
.renew-btn:hover{ background:var(--accent-dark); }

.plan-option{
  display:block; padding:12px 14px; border:1px solid var(--line); border-radius:6px;
  margin-bottom:10px; text-align:left; cursor:pointer; font-size:14px;
}
.plan-option:hover{ background:#f7f4ec; }
.plan-option input{ width:auto; margin-right:8px; }
.plan-option b{ color:var(--accent-dark); }
#renew-create-order-btn{ width:100%; margin-top:6px; }
.renew-amount{ font-size:28px; font-weight:700; color:var(--accent-dark); margin:14px 0; }
#renew-mock-pay-btn{ width:100%; background:#5c7050; }
#renew-mock-pay-btn:hover{ background:#476040; }

/* 登录/注册切换——注册只是一个不起眼的小链接，登录才是主视角 */
.switch-link{
  font-size:12px; color:#999; margin-top:14px; margin-bottom:0; text-align:center;
}
.switch-link a{ color:var(--accent); text-decoration:none; }
.switch-link a:hover{ text-decoration:underline; }

/* 注册方式切换（手机号/邮箱/微信） */
.method-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.method-tab{
  flex:1; background:#f2ede0; color:#777; font-size:12px; padding:8px 0; border-radius:4px;
}
.method-tab:hover{ background:#e8e2d2; }
.method-tab.active{ background:var(--accent); color:#fff; }

.contact-field{ margin-bottom:0; }

/* 拖动滑块验证（注册用） */
#reg-verify-wrap{ margin:6px 0 14px; text-align:left; }
#reg-verify-track{
  position:relative; height:44px; border-radius:22px;
  background:#f0ece0; border:1px solid var(--line);
  margin-top:6px; touch-action:none; overflow:hidden;
}
#reg-verify-target{
  position:absolute; top:0; bottom:0; width:14%;
  background:rgba(138,90,46,0.22);
  border:2px solid var(--accent);
  border-radius:8px;
  animation:reg-verify-pulse 1.4s ease-in-out infinite;
}
@keyframes reg-verify-pulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(138,90,46,0.4); }
  50%{ box-shadow:0 0 8px 2px rgba(138,90,46,0.4); }
}
#reg-verify-handle{
  position:absolute; top:2px; left:2px; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(180deg,var(--accent),var(--accent-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700;
  cursor:grab; user-select:none;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
#reg-verify-handle.verified{ background:linear-gradient(180deg,#7A8C6E,#586b4c); }
#reg-verify-status{ text-align:center; margin-top:6px; min-height:16px; font-size:12px; }
#reg-verify-status.ok{ color:#5c7050; }
#reg-verify-status.fail{ color:var(--danger); }

/* header */
header{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 24px; border-bottom:1px solid var(--line); background:#fff;
}
header h1{ font-size:18px; margin:0; }

button{
  background:var(--accent); color:#fff; border:none; border-radius:4px;
  padding:10px 18px; font-size:14px; cursor:pointer;
}
button:hover{ background:var(--accent-dark); }
button:disabled{ background:#c9c2b0; cursor:not-allowed; }
.link-btn{ background:none; color:var(--accent); padding:4px 8px; font-size:13px; }
.link-btn:hover{ background:none; text-decoration:underline; }

.error{ color:var(--danger); font-size:13px; min-height:18px; }

section{ max-width:760px; margin:20px auto; padding:0 20px; }
section h2{ font-size:16px; border-bottom:1px solid var(--line); padding-bottom:8px; }

.form-row{ margin-bottom:14px; }
.form-row label{ display:block; font-size:13px; color:#555; margin-bottom:6px; }
.form-row input[type=text]{
  width:100%; padding:10px; border:1px solid var(--line); border-radius:4px; font-size:14px;
}
.physical-size-inputs{ display:flex; align-items:center; gap:8px; }
.physical-size-inputs input[type=number]{
  width:90px; padding:10px; border:1px solid var(--line); border-radius:4px; font-size:14px;
}
.physical-size-inputs span{ color:#888; font-size:13px; }
#detect-size-hint{ margin-top:6px; }
#detect-size-hint.detected{ color:#5c7050; }
#detect-size-hint.not-detected{ color:#b23a2e; }

.price-inputs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.price-inputs input[type=text]{
  width:120px; padding:10px; border:1px solid var(--line); border-radius:4px; font-size:14px;
}
.price-inputs input[type=number]{
  width:90px; padding:10px; border:1px solid var(--line); border-radius:4px; font-size:14px;
}
.price-inputs span{ color:#888; font-size:13px; }

/* 标签编辑器：照片区域/文字区域 模式切换 */
.region-mode-toggle{ display:flex; gap:8px; margin-bottom:10px; }
.mode-btn{
  flex:1; background:#f2f0e8; color:#555; border:1px solid var(--line) !important;
  font-size:13px; padding:8px;
}
.mode-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent) !important; }
.text-style-inputs{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.text-style-inputs input[type=number]{
  width:80px; padding:8px; border:1px solid var(--line); border-radius:4px; font-size:14px;
}
.text-style-inputs input[type=color]{ width:44px; height:36px; padding:2px; border:1px solid var(--line); border-radius:4px; }
.text-style-inputs span{ color:#888; font-size:13px; }
.blessing-badge{ color:#7A5C3E; font-size:12px; }

.hint{ font-size:12px; color:#888; }

#canvas-container{
  border:1px solid var(--line); display:inline-block; margin:10px 0;
  background:
    linear-gradient(45deg,#e8e4d8 25%,transparent 25%),
    linear-gradient(-45deg,#e8e4d8 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e8e4d8 75%),
    linear-gradient(-45deg,transparent 75%,#e8e4d8 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0px;
}
#editor-canvas{ display:block; cursor:crosshair; touch-action:none; }

.region-readout{ font-size:12px; color:#555; margin-bottom:16px; }
.region-readout span{ font-family:monospace; color:var(--ink); }

.label-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px; margin-top:12px;
}
.label-card{
  border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff;
}
.label-card .thumb-wrap{
  aspect-ratio:3/4; overflow:hidden;
  background:
    linear-gradient(45deg,#e8e4d8 25%,transparent 25%),
    linear-gradient(-45deg,#e8e4d8 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e8e4d8 75%),
    linear-gradient(-45deg,transparent 75%,#e8e4d8 75%);
  background-size:14px 14px;
  background-position:0 0,0 7px,7px -7px,-7px 0px;
}
.label-card img{ width:100%; height:100%; object-fit:contain; }
.label-card .meta{ padding:10px; }
.label-card .meta .name{ font-size:13px; font-weight:600; margin-bottom:6px; }
.label-card .meta .status{ font-size:11px; color:#888; margin-bottom:8px; }
.label-card .meta .status.active{ color:#5c7050; }
.label-card .meta .physical-size{ font-size:11px; color:#999; margin-bottom:6px; }
.label-card .actions{ display:flex; gap:6px; }
.label-card .actions button{ flex:1; font-size:12px; padding:6px; }
.label-card .actions .toggle-btn{ background:#7A8C6E; }
.label-card .actions .toggle-btn.inactive{ background:#999; }
.label-card .actions .delete-btn{ background:var(--danger); }

/* 店铺资料（地址/地区/联系人/logo） */
.tenant-profile-panel{ max-width:900px; margin-bottom:20px; }

/* 推荐同行入驻 */
.referral-panel{ max-width:900px; margin-bottom:20px; }
.referral-code-box{
  display:flex; align-items:center; gap:10px; background:#faf7f0;
  border:1px solid var(--line); border-radius:6px; padding:10px 14px; margin:10px 0;
  font-size:14px;
}
.referral-code-box code{
  font-size:15px; font-weight:600; color:#7A5C3E; background:#fff;
  padding:3px 10px; border-radius:4px; border:1px solid var(--line);
}
.referral-list-ul{ list-style:none; padding:0; margin:8px 0 0; }
.referral-list-ul li{
  padding:8px 12px; background:#fff; border:1px solid var(--line);
  border-radius:5px; margin-bottom:6px; font-size:13px;
}
.region-row .region-inputs{ display:flex; gap:8px; }
.region-inputs input{ flex:1; min-width:0; }
.region-inputs.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.profile-logo-row{ margin-top:18px; }
.profile-logo-current{ margin-bottom:10px; }
.profile-logo-preview{
  width:88px; height:88px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); display:block;
}
.danger-btn{ background:var(--danger); margin-left:8px; }

/* 待确认打印队列 */
.queue-panel{ max-width:900px; }
.queue-header{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line); padding-bottom:8px;
}
.queue-header h2{ border:none; padding:0; margin:0; }
.queue-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px; margin-top:12px;
}
.queue-card{
  border:2px solid var(--line); border-radius:6px; overflow:hidden; background:#fff;
  transition:border-color 0.15s;
  position:relative;
}
.queue-card:hover{ border-color:var(--accent); }
.queue-card.printing{ cursor:wait; opacity:0.7; pointer-events:none; }
.queue-card.failed{ border-color:var(--danger); }
.queue-thumb-wrap{
  aspect-ratio:3/4; overflow:hidden;
  background:
    linear-gradient(45deg,#e8e4d8 25%,transparent 25%),
    linear-gradient(-45deg,#e8e4d8 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e8e4d8 75%),
    linear-gradient(-45deg,transparent 75%,#e8e4d8 75%);
  background-size:14px 14px;
  background-position:0 0,0 7px,7px -7px,-7px 0px;
}
.queue-thumb-wrap img{ width:100%; height:100%; object-fit:contain; }
.queue-meta{ padding:8px 10px; }
.queue-label-name{ font-size:13px; font-weight:600; }
.queue-time{ font-size:11px; color:#888; margin-top:2px; }
.queue-printed-badge{
  font-size:11px; font-weight:600; color:#2e7d32; background:#e8f5e9;
  border:1px solid #a5d6a7; border-radius:4px; padding:3px 8px; margin-top:6px; display:inline-block;
}
.queue-printed-badge.partial{ color:#b5651d; background:#fff8e8; border-color:#e8d5a0; }
.queue-customer-message{
  font-size:12px; color:#7a5c3e; background:#fff8e8; border:1px solid #e8d5a0;
  border-radius:4px; padding:6px 8px; margin-top:6px; white-space:pre-wrap; word-break:break-word;
}
.queue-status-badge{
  font-size:11px; margin-top:4px; padding:3px 6px; border-radius:3px; display:inline-block;
}
.queue-status-badge.printing-text{ background:var(--accent); color:#fff; }
.queue-status-badge.failed-text{ background:var(--danger); color:#fff; }
.view-pdf-btn{
  display:block; width:100%; margin-top:6px; padding:5px; font-size:11px;
  background:none; border:1px solid var(--line); color:var(--accent); border-radius:3px;
}
.view-pdf-btn:hover{ background:#f2ede0; }

.queue-actions{ display:flex; gap:6px; padding:0 10px 10px; }
.queue-actions button{
  flex:1; padding:8px 4px; font-size:11px; border-radius:4px; border:none;
}
.queue-download-btn{ background:#e8e2d2; color:var(--accent-dark); }
.queue-download-btn:hover{ background:#ded5bd; }
.queue-print-btn{ background:var(--accent); color:#fff; }
.queue-print-btn:hover{ background:var(--accent-dark); }
.queue-delete-btn{ background:none; border:1px solid var(--danger) !important; color:var(--danger); }
.queue-delete-btn:hover{ background:#fbe9e7; }

/* 手机屏幕（比如工作人员直接用自己的手机打开管理后台）下，
   卡片放大、单列排列，方便手指点击，不容易点错 */
@media (max-width: 480px){
  .queue-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .queue-label-name{ font-size:12px; }
  header{ flex-wrap:wrap; gap:8px; padding:12px 16px; }
  section{ padding:0 14px; margin:16px auto; }
  .login-box{ width:calc(100% - 40px); }
}