:root {
    --brand: #11a8a8;
    --brand-dark: #0c8484;
    --brand-light: #e6f7f7;
    --ink: #1f2933;
    --ink-soft: #52606d;
    --ink-faint: #9aa5b1;
    --line: #e4e7eb;
    --bg: #ffffff;
    --bg-soft: #f7f9fb;
    --good: #2f9e44;
    --danger: #ef4444;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(17, 168, 168, .08), 0 2px 8px rgba(0,0,0,.04);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  a { color: var(--brand); text-decoration: none; }
  .wrap { margin: 0 auto; 
/*    padding: 0 32px; */
  }
  /* 吸底 footer 不遮挡内容 */
  main.wrap { 
/*    padding-bottom: 80px; */
  }


  .copyright{
            margin-bottom: 0px !important;
  }
  .hero-split { 

    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    overflow: visible !important;
width: 1375px;
    margin: auto;
gap: 0px 0px;
    justify-content: space-between;

  }
  /* Full-height vertical divider between hero and side (from header bottom to footer top) */
/* .hero-split::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--border-color, #e3e3e3);
    transform: translateX(-.5px);
    pointer-events: none;
    width: 2px;
    background: linear-gradient(180deg, rgba(8, 148, 74, 0), rgba(8, 148, 74, .6) 18%, rgba(8, 148, 74, .6) 82%, rgba(8, 148, 74, 0));
  }
*/

  .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .logo { font-weight: 800; font-size: 20px; letter-spacing: -.5px; display: flex; align-items: center; gap: 8px; }
  .logo .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-light); }
  .nav .tag { font-size: 12px; color: var(--brand-dark); background: var(--brand-light); padding: 4px 10px; border-radius: 999px; font-weight: 600; }

  /* Hero (left column) */
  .hero { 

     flex: 0 0 calc(50% - 10px);
    min-width: 0;
    text-align: center;
       padding: 30px 30px 48px;
        border-radius: var(--radius);
    transition: box-shadow .3s ease, border-color .3s ease;
    background: linear-gradient(157.87deg, hsl(0deg 0% 100% / 78%), hsl(0deg 0% 100% / 64%));
    box-shadow: 0 0 5px rgb(0 0 0 / 4%) !important;
    border: 1px solid #ffffffeb !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

  }
  .hero h1 { font-size: 36px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -.5px; }
  .hero h1 .hl { color: var(--brand); }
  .hero p.sub { 
    font-size: 17px;
    color: var(--ink-soft);
    margin: 0 auto;
    max-width: 560px;
    margin-bottom: 25px;

  }

  /* Dropzone (webp style) */
  .dropzone { 
/*    max-width: 640px; */
    border: 2px dashed var(--brand); border-radius: var(--radius); background: linear-gradient(180deg, var(--brand-light), #fff); padding: 48px 24px; text-align: center; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
  .dropzone:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .dropzone.drag { background: var(--brand-light); border-color: var(--brand-dark); box-shadow: var(--shadow); }
  .dropzone .ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
  .dropzone .ic svg { width: 30px; height: 30px; stroke: var(--brand); }
  .dropzone .big { font-size: 18px; font-weight: 600; display: block; }
  .dropzone .small { font-size: 13px; color: var(--ink-faint); margin-top: 6px; display: block; }
  /* 上传态：左图右按钮 */
  .dropzone.has-image {
    display: flex; align-items: center; gap: 24px; padding: 16px 20px;
    text-align: left;
  }
  .dropzone.has-image .dz-preview {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px;
  }
  .dropzone.has-image .dz-thumb {
    width: 80px; height: 80px; border-radius: 10px; object-fit: cover;
    border: 1px solid var(--line); flex-shrink: 0; background: #fff;
  }
  .dropzone.has-image .dz-info { min-width: 0; overflow: hidden; }
  .dropzone.has-image .dz-name {
    font-size: 14px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dropzone.has-image .dz-meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
  .dropzone.has-image .dz-replace {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer; padding: 12px 16px; border-radius: 10px;
    border: 1.5px solid var(--brand); background: #fff;
    transition: background .15s;
  }
  .dropzone.has-image .dz-replace:hover { background: var(--brand-light); }
  .dropzone.has-image .dz-replace svg { width: 22px; height: 22px; stroke: var(--brand); }
  .dropzone.has-image .dz-replace span { font-size: 12px; font-weight: 600; color: var(--brand-dark); white-space: nowrap; }
  /* 默认态（无图时）—— 恢复原始布局 */
  .dropzone:not(.has-image) {
    display: block; text-align: center; padding: 48px 24px;
  }
  .dropzone:not(.has-image) .ic,
  .dropzone:not(.has-image) .big,
  .dropzone:not(.has-image) .small { display: block; }
  .dropzone:not(.has-image) .ic { display: grid !important; place-items: center; }
  .dropzone.has-image .ic,
  .dropzone.has-image .big,
  .dropzone.has-image .small { display: none !important; }
  .hidden { display: none !important; }

  /* Left control steps (left-aligned form block below the hero dropzone) */
  .control-steps { text-align: left; margin-top: 8px; }

  /* Step card */
  .step { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 16px; background: var(--bg-soft); }
  .step-title { font-size: 14px; font-weight: bold; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  .step-title .num { background: var(--brand); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }

  /* 规格卡片 */
  .spec-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; }
  .spec-grid::-webkit-scrollbar { width: 5px; }
  .spec-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .spec-card { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; background: #fff; transition: all .15s; }
  .spec-card:hover { border-color: var(--brand); }
  .spec-card.active { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 2px rgba(17,168,168,.15); }
  .spec-card .spec-name { font-size: 13px; font-weight: bold; color: var(--ink); display: flex; align-items: center; gap: 5px; }
  .spec-card .spec-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.1); }
  .spec-card .spec-size { font-size: 10px; color: var(--ink-faint); margin-top: 3px; }
  .spec-card .spec-desc { font-size: 10px; color: var(--ink-soft); margin-top: 2px; }

  /* Inputs */
  select, input[type="number"], input[type="text"] { width: 30%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; color: var(--ink);    height: 35px; }
  select:focus, input:focus { outline: none; border-color: var(--brand); }
  .row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px;     margin-bottom: 20px;
    margin-top: 20px;}
  .row label { font-size: 13px; white-space: nowrap; min-width: 56px; color: var(--ink-soft); }
  .mm-info { font-size: 12px; color: var(--ink-soft); margin-top: 8px; background: var(--brand-light); border-radius: 8px; padding: 7px 10px; }
  .mm-info:empty { display: none; }

  /* 底色 */
  .swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
  .swatch { width: 36px; height: 36px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
  .swatch.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(17,168,168,.2); }
  .swatch span { position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
  .swatch-wrap { margin-bottom: 24px; }
  .hex-row { display: flex; gap: 8px; align-items: center; }
  .hex-row input[type="color"] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; }
  .hex-row input[type="text"] { font-family: Consolas, monospace; }

  /* Buttons */
  button { background: var(--brand); color: #fff; border: none; border-radius: 10px; min-height: 42px !important; font-size: 14px; cursor: pointer; width: 100%; transition: background .15s; font-family: inherit;     height: 100% !important;
    width: 100% !important; }
  button:hover { 
    border: 1.5px solid #10a8a8 !important;
    background: #0b6f6f;
  }
  button:disabled { background: #c5cdd3; cursor: not-allowed;     height: 100%;
    width: 100%;}
  button.secondary { background: #fff; color: var(--brand-dark); border: 1.5px solid var(--brand);     height: 100%;
    width: 100%;}
  button.secondary:hover { background: var(--brand-light);     height: 100%;
    width: 100%;}
/*  button.green { background: var(--good);     height: 100%;
    width: 100%;}
  button.green:hover { background: #237a34; }*/

  /* Sliders */
  .slider-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .slider-row label { font-size: 12px; min-width: 56px; color: var(--ink-soft); }
  .slider-row input[type="range"] { flex: 1; accent-color: var(--brand); }
  .slider-row .val { font-size: 12px; min-width: 40px; text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

  /* Status */
  .status { font-size: 12px; color: var(--ink-soft); background: var(--brand-light); border-radius: 8px; padding: 9px 10px; margin-top: 10px; min-height: 34px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
  .status.err { color: var(--danger); background: #fef2f2; }

  /* Tabs */
  .tabs { display: flex; gap: 6px; margin-bottom: 14px; justify-content: center; }
  .tab { padding: 9px 22px; border-radius: 999px; background: #fff; cursor: pointer; font-size: 14px; border: 1.5px solid var(--line); width: auto; color: var(--ink-soft); }
  .tab.active { background: var(--brand); color: #fff; border-color: transparent; font-weight: bold; }
  .tab-body { padding: 22px; flex: 1; display: none; flex-direction: column; align-items: center; }
  .tab-body.active { display: flex; }


.tab.active:hover {
    background: #0b6f6f;
    color: #fff;
    border-color: transparent;
    font-weight: bold;
    color: #ffffff !important;
    border: 1.5px solid #10a8a8 !important;
        transition: background .15s;
}

/*button:disabled:hover {
    background: #0b6f6f;
    color: #ffffff !important;
    border: 1.5px solid #10a8a8 !important;
    transition: background .15s;
    height: 40px !important;
}*/

.print-controls button:hover {
    background: #0b6f6f;
    color: #ffffff !important;
    border: 1.5px solid #10a8a8 !important;
    transition: background .15s;
    height: 40px !important;
}

  /* Canvas + print */
  .canvas-holder { background: repeating-conic-gradient(var(--brand-light) 0% 25%, #fff 0% 50%) 0 0/20px 20px; border: 1px solid var(--line); border-radius: 12px; display: inline-block; line-height: 0; max-width: 100%; }
  .block.side canvas { max-width: 100%; max-height: calc(127vh - 340px); height: auto; border-radius: 10px; }
  .print-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; justify-content: center; }
  .print-controls .field { display: flex; flex-direction: column; gap: 4px; }
  .print-controls .field label { font-size: 12px; color: var(--ink-faint); }
  .print-controls select { width: auto; min-width: 110px; }
  .print-controls button { width: auto; }
  .print-info { font-size: 13px; color: var(--ink); margin-bottom: 12px; background: var(--brand-light); border-radius: 8px; padding: 8px 12px; }
  .hint { font-size: 12px; color: var(--ink-faint); margin-top: 8px; line-height: 1.5; }

  /* Right side panel: preview (sticky, mirrors webp .block.side) */
  .block.side {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    align-self: stretch;
    border-top: none;
    margin-top: 0;
    padding: 40px 0 40px 36px;
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 0 0 calc(50% - 10px);
    min-width: 0;
    text-align: center;
    padding: 48px 65px 48px;
  }


@media screen and (max-width: 1441px) {
    .hero-split {
           width: 1253px !important;
    }
}

@media screen and (max-width: 1370px) {
    .hero-split {
           width: 1161px !important;
    }
}

@media screen and (max-width: 1300px) {
    .hero-split {
           width: 1075px !important;
    }
}

@media screen and (max-width: 1250px) {
    .hero-split {
           width: 85% !important;
    }
}
  /* Footer */
  footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; border-top: 1px solid var(--line); padding: 10px 32px; color: var(--ink-faint); font-size: 13px; text-align: center; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(8px); }
  .badge-local { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-light); color: var(--brand-dark); font-weight: 600; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
  .badge-local .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }

  @media (max-width: 860px) {

    /* 手机端改为上下堆叠，中间那根竖线不再需要，隐藏 */
    .hero-split::before { display: none; }
    /* 基础规则 .hero-split 用了 flex-direction: row !important，这里必须用 !important 才能覆盖，否则手机端两栏不堆叠、右侧预览溢出屏幕 */
    .hero-split { display: flex !important; flex-direction: column !important; gap: 0;         width: 100% !important;}
    .hero { flex: 0 0 auto !important; width: 100% !important; margin-bottom: 20px; padding: 20px;         border-radius: 0px;}
    .block.side {
      flex: 0 0 auto !important; width: 100% !important; max-width: none !important; border-left: none; border-top: 1px solid var(--line);
      padding: 20px; position: static !important; max-height: none; overflow: visible;
    }

/*    .wrap { padding: 0 20px; }*/
    /* 手机端规格卡片一行两个 */
    .spec-grid { grid-template-columns: 1fr 1fr; }
    /* 手机端预览面板加卡片背景 */
    .tab-body.active {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px;
      margin-top: 16px;
      background: var(--bg-soft);
    }
    /* 手机端：表单行允许换行，避免 宽/高/格式/大小上限 等字段被挤到横向溢出 */
    .row { flex-wrap: wrap; }
    .row > input[type="number"], .row > select { flex: 1 1 120px; min-width: 0; }
    /* 上传态（左图+右重新上传）在窄屏换行，避免挤压 */
    .dropzone.has-image { flex-wrap: wrap; }
    /* 固定底部 footer 在手机端缩小内边距、字号，避免文字被截断/顶到边缘 */
    footer.wrap { padding: 8px 16px; font-size: 12px; }
  }

  @media (max-width: 600px) {
    .hero {padding: 20px;        margin-bottom: 20px;        border-radius: 0px; }
    .hero h1 { font-size: 28px; margin: 0 0 8px; }
    .hero p.sub { font-size: 14px; }
    .dropzone { margin-top: 16px; padding: 28px 16px; }
    .dropzone .ic { width: 48px; height: 48px; margin: 0 auto 10px; }
    .dropzone .ic svg { width: 24px; height: 24px; }
    .dropzone .big { font-size: 16px; }
    .dropzone .small { font-size: 12px; margin-top: 4px; }
    /* 避免固定 footer 遮住最后一行结果 */
/*    main.wrap { padding-bottom: 70px; }*/
  }

/* ============================================================
   以下为「站点导航局部修正」样式（不动引入的 css/js）
   ============================================================ */
/* 局部修正：IDS 自身无 <header>，需把正文/侧栏避开固定顶部导航。
       站点导航断点在 950px：≥951px 显示 PC header（高约 120px），≤950px 显示手机顶栏 .top#top（高约 61px）。
       不动任何引入的 css/js。 */
    main.wrap { padding-top: 121px !important; width: 100%; }
    .block.side { 
      top: 120px !important; 
      display: block;
      opacity: 1;
          border-radius: var(--radius);
    transition: box-shadow .3s ease, border-color .3s ease;
    background: linear-gradient(157.87deg, hsl(0deg 0% 100% / 78%), hsl(0deg 0% 100% / 64%));
    box-shadow: 0 0 5px rgb(0 0 0 / 4%) !important;
    border: 1px solid #ffffffeb !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
        transform: translateY(0%);
    }
    @media screen and (max-width: 950px) {
      main.wrap { padding-top: 85px !important; }

      .block.side{
            max-height: none !important;
                    border-radius: 0px;
      }
      .block.side canvas{
        max-height: none !important;
      }
    }

    /* 修复 .hero-split 右侧预览塌陷：.block.side 用了 sticky + max-height:calc(100vh-148px)，
       窗口越矮右侧预览面板和 canvas 越小；给容器、预览面板、canvas 加最小/最大高度保底，
       避免在矮窗口下塌成一条。仅在桌面端生效，不动手机端堆叠。 */
    @media screen and (min-width: 951px) {
      .hero-split { min-height: max(calc(100vh - 220px), 620px) !important; }
      .block.side { min-height: 420px !important; max-height: max(calc(100vh - 148px), 460px) !important; }
/*      .block.side .canvas-holder { width: 100% !important; }*/
      .block.side canvas { display: block !important; width: 100% !important; height: auto !important; min-height: 280px !important; max-height: 480px !important; object-fit: contain !important; }
    }

    /* 视口高度 < 700px：取消右侧面板的 sticky 独立滚动，改为随整页一起滚动，
       否则右侧在矮窗口里会自己缩成一条可滚动小窗，体验差。 */
    @media screen and (min-width: 951px) and (max-height: 700px) {
      .block.side {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        overscroll-behavior: auto !important;
        min-height: 420px !important;
        align-self: flex-start !important;
        -webkit-transform: scale(1);
      }
    }

/* ============================================================
   深色模式适配：仅当 <html data-theme="dark"> 时生效（与站点主题切换同机制）。
   重新映射设计变量 + 覆盖页面内写死的浅色背景；不动任何引入的 css/js。
   ============================================================ */
:root[data-theme="dark"] {
  --brand: #11a8a8;
  --brand-dark: #6fe3e3;
  --brand-light: #0e2e2e;
  --ink: #e6edf3;
  --ink-soft: #aab4c0;
  --ink-faint: #7d8794;
  --line: #2a313c;
  --bg: #0d1117;
  --bg-soft: #161b22;
  --good: #3fb950;
  --danger: #f87171;
  --shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}

/* 卡片玻璃质感：左侧 hero / 右侧预览面板（写死的浅色渐变 + 白色边框需覆盖） */
[data-theme="dark"] .hero,
[data-theme="dark"] .block.side {
background: linear-gradient(157.87deg, rgb(22 27 34 / 45%), #0d111778) !important;
    border: 1px solid #3e4f6845 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .35) !important;
}

/* 表单控件：写死的 #fff 背景；仅作用于页面正文（main.wrap），不动引入的导航/搜索框。
   iconfont.css 有 .bar8 input !important，正文不在 .bar8 内，这里加 !important 足够覆盖页面内 #fff。 */
[data-theme="dark"] main.wrap select,
[data-theme="dark"] main.wrap input[type="number"],
[data-theme="dark"] main.wrap input[type="text"],
[data-theme="dark"] main.wrap input[type="color"] {
  background: #0d1117 !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}


[data-theme="dark"] button.secondary:hover{
      background: var(--brand-light);
}

/* 上传区 / 缩略图 / 重新上传按钮：写死的 #fff */
[data-theme="dark"] .dropzone { background: linear-gradient(180deg, var(--brand-light), #11151b);     border: 2px dashed #2c4655;}
[data-theme="dark"] .dropzone .ic { background: #161b22; }
[data-theme="dark"] .dropzone.has-image .dz-thumb { background: #161b22; border-color: var(--line); }
[data-theme="dark"] .dropzone.has-image .dz-replace { background: #161b22; border-color: var(--brand); }

/* 规格卡片：写死的 #fff */
[data-theme="dark"] .spec-card { background: var(--bg-soft); }
[data-theme="dark"] .spec-card.active { background: var(--brand-light); }

/* 次级按钮 / 禁用按钮 */
[data-theme="dark"] button.secondary { background: #161b22; color: var(--brand-dark); }
[data-theme="dark"] button:disabled { background: #30363d; color: #8b949e; 
    background: #30363d;
    color: #8b949e;
    border: 1.5px solid #29313c;
    border-color: var(--line);
    color: var(--ink-soft);

}

/* 选项卡 */
[data-theme="dark"] .tab { background: #161b22; border-color: var(--line); color: var(--ink-soft); }
[data-theme="dark"] .tab.active { background: var(--brand); color: #fff; }

/* 预览画布棋盘格：写死的 #fff */
[data-theme="dark"] .canvas-holder { background: repeating-conic-gradient(var(--brand-light) 0% 25%, #11151b 0% 50%) 0 0/20px 20px; border-color: var(--line); }

/* 错误状态提示 */
[data-theme="dark"] .status.err { background: #2a1416; color: var(--danger); }

/* 固定底部 footer：写死的白色磨砂 */
[data-theme="dark"] footer { background: rgba(13,17,23,.92); border-top-color: var(--line); color: var(--ink-faint); }