body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: #f5f5f5;
      display: flex;
      justify-content: center;
    }
    .page {
      width: 100%;
      max-width: 420px; 
      min-height: 100vh;
      background: #f5f5f5;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 12px 24px;
      box-sizing: border-box;
      box-shadow: none;  
      border-radius: 0;
    }
    .title-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      margin-bottom: 12px;
    }
    .card {
      width: 100%;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      padding: 12px;
      box-sizing: border-box;
    }
    .preview-box {
      position: relative;
      width: 100%;
      padding-top: 100%; /* 1:1 区域 */
      background: #e6e6e6;
      border-radius: 6px;
      overflow: hidden;
    }
    .preview-inner {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2196f3;
    }
    /* 教学视频 */
    #tutorialVideo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* 摄像头预览 */
    #cameraPreview {
      display: none;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* transform: scaleX(-1); 正面摄像头时镜像，后摄没影响 */
      transform: none;
    }

    .card-tip {
      margin-top: 8px;
      font-size: 13px;
      text-align: center;
      color: #555;
    }

    .btn-row {
      margin-top: 24px;
      display: flex;
      justify-content: center;
      gap: 32px;
      align-items: center;
    }
    /* 新增：按钮纵向布局 */
    .btn-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    /* 新增：系统相机按钮样式 */
    .btn-primary-small {
      width: 82px;
      height: 82px;
      border-radius: 50%;
      border: 3px solid #000;
      background-color: #fff;
      background-image: url("https://cdn-zh.cypheme-cn.com/webapp/test/static/camera-black.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 60%;
      box-shadow: 0 4px 10px rgba(0,0,0,0.18);
      cursor: pointer;
      position: relative;
    }
    .btn-primary-small:active {
      transform: scale(0.97);
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    /* 给原来的补光灯按钮一个正常样式（之前没定义） */
    .btn-secondary {
      margin-top: 6px;
      padding: 6px 12px;
      border-radius: 18px;
      border: 1px solid #ccc;
      background: #fff;
      font-size: 12px;
      color: #555;
      cursor: pointer;
    }

    .camera-btn {
      width: 82px;
      height: 82px;
      border-radius: 50%;
      border: 3px solid #000;
      background-color: #fff;
      background-image: url("https://cdn-zh.cypheme-cn.com/webapp/test/static/camera-black.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 60%;
      box-shadow: 0 4px 10px rgba(0,0,0,0.18);
      cursor: pointer;
      position: relative;
    }
    .camera-btn:active {
      transform: scale(0.96);
      box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    }
    .camera-label {
      margin-top: 6px;
      font-size: 11px;
      text-align: center;
      color: #777;
    }

    .status-box {
      margin-top: 16px;
      width: 100%;
      text-align: center;
      font-size: 13px;
      min-height: 32px;
      color: #444;
    }

    .status-loading {
      color: #1976d2;
    }
    .status-ok {
      color: #2e7d32;
    }
    .status-error {
      color: #c62828;
    }

    .footer {
      margin-top: auto;
      width: 100%;
      text-align: center;
      font-size: 11px;
      color: #888;
    }
    .footer a {
      color: #1976d2;
      text-decoration: none;
    }
        /* 结果弹窗覆盖层 */
    .result-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.65);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }
    .result-card {
      width: 88%;
      max-width: 420px;
      background: #05070d;
      border-radius: 16px;
      color: #fff;
      padding: 20px 18px 16px;
      box-sizing: border-box;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .result-logo {
      position: absolute;
      left: 16px;
      top: 14px;
      font-size: 18px;
      font-weight: 600;
    }
    .result-main-icon {
      width: 120px;
      height: 120px;
      margin: 40px auto 12px;
      border-radius: 32px;
      background: radial-gradient(circle at 30% 20%, #3cf, #263445);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .result-main-icon svg {
      width: 72px;
      height: 72px;
    }
    .result-title {
      margin-top: 10px;
      font-size: 18px;
      font-weight: 600;
      /* color: var(--brand-primary); */
    }
    .result-sub {
      margin-top: 8px;
      font-size: 13px;
      color: #d0d0d0;
    }
    .result-extra {
      margin-top: 6px;
      font-size: 11px;
      color: #9fa2aa;
    }
    .result-tagcode {
      margin-top: 4px;
      font-size: 11px;
      color: #9fa2aa;
    }
    .result-btn-row {
      margin-top: 18px;
      display: flex;
      gap: 10px;
      justify-content: center;
    }
    .result-btn {
      flex: 1;
      min-width: 0;
      padding: 10px 0;
      border-radius: 8px;
      border: none;
      font-size: 14px;
      cursor: pointer;
    }
    .result-btn-primary {
      background: #03a9f4;
      color: #fff;
    }
    .result-btn-secondary {
      background: #fff;
      color: #333;
    }
    .result-corner-check {
      position: absolute;
      right: 10px;
      bottom: 6px;
      width: 72px;
      height: 72px;
      opacity: 0.9;
    }
    .result-card.warning {
      background: #20101a;
    }
    .result-card.warning .result-main-icon {
      background: radial-gradient(circle at 30% 20%, #ffb74d, #5d3a2f);
    }
    /* 拍照后图片：保持比例、自动居中 */
    .snapshot-img {
      display: none;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      background: #000;
      margin: auto;                 /* flex 中居中 */
    }

    /* 拍照示意弹窗样式 */
    .zoom-card {
      width: 88%;
      max-width: 420px;
      background: #ffffff;
      border-radius: 16px;
      padding: 16px 16px 14px;
      box-sizing: border-box;
      text-align: center;
    }

    .zoom-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .zoom-message {
      font-size: 13px;
      color: #555;
      margin-bottom: 10px;
    }

    .zoom-images-row {
      display: flex;
      gap: 10px;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .zoom-col {
      flex: 1;
      min-width: 0;
    }

    .zoom-label {
      font-size: 12px;
      color: #666;
      margin-bottom: 4px;
    }

    .zoom-img {
      width: 100%;
      border-radius: 8px;
      background: #eee;
      object-fit: cover;
    }

    .zoom-btn-row {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .zoom-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      border: none;
      font-size: 14px;
      cursor: pointer;
    }

    .zoom-btn-primary {
      background: #03a9f4;
      color: #fff;
    }

    .zoom-btn-secondary {
      background: #f1f1f1;
      color: #333;
    }

    .result-card.danger {
      background: #3b0000;
    }

    .result-card.danger .result-main-icon {
      background: #ff3b30; /* iOS 系那种红色 */
    }

    .result-card.danger .result-title {
      color: #ffdedb;
    }

    .result-card.danger .result-sub,
    .result-card.danger .result-extra,
    .result-card.danger .result-tagcode {
      color: #ffe8e4;
    }
    
    .upload-progress {
      width: 100%;
      max-width: 320px;
      height: 4px;
      margin: 8px auto 0;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 999px;
      overflow: hidden;
    }

    .upload-progress-bar {
      width: 0%;
      height: 100%;
      background: #00b894; /* 如果你有品牌色可以换成自己的 */
      transition: width 0.2s ease;
    }

    :root {
      --brand-primary: #ff4b6a;
      --brand-secondary: #141414;
    }

    /* 比如主按钮、标题用主色 */
    .camera-button {
      background: var(--brand-primary);
    }

    body.embed-mode {
      background: transparent;   
      overflow: hidden;            
    }
    body.embed-mode .page {
      background: transparent;
    }
    
    body.embed-mode .footer {
      display: none;
    }

    @media (max-width: 768px) {
      body.embed-mode .page {
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
      }
    }