/* LED显示屏结构图纸自动生成工具 - 前端页面样式 */
/* ===== 顶部标题（与 .am-container 同宽对齐） ===== */
/* 系统 common.css 中 .am-container 的 max-width 随屏幕宽度变化：
   ≤1024px → 100%，1025-1259px → 100rem(1600px)，1260-1599px → 120rem(1920px)，≥1600px → 150rem(2400px)
   .page-header-simple 必须在每个断点都匹配，否则标题卡会比主体窄 */
.page-header-simple{width:100%;max-width:100rem;margin:0 auto;padding:16px 0 0;box-sizing:border-box;}
.page-header-simple .title-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:28px 16px;text-align:center;margin-bottom:20px;}
.page-header-simple .title-card h1{font-size:22px;font-weight:600;color:#111;margin:0;}
@media only screen and (min-width:1260px){
  .page-header-simple{max-width:120rem;}
}
@media only screen and (min-width:1600px){
  .page-header-simple{max-width:150rem;}
}
@media only screen and (max-width:1024px){
  .page-header-simple{max-width:100%;padding-left:1.2rem;padding-right:1.2rem;}
}
.plugins-drawing-generator { padding: 0px 0; }
.dg-header { background: #fff; color: #000; padding: 12px 20px; text-align: center; font-size: 16px; font-weight: 600; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.dg-header a { color: #fff; text-decoration: none; }
.dg-container { display: grid; grid-template-columns: 360px 1fr; gap: 16px; }
.dg-panel { background: #fff; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.dg-panel-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #e8e8e8; color: #1a73e8; display: flex; align-items: center; gap: 8px; }
        .dg-label-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: #666; position: relative; }
        .dg-label-toggle label { cursor: pointer; }
        .dg-label-toggle input[type="checkbox"] { position: static; opacity: 1; margin: 0; width: auto; height: auto; }
        .dg-options-bar { display: flex; gap: 16px; justify-content: center; padding: 8px 0; border-top: 1px solid #f0f0f0; }
        .dg-opt-label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #666; cursor: pointer; }
        .dg-opt-label input[type="checkbox"] { position: static; opacity: 1; margin: 0; width: auto; height: auto; }
.dg-form-group { margin-bottom: 14px; }
.dg-form-group label { display: block; font-size: 13px; font-weight: 500; color: #555; margin-bottom: 5px; }
.dg-form-row { display: flex; gap: 8px; }
.dg-form-row > div { flex: 1; min-width: 0; }
.dg-form-control { width: 100%; padding: 9px 10px; border: 1.5px solid #d9d9d9; border-radius: 6px; font-size: 14px; text-align: center; font-family: 'Consolas', 'Courier New', monospace; -webkit-appearance: none; -moz-appearance: textfield; }
.dg-form-control:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,0.1); }
.dg-form-control::-webkit-outer-spin-button,
.dg-form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-input-suffix { display: flex; align-items: center; min-width: 0; }
.dg-input-suffix input { border-radius: 6px 0 0 6px; flex: 1; min-width: 0; padding: 9px 8px; }
.dg-input-suffix .dg-suffix { padding: 9px 8px; background: #f5f5f5; border: 1.5px solid #d9d9d9; border-left: none; border-radius: 0 6px 6px 0; font-size: 12px; color: #888; white-space: nowrap; }
.dg-border-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.dg-border-item { display: flex; align-items: center; }
.dg-border-label { font-size: 11px; color: #888; white-space: nowrap; margin-right: 3px; width: 36px; text-align: right; }
.dg-border-item input { width: 79px; padding: 6px 4px; font-size: 12px; border: 1.5px solid #d9d9d9; border-radius: 4px 0 0 4px; border-right: none; text-align: center; outline: none; box-sizing: border-box; -moz-appearance: textfield; }
.dg-border-item input::-webkit-outer-spin-button, .dg-border-item input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-border-item .dg-suffix { padding: 6px 4px; font-size: 10px; background: #f5f5f5; border: 1.5px solid #d9d9d9; border-left: none; border-radius: 0 4px 4px 0; white-space: nowrap; }
.dg-border-item input:focus { outline: none; border-color: #1a73e8; }
.dg-spec-table { border: 1.5px solid #d9d9d9; border-radius: 6px; overflow: hidden; margin-bottom: 4px; }
.dg-spec-header { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; background: #f5f5f5; padding: 5px 0; font-size: 10px; color: #888; text-align: center; border-bottom: 1.5px solid #d9d9d9; }
.dg-spec-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; border-bottom: 1px solid #eee; }
.dg-spec-row:last-child { border-bottom: none; }
.dg-spec-no { text-align: center; font-size: 13px; font-weight: 600; color: #1a73e8; background: #f8faff; }
.dg-spec-input { width: 100%; padding: 7px 4px; font-size: 13px; border: none; text-align: center; outline: none; font-family: 'Consolas', 'Courier New', monospace; -webkit-appearance: none; -moz-appearance: textfield; }
.dg-spec-input:focus { background: #e8f0fe; }
.dg-locked { width: 100%; padding: 7px 4px; font-size: 13px; border: none; text-align: center; background: #f5f5f5; color: #aaa; font-family: 'Consolas', 'Courier New', monospace; -webkit-appearance: none; -moz-appearance: textfield; }
.dg-spec-hint { font-size: 10px; color: #999; line-height: 1.6; margin-top: 4px; }
.dg-add-btn { display: block; width: 100%; padding: 8px; margin-top: 6px; border: 1.5px dashed #d9d9d9; border-radius: 6px; background: #fafafa; color: #1a73e8; font-size: 13px; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.dg-add-btn:hover { border-color: #1a73e8; background: #e8f0fe; }
.dg-extra-item { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid #e8e8e8; border-radius: 4px; margin-top: 4px; background: #fff; }
.dg-extra-label { font-size: 12px; font-weight: 600; color: #1a73e8; min-width: 32px; text-align: center; }
.dg-extra-desc { font-size: 10px; color: #999; white-space: nowrap; font-family: 'Consolas','Courier New',monospace; }
.dg-extra-unit { font-size: 10px; color: #888; }
.dg-extra-info { font-size: 10px; color: #aaa; margin-left: auto; }
.dg-del-btn { background: #ff4d4f; color: #fff; border: none; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; flex-shrink: 0; }
.dg-del-btn:hover { background: #d9363e; }
.dg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.dg-btn-success { background: #34a853; color: #fff; }
.dg-btn-success:hover { background: #2d8e47; }
.dg-btn-primary { background: #1a73e8; color: #fff; }
.dg-btn-primary:hover { background: #1557b0; }
.dg-btn-block { width: 100%; margin-top: 6px; }
.dg-info-card { background: #f8f9fa; border-radius: 8px; padding: 14px; margin-top: 14px; }
.dg-info-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #eee; font-size: 12px; }
.dg-info-row:last-child { border-bottom: none; }
.dg-info-row .dg-label { color: #888; }
.dg-info-row .dg-value { font-weight: 600; color: #333; }
.dg-info-row .dg-value-highlight { color: #1a73e8; font-size: 14px; }
.dg-drawing-wrap { background: #fff; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: auto; }
.dg-drawing-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dg-drawing-toolbar h2 { font-size: 15px; font-weight: 600; color: #333; }
.dg-zoom-bar { display: flex; align-items: center; gap: 6px; }
.dg-zoom-btn { width: 28px; height: 28px; border: 1.5px solid #d9d9d9; border-radius: 6px; background: #fff; cursor: pointer; font-size: 16px; color: #555; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.dg-zoom-btn:hover { border-color: #1a73e8; color: #1a73e8; }
.dg-zoom-label { font-size: 12px; color: #888; min-width: 42px; text-align: center; }
.dg-drawing-area { background: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 16px; overflow: auto; min-height: 380px; display: flex; justify-content: center; align-items: center; position: relative; touch-action: pan-y; }
.dg-disclaimer { margin-top: 14px; padding: 12px 14px; background: #fff7e6; border: 1px solid #ffd591; border-radius: 8px; }
.dg-disclaimer p { margin: 0; font-size: 11px; color: #ad6800; line-height: 1.8; }
svg.dg-drawing { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); max-width: 100%; height: auto; transform-origin: center; }
.dg-drawing-area.grabbing svg.dg-drawing { cursor: grabbing !important; }
.dg-drawing-placeholder { font-size: 22px; color: #bbb; text-align: center; user-select: none; }
.dg-preset-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; justify-content: center; }
.dg-preset-btn { padding: 6px 10px; font-size: 12px; border: 1.5px solid #d9d9d9; border-radius: 4px; background: #fff; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.dg-preset-btn:hover, .dg-preset-btn.active { border-color: #1a73e8; color: #1a73e8; background: #e8f0fe; }
.dg-btn-wrap { display: flex; gap: 10px; justify-content: center; }
@media (max-width: 860px) {
    .dg-container { grid-template-columns: 1fr; }
    .dg-drawing-area { min-height: 200px; padding: 8px; }
    .dg-drawing-placeholder { font-size: 16px; }
    .dg-drawing-wrap { padding: 10px; }
    .dg-disclaimer p { font-size: 10px; }
    .dg-btn-wrap { flex-direction: column; align-items: stretch; }
    .dg-btn-wrap .dg-btn { width: 100%; }
}
@media (max-width: 640px) {
    /* .page-header-simple 沿用 ≤1024px 的样式：max-width:100%、padding-left/right:1.2rem、标题卡保留圆角（与大屏一致） */
    .dg-header { font-size: 15px; padding: 10px 12px; text-align: center; z-index: 100; }
    .dg-container { gap: 6px; }
    .dg-panel { padding: 12px 10px; border-radius: 6px; }
    .dg-panel-title { font-size: 14px; margin-bottom: 10px; padding-bottom: 8px; }
    .dg-form-group label { font-size: 12px; margin-bottom: 3px; }
    .dg-form-control { font-size: 16px; padding: 10px 8px; height: auto; }
    .dg-input-suffix .dg-suffix { font-size: 11px; padding: 10px 6px; }
    .dg-spec-header span { font-size: 9px; }
    .dg-spec-input { font-size: 14px; }
    .dg-drawing-wrap { padding: 6px; }
    .dg-drawing-area { min-height: 150px; padding: 4px; }
    .dg-drawing-placeholder { font-size: 14px; }
    .dg-drawing-toolbar h2 { font-size: 13px; }
    .dg-btn { font-size: 14px; padding: 10px 14px; }
    .dg-info-card { padding: 10px 8px; }
    .dg-info-row { font-size: 11px; }
    .dg-disclaimer { margin-top: 10px; padding: 8px 10px; }
    .dg-disclaimer p { font-size: 10px; line-height: 1.6; }
    .dg-zoom-btn { width: 36px; height: 36px; font-size: 18px; }
    .dg-preset-btn { font-size: 11px; padding: 6px 10px; }
    .dg-options-bar { flex-wrap: wrap; gap: 6px; }
    .dg-opt-label { font-size: 11px; }
    .dg-border-item input { width: 56px; font-size: 16px; }
    .dg-canvas-wrap { max-width: 100% !important; }
    img.dg-drawing, svg.dg-drawing { max-width: 100% !important; }
}
        /* ===== 图片预览浮层（持久化DOM：双指缩放+单指拖动+长按保存） ===== */
        #dg-img-preview { position: fixed; inset: 0; z-index: 99999; background: #000; display: none; align-items: center; justify-content: center; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
        #dg-img-preview.show { display: flex; }
        #dg-img-preview .pv-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; -webkit-user-drag: none; pointer-events: auto; touch-action: manipulation; -webkit-touch-callout: default; -webkit-user-select: default; user-select: default; }
        #dg-img-preview .pv-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; border: none; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
        #dg-img-preview .pv-close:active { background: rgba(255,255,255,0.3); }
        #dg-img-preview .pv-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.9); font-size: 13px; background: rgba(0,0,0,0.5); padding: 8px 18px; border-radius: 20px; white-space: nowrap; z-index: 2; pointer-events: none; }

        /* ===== 水印容器 ===== */
        .dg-canvas-wrap { position: relative; display: inline-block; max-width: 100%; }
        .dg-watermark-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 5;
            overflow: hidden;
        }