:root { --bg: #f1f5f9; --card-bg: #ffffff; --primary: #2563eb; --primary-hover: #1d4ed8; --primary-light: #eff6ff; --text: #0f172a; --text-secondary: #475569; --border: #e2e8f0; --danger: #dc2626; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow: 0 10px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.05); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; --preview-h: clamp(420px, calc(100vh - 300px), 720px); } * { margin:0; padding:0; box-sizing:border-box; } .fw-500 { font-weight:500 !important; } .fw-600 { font-weight:600 !important; } .hint-gap { margin-left:12px !important; color:var(--text-secondary) !important; font-size:0.85rem !important; } .preview-placeholder { min-height:300px !important; display:flex !important; justify-content:center !important; align-items:center !important; background:#f8fafc !important; border-radius:1rem !important; } .pv-shot { max-width:100% !important; height:auto !important; border-radius:0.5rem !important; box-shadow:0 6px 18px rgba(0,0,0,0.06) !important; } body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100vh; line-height:1.5; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } .header { background:var(--card-bg); border-bottom:1px solid var(--border); padding:0 24px; position:sticky; top:0; z-index:100; box-shadow:var(--shadow-sm); } .header-inner { max-width: 1350px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; padding: 10px 0 8px; min-height: 0; width: 100%; } .tab-nav { display:flex; gap:4px; background:#f1f5f9; border-radius:28px; padding:4px; flex-wrap:nowrap; flex-shrink:0; } .tab-btn { padding:8px 16px; border-radius:24px; border:none; cursor:pointer; font-size:0.85rem; font-weight:500; background:transparent; color:var(--text-secondary); transition:var(--transition); white-space:nowrap; font-family:var(--font); } .tab-btn.active { background:#fff; color:var(--primary); box-shadow:0 1px 3px rgba(0,0,0,0.06); font-weight:600; } .tab-btn:hover:not(.active) { color:var(--text); background:rgba(255,255,255,0.6); } .main-container { max-width:1400px; margin:0 auto; padding:24px 24px 5px; } .tab-panel .card:last-child { margin-bottom:0; } .tab-panel { display:none; } .tab-panel.active { display:block; } .card { background:var(--card-bg); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow); margin-bottom:20px; border:1px solid var(--border); } .card-title { font-size:1.1rem; font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:10px; color:var(--text); border-bottom:1px solid #eef2f6; padding-bottom:14px; } .card-title .icon-dot { width:10px; height:10px; border-radius:50%; background:var(--primary); flex-shrink:0; } .split-layout { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; } .split-left { flex:1 1 280px; min-width:200px; display:flex; flex-direction:column; gap:12px; } .split-right { flex:1 1 340px; min-width:240px; display:flex; flex-direction:column; gap:12px; padding-top:0 !important; margin-top:0 !important; } #tab-perf-stamp .settings-col { flex:0 0 330px; min-width:280px; } #tab-perf-stamp .preview-col { flex:1.6 1 460px; min-width:340px; } #tab-scan-effect .settings-col { flex:0 0 340px; min-width:280px; } .upload-area { border:2px dashed #cbd5e1; border-radius:var(--radius); padding:20px 16px; text-align:center; cursor:pointer; transition:var(--transition); background:#fafbfc; position:relative; user-select:none; } .upload-area.drag-over { border-color:var(--primary); background:var(--primary-light); } .upload-area .primary-text { font-weight:500; color:var(--text); } .upload-area .secondary-text { font-size:0.8rem; color:var(--text-secondary); margin-top:6px; } .upload-area input[type="file"] { position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; cursor:pointer; } .file-list { border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; } .file-item { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid #f1f5f9; cursor:grab; } .file-item:last-child { border-bottom:none; } .file-item.dragging { opacity:0.5; background:#f8fafc; } .file-item.drag-over { background:#e6f0ff; } .drag-handle { margin-right:12px; color:#94a3b8; font-size:18px; cursor:grab; } .file-info { flex:1; display:flex; align-items:center; gap:10px; } .file-name { font-weight:500; word-break:break-word; } .file-pages, .file-size { font-size:0.75rem; background:#f1f5f9; padding:2px 8px; border-radius:20px; } .remove-file { background:none; border:none; color:#94a3b8; font-size:18px; cursor:pointer; padding:4px 8px; border-radius:6px; } .remove-file:hover { background:#fee2e2; color:#dc2626; } .empty-message { text-align:center; padding:28px; color:var(--text-secondary); } .empty-state { text-align:center; padding:40px 20px; color:var(--text-secondary); } .config-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:12px 0 4px; } .config-label { font-weight:500; color:var(--text-secondary); display:flex; align-items:center; gap:8px; } .config-input { padding:10px 14px; border:1px solid #cbd5e1; border-radius:12px; font-size:0.9rem; font-family:var(--font); } .config-hint { font-size:0.8rem; color:var(--text-secondary); } .radio-group { display:flex; gap:16px; flex-wrap:wrap; align-items:center; } .radio-group label { display:flex; align-items:center; gap:6px; cursor:pointer; } .action-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .btn { display:inline-flex; align-items:center; gap:5px; padding:10px 20px; border-radius:40px; font-weight:500; font-size:0.85rem; cursor:pointer; transition:var(--transition); font-family:var(--font); background:#fff; border:1px solid #cbd5e1; color:var(--text); } .btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 4px 10px rgba(37,99,235,0.2); } .btn-primary:hover:not(:disabled) { background:var(--primary-hover); } .btn-danger { background:#fff; color:var(--danger); border:1px solid var(--danger); } .btn-danger:hover:not(:disabled) { background:#fee2e2; } .btn-sm { padding:6px 14px; font-size:0.8rem; } .btn:disabled { opacity:0.5; cursor:not-allowed; } .status { font-size:0.85rem; color:var(--text-secondary); } .progress { width:100%; height:6px; background:#e2e8f0; border-radius:3px; margin-top:12px; overflow:hidden; display:none; } .progress-bar { height:100%; background:var(--primary); width:0%; transition:width 0.3s; } .preview-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-top:16px; } .preview-item { position:relative; border-radius:var(--radius-sm); overflow:hidden; background:#fff; border:2px solid var(--border); box-shadow:var(--shadow-sm); cursor:grab; aspect-ratio:0.72; display:flex; flex-direction:column; } .preview-item:hover { border-color:#b0b8e0; } .preview-item.dragging { opacity:0.45; border-style:dashed; border-color:var(--primary); } .preview-item.selected { outline:3px solid #e74c3c; outline-offset:-3px; } .preview-item.selected .page-thumb { opacity:0.45; } .checkbox-wrap { position:absolute; top:6px; left:6px; z-index:5; background:rgba(255,255,255,0.85); border-radius:4px; padding:2px; } .checkbox-wrap input { width:16px; height:16px; cursor:pointer; accent-color:var(--primary); } .page-thumb { width:100%; flex:1; min-height:0; object-fit:contain; background:#fafafa; } .page-info { padding:6px 8px; font-size:0.7rem; color:var(--text-secondary); text-align:center; background:#fafbfc; } .action-btns { position:absolute; top:6px; right:6px; display:flex; gap:3px; opacity:0; transition:var(--transition); } .preview-item:hover .action-btns { opacity:1; } .btn-icon-download { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.95); border:1px solid var(--border); cursor:pointer; font-size:0.75rem; display:flex; align-items:center; justify-content:center; color:var(--primary); } .btn-icon-download:hover { background:var(--primary); color:#fff; } .usage-note { font-size:0.8rem; color:var(--text-secondary); margin:0 0 12px; line-height:1.6; } .scale-hint { font-size:0.8rem; color:var(--text-secondary); margin-left:8px; white-space:nowrap; } .about-body { line-height:2; color:var(--text-secondary); font-size:1rem; text-align:left; padding:0 10px; } .about-body p { margin:0 0 10px; } .about-body a { color:var(--primary); } .about-highlight { margin:20px 0; padding:15px; background:var(--primary-light); border-left:4px solid var(--primary); border-radius:8px; } .about-highlight p { margin:0 0 8px; } .about-highlight p:last-child { margin-bottom:0; } .about-highlight-title { color:var(--text); font-weight:600; } .about-highlight-notice { background:#fff7ed; border-left-color:#f59e0b; color:#92400e; } .about-meta { margin-top:16px; font-size:0.8rem; color:var(--text-secondary); } .example-badge { background: #dbeafe; color: #1e40af; padding: 2px 10px; border-radius: 30px; font-size: 12px; font-weight: 500; margin-left: 10px; } .scale-select { padding: 0.6rem 0.8rem; border: 1px solid #e2e8f0; border-radius: 0.8rem; font-size: 0.9rem; background: white; outline: none; font-family: var(--font); } .range-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .range-row input { flex: 1; padding: 0.55rem 0.7rem; border: 1px solid #e2e8f0; border-radius: 0.7rem; font-size: 0.85rem; outline: none; background: white; font-family: var(--font); } .range-row input[type="range"] { padding: 0; border: none; background: transparent; } .range-row input[type="number"]:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; } .check-label { display: flex; align-items: center; gap: 0.2rem; font-size: 0.8rem; white-space: nowrap; cursor: pointer; } .pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .pv-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 14px; border-radius: 40px; border: 1px solid #cbd5e1; background: #fff; color: var(--text); font-family: var(--font); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: var(--transition); } .nav-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .nav-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { min-width: 64px; padding: 2px 10px; border-radius: 20px; background: #f1f5f9; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; } .pv-bar button, .pv-nav button, .bm-toolbar .btn-sm, .mode-btn, .apply-all-btn { height: 31px; } .mode-selector { display: flex; gap: 0.4rem; align-items: center; margin-left: auto; flex-wrap: wrap; } .mode-btn { display: inline-flex; align-items: center; border: 1px solid #cbd5e1; background: white; padding: 0 14px; border-radius: 40px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: var(--transition); white-space: nowrap; font-family: var(--font); } .mode-btn.active { background: var(--primary); color: white; border-color: var(--primary); } .apply-all-btn { display: inline-flex; align-items: center; background: none; border: 1px solid #94a3b8; padding: 0 14px; border-radius: 40px; font-size: 0.8rem; cursor: pointer; color: #475569; font-family: var(--font); transition: var(--transition); } .ratio-badge { background: #e0e7ff; color: #3730a3; padding: 0.2rem 0.8rem; border-radius: 1rem; font-weight: 600; font-size: 0.8rem; } .canvas-container { position: relative; background: #f8fafc; border-radius: 1rem; display: flex; justify-content: center; align-items: center; overflow: auto; padding: 0.5rem; box-shadow: inset 0 2px 8px rgba(0,0,0,0.03); height: var(--preview-h); min-height: 0; } #tab-split-book .pv-sep { flex:0 0 auto; width:1px; height:22px; background:#e2e8f0; margin:0 4px; } #tab-booklet-split .module-body .settings-col { flex:0 0 40%; min-width:300px; } #tab-booklet-split .module-body .preview-col { flex:1 1 0; min-width:260px; } #tab-img2pdf .pv-options-bar > .img2pdf-margin-row { flex:0 0 100%; } #tab-img2pdf .img2pdf-margin-ops { justify-content:center; } #tab-img2pdf .img2pdf-toolbar-row { flex:0 0 100%; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:12px; border-top:1px solid #eef2f6; } #tab-img2pdf .img2pdf-toolbar-row .shortcut-hint { margin-right:auto; } .floating-tooltip { position: fixed; pointer-events: none; background: rgba(15, 23, 42, 0.85); color: white; padding: 0.25rem 0.7rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; display: none; z-index: 999; } .legend { display: flex; gap: 1.5rem; font-size: 0.75rem; color: #64748b; } .legend span::before { content: "●"; margin-right: 0.2rem; color: #ef4444; } .module-top { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid #eef2f6; } .module-top .note-col { flex:0 1 660px; min-width:260px; max-width:660px; display:flex; flex-direction:column; gap:6px; } .module-top .note-col .usage-note { margin:0; } .module-top .upload-col { flex:0 0 340px; order:-1; min-width:240px; display:flex; flex-direction:column; gap:10px; align-self:center; } #tab-blueprint .pv-options-bar .action-bar, #tab-compress .pv-options-bar .action-bar, #tab-encrypt .pv-options-bar .action-bar, #tab-remove-bookmarks .pv-options-bar .action-bar, #tab-redact .pv-options-bar .action-bar:has(.btn-primary), #tab-flatten .pv-options-bar .action-bar, #tab-unlock .pv-options-bar .action-bar, #tab-meta .pv-options-bar .action-bar, #tab-reverse .pv-options-bar .action-bar, #tab-pad-even .pv-options-bar .action-bar, #tab-rotate-single .pv-options-bar .action-bar { flex-basis:100%; flex-direction:column; align-items:center; gap:6px; } #tab-redact .red-canvas-container{ position:relative; background:#f8fafc; border-radius:16px; padding:12px; display:flex; justify-content:center; align-items:flex-start; height:var(--preview-h); min-height:0; overflow:auto; } #tab-redact .red-stage{ position:relative; line-height:0; box-shadow:0 4px 16px rgba(0,0,0,0.12); } #tab-redact #red-canvas{ display:block; background:#fff; } #tab-redact #red-overlay{ position:absolute; left:0; top:0; width:100%; height:100%; cursor:crosshair; touch-action:none; } #tab-redact .red-hint{ font-size:0.85rem; color:var(--text-secondary); margin-top:8px; } .module-top .upload-col .upload-area { width:100%; } .module-body { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; } .module-body .settings-col { flex:0 0 300px; min-width:260px; display:flex; flex-direction:column; gap:4px; } .module-body .preview-col { flex:1 1 420px; min-width:280px; display:flex; flex-direction:column; gap:10px; } .module-body .preview-full { flex:1 1 100%; min-width:0; display:flex; flex-direction:column; gap:10px; } .pv-options-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .pv-options-bar .config-row { margin:0; } .pv-options-bar .progress { margin-top:0; } .pv-options-bar .opt-group, .module-body .settings-col .opt-group { display:flex; align-items:center; flex-wrap:wrap; row-gap:6px; gap:10px; padding:6px 14px; background:#f8fafc; border:1px solid #eef2f6; border-radius:10px; min-height:50px; } .pv-options-bar .opt-group .config-input, .module-body .settings-col .opt-group .config-input { padding:6px 12px; } @media (max-width:768px) { .module-top, .module-body { flex-direction:column; } .module-top .note-col, .module-top .upload-col, .module-body .settings-col, .module-body .preview-col, #tab-meta .module-body .preview-full { flex:1 1 auto; width:100%; min-width:0; } .module-top .note-col { max-width:none; } } @media (max-width:768px) { .tab-nav { max-width: 100%; justify-content: flex-start; } .split-layout { flex-direction:column; } .split-left, .split-right { flex:1 1 auto; } .config-row { flex-direction:column; align-items:flex-start; } } .bookmark-tree-item { margin: 2px 0; } .bookmark-tree-label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; transition: background 0.15s; } .bookmark-tree-label:hover { background: #f1f5f9; } .bookmark-tree-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); flex-shrink: 0; } .bookmark-tree-title { font-size: 0.9rem; color: var(--text); flex: 1; } .bookmark-tree-page { font-size: 0.75rem; background: #e2e8f0; padding: 2px 8px; border-radius: 20px; white-space: nowrap; color: var(--text-secondary); } .bookmark-tree-children { margin-left: 24px; border-left: 2px solid #e2e8f0; padding-left: 8px; } #tab-pagenum .split-left, #tab-watermark .split-left { gap: 6px; } #tab-pagenum .config-row{ margin: 4px 0 2px; } #tab-pagenum .config-label{ min-width: 70px; } .color-preset { display: inline-block; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s; } .color-preset:hover { border-color: #999; } .color-preset.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,0.2); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 6px; } .tool-card { background: var(--card-bg); border-radius: var(--radius-lg); padding: 6px 12px; text-align: center; cursor: pointer; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); user-select: none; } .tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--primary); } .tool-icon { font-size: 30px; margin-bottom: 10px; } .tool-name { font-weight: 600; font-size: 0.9rem; color: var(--text); margin-bottom: 4px; } .tool-desc { font-size: 0.75rem; color: var(--text-secondary); } .tool-card.page-ops-card, .tool-card.convert-ops-card, .tool-card.enhance-ops-card { border-top: 1px solid var(--border); } .mark-tools{ display:flex; flex-wrap:wrap; gap:6px; } .mark-tool{ padding:6px 10px; border:1px solid #e2e8f0; background:#fff; border-radius:8px; cursor:pointer; font-size:0.8rem; transition:.15s; } .mark-tool:hover{ border-color:#6366f1; } .mark-tool.active{ background:#6366f1; color:#fff; border-color:#6366f1; } .mark-colors{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .color-swatch{ width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px #cbd5e1; transition:.15s; } .color-swatch:hover{ transform:scale(1.1); } .color-swatch.active{ box-shadow:0 0 0 2px #6366f1; } #mark-custom-color{ width:34px; height:28px; border:1px solid #e2e8f0; border-radius:6px; padding:0; cursor:pointer; background:#fff; } #tab-mark .mark-zoom-sep{ width:1px; height:20px; background:#e2e8f0; margin:0 4px; } #tab-mark .canvas-scroll{ flex:1 1 auto; height:var(--preview-h); min-height:0; overflow:auto; display:flex; background:#f1f5f9; border-radius:10px; padding:12px; box-shadow:inset 0 1px 3px rgba(0,0,0,.06); } #tab-mark #mark-canvas{ margin:auto; display:block; box-shadow:0 2px 14px rgba(0,0,0,.18); background:#fff; border-radius:6px; } #tab-mark .mark-text-editor{ position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; z-index:1200; } #tab-mark .mark-text-editor-box{ background:#fff; border-radius:12px; padding:18px; width:min(460px,92vw); box-shadow:0 12px 48px rgba(0,0,0,.35); } #tab-mark .mark-text-editor-title{ font-weight:600; font-size:0.95rem; margin-bottom:10px; color:#0f172a; } #tab-mark textarea#mark-text-input{ width:100%; height:130px; resize:vertical; padding:10px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px; line-height:1.6; font-family:inherit; outline:none; } #tab-mark textarea#mark-text-input:focus{ border-color:#6366f1; } #tab-mark .mark-text-editor-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; } .step-num{ width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:0.76rem; font-weight:600; flex:0 0 auto; } .logo { font-weight: 700; font-size: 1.3rem; color: var(--text); white-space: nowrap; flex-shrink: 0; cursor: pointer; position: relative; display: inline-block; } .logo::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--primary); transition: width 0.3s ease; } .logo:hover::after { width: 100%; } @keyframes shake-home { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-3px); } 75% { transform: translateY(3px); } } .shake-once { animation: shake-home 0.3s ease-in-out; } .emoji-icon { width: 1.5em; height: 1.5em; vertical-align: middle; flex-shrink: 0; } .emoji-inline { margin-right: 0.25em; } #tab-mark .config-row[data-tools].hidden-tool { display: none; } #tab-mark .config-row[data-tools] { overflow-x: visible; overflow-y: hidden; } #tab-mark .mark-colors { padding-left: 2px; } .fav-star-btn { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; cursor: pointer; color: #cbd5e1; border-radius: 50%; opacity: 1; z-index: 2; transition: opacity var(--transition), color var(--transition), transform var(--transition); } .fav-star-btn:hover { color: #f59e0b; transform: scale(1.15); } .fav-star-btn:active { transform: scale(0.88); } .fav-star-svg { width: 18px; height: 18px; display: block; } .fav-star-svg path { fill: transparent; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: fill var(--transition); } .fav-star-btn.fav--active { color: #f59e0b; } .fav-star-btn.fav--active .fav-star-svg path { fill: #f59e0b; stroke: #f59e0b; } .fav-panel-star { position: static; margin-left: 0; width: 24px; height: 24px; flex-shrink: 0; } .fav-panel-star::after { display: none; } .fav-section { margin-bottom: 24px; padding: 16px; background: var(--primary-light); border: 1px solid var(--border); border-radius: var(--radius-lg); } .fav-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .fav-title { font-weight: 600; font-size: 0.95rem; color: var(--text); } .fav-actions { display: flex; gap: 6px; } .fav-btn { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary); font-size: 0.78rem; font-family: var(--font); cursor: pointer; transition: var(--transition); } .fav-btn:hover { color: var(--primary); border-color: var(--primary); } .fav-btn:active { transform: scale(0.96); } .fav-help { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); background: #f8fafc; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.7; } .fav-help strong { color: var(--text); } .fav-help ul { margin: 4px 0 6px; padding-left: 18px; } .fav-help-toggle { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; } .fav-help-toggle:hover { text-decoration: underline; } .fav-card { touch-action: none; } .fav-card.fav-dragging { opacity: 0.45; transform: none !important; } .fav-drop-indicator { border: 2px dashed var(--primary); background: var(--primary-light); border-radius: var(--radius-lg); min-height: 118px; opacity: 0.75; } .home-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } .home-search { position: relative; flex: 0 1 320px; max-width: 320px; min-width: 200px; } .home-search input { width: 100%; height: 38px; padding: 0 36px 0 38px; border: 1px solid var(--border); border-radius: 20px; background: #fafbfc; color: var(--text); font-size: 0.85rem; font-family: var(--font); outline: none; transition: var(--transition); } .home-search input::-webkit-search-cancel-button { display: none; } .home-search input:focus { border-color: var(--primary); background: var(--card-bg); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); } .home-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; pointer-events: none; } .home-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: none; border-radius: 50%; background: transparent; color: var(--text-secondary); font-size: 16px; line-height: 1; cursor: pointer; display: none; } .home-search-clear:hover { background: var(--border); } .home-search.has-value .home-search-clear { display: block; } .home-cat-nav { display: flex; gap: 6px; flex-wrap: wrap; } .home-cat-chip { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary); font-size: 0.78rem; font-family: var(--font); cursor: pointer; white-space: nowrap; transition: var(--transition); } .home-cat-chip:hover { border-color: var(--primary); color: var(--primary); } .home-result { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 12px; } .home-count { color: var(--primary); font-weight: 700; } .is-hidden { display: none !important; } .cat-group { margin-bottom: 24px; scroll-margin-top: calc(var(--header-h, 60px) + 12px); } .cat-group[data-cat="1"], #tab-home .fav-card[data-cat="1"] { --cat: #4f46e5; --cat-soft: #e0e7ff; --cat-text: #4338ca; } .cat-group[data-cat="2"], #tab-home .fav-card[data-cat="2"] { --cat: #0891b2; --cat-soft: #cffafe; --cat-text: #0e7490; } .cat-group[data-cat="3"], #tab-home .fav-card[data-cat="3"] { --cat: #7c3aed; --cat-soft: #ede9fe; --cat-text: #6d28d9; } .cat-group[data-cat="4"], #tab-home .fav-card[data-cat="4"] { --cat: #db2777; --cat-soft: #fce7f3; --cat-text: #be185d; } .cat-group[data-cat="5"], #tab-home .fav-card[data-cat="5"] { --cat: #ea580c; --cat-soft: #ffedd5; --cat-text: #c2410c; } .cat-group[data-cat="6"], #tab-home .fav-card[data-cat="6"] { --cat: #047857; --cat-soft: #d1fae5; --cat-text: #065f46; } .cat-head { display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-bottom: 10px; font-weight: 600; font-size: 0.9rem; } .cat-label { background: var(--cat-soft); color: var(--cat-text); padding: 3px 12px; border-radius: 20px; font-size: 0.8rem; } #tab-home .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } #tab-home .tool-card { position: relative; padding: 14px 10px 12px; border-radius: 12px; border-top: 3px solid var(--cat, var(--border)); } #tab-home .tool-card:hover { transform: translateY(-2px); border-color: var(--cat, var(--primary)); box-shadow: 0 4px 12px rgba(15, 23, 42, .08); } #tab-home .tool-card:active { transform: scale(.985); } #tab-home .tool-icon { width: 44px; height: 44px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--cat-soft, #f1f5f9); } #tab-home .tool-icon .emoji-icon { width: 1.32em; height: 1.32em; } #tab-home .tool-name { font-size: 0.875rem; } #tab-home .tool-desc { font-size: 0.8125rem; line-height: 1.45; } .fav-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .fav-count-wrap { color: var(--text-secondary); font-weight: 400; } #fav-count { color: var(--primary); font-weight: 700; } .fav-hint { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; } .fav-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 22px 18px; border: 2px dashed #bfdbfe; border-radius: 12px; background: rgba(255, 255, 255, .55); color: var(--text-secondary); font-size: 0.82rem; line-height: 1.6; } .fav-empty-icon { font-size: 28px; line-height: 1; color: #f59e0b; } .fav-empty-text strong { color: var(--text); font-weight: 600; } .fav-star-btn::after { content: ''; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; border-radius: 50%; } .fav-star-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .back-top { position: fixed; right: 20px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 23, 42, .12); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity var(--transition), transform var(--transition), color var(--transition); z-index: 300; } .back-top.is-show { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-top:hover { color: var(--primary); border-color: var(--primary); } .back-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-color-scheme: dark) { :root { --bg: #0b1220; --card-bg: #121c2b; --primary: #60a5fa; --primary-hover: #3b82f6; --primary-light: #16233a; --text: #e6edf7; --text-secondary: #9db0c7; --border: #26374f; --danger: #f87171; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --shadow: 0 10px 25px -5px rgba(0, 0, 0, .55), 0 8px 10px -6px rgba(0, 0, 0, .4); } .tab-nav { background: rgba(255, 255, 255, .06); } .tab-btn.active { background: #1c2b41; color: #93c5fd; box-shadow: none; } .home-search input { background: rgba(255, 255, 255, .04); } .home-search input:focus { background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 3px rgba(96, 165, 250, .18); } .cat-group[data-cat="1"], #tab-home .fav-card[data-cat="1"] { --cat: #818cf8; --cat-soft: rgba(129, 140, 248, .16); --cat-text: #a5b4fc; } .cat-group[data-cat="2"], #tab-home .fav-card[data-cat="2"] { --cat: #22d3ee; --cat-soft: rgba(34, 211, 238, .16); --cat-text: #67e8f9; } .cat-group[data-cat="3"], #tab-home .fav-card[data-cat="3"] { --cat: #a78bfa; --cat-soft: rgba(167, 139, 250, .16); --cat-text: #c4b5fd; } .cat-group[data-cat="4"], #tab-home .fav-card[data-cat="4"] { --cat: #f472b6; --cat-soft: rgba(244, 114, 182, .16); --cat-text: #f9a8d4; } .cat-group[data-cat="5"], #tab-home .fav-card[data-cat="5"] { --cat: #fb923c; --cat-soft: rgba(251, 146, 60, .16); --cat-text: #fdba74; } .cat-group[data-cat="6"], #tab-home .fav-card[data-cat="6"] { --cat: #34d399; --cat-soft: rgba(52, 211, 153, .16); --cat-text: #6ee7b7; } .fav-empty { background: rgba(255, 255, 255, .04); border-color: rgba(96, 165, 250, .35); } #tab-home .tool-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .45); } .back-top { box-shadow: 0 6px 18px rgba(0, 0, 0, .5); } .tab-panel:not(#tab-home) { --card-bg: #ffffff; --text: #0f172a; --text-secondary: #475569; --border: #e2e8f0; --primary: #2563eb; --primary-hover: #1d4ed8; --primary-light: #eff6ff; } } .header-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; } .header-row-main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; } .header-row-main .logo { justify-self: start; min-width: 0; } .header-row-main .tab-nav { justify-self: end; } .header-cat-nav { justify-self: center; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .header-cat-nav::-webkit-scrollbar { display: none; } .header .home-cat-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; background: var(--bg); border-color: transparent; color: var(--text-secondary); } .header .home-cat-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--chip-dot, var(--primary)); } .header .home-cat-chip[data-cat="1"] { --chip-dot: #4f46e5; } .header .home-cat-chip[data-cat="2"] { --chip-dot: #0891b2; } .header .home-cat-chip[data-cat="3"] { --chip-dot: #7c3aed; } .header .home-cat-chip[data-cat="4"] { --chip-dot: #db2777; } .header .home-cat-chip[data-cat="5"] { --chip-dot: #ea580c; } .header .home-cat-chip[data-cat="6"] { --chip-dot: #047857; } .header .home-cat-chip:hover { background: var(--card-bg); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-sm); } .header .home-cat-chip.is-jumped { background: var(--card-bg); border-color: var(--chip-dot); color: var(--text); box-shadow: var(--shadow-sm); } @media (prefers-color-scheme: dark) { .header .home-cat-chip { background: rgba(255, 255, 255, .06); } .header .home-cat-chip[data-cat="1"] { --chip-dot: #818cf8; } .header .home-cat-chip[data-cat="2"] { --chip-dot: #22d3ee; } .header .home-cat-chip[data-cat="3"] { --chip-dot: #a78bfa; } .header .home-cat-chip[data-cat="4"] { --chip-dot: #f472b6; } .header .home-cat-chip[data-cat="5"] { --chip-dot: #fb923c; } .header .home-cat-chip[data-cat="6"] { --chip-dot: #34d399; } } .header-sub { min-width: 0; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.3; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-sub .emoji-icon { width: 1.1em; height: 1.1em; } @media (max-width: 1300px) { .header-row-main { gap: 10px; } .logo { font-size: 1.1rem; } .header .home-cat-chip { padding: 3px 9px 3px 7px; font-size: 0.76rem; } } @media (max-width: 1199px) { .header-row-main { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 8px; } .header-cat-nav { flex: 1 1 100%; order: 3; justify-content: center; } .header .home-cat-chip { padding: 4px 10px 4px 8px; font-size: 0.78rem; } } @media (max-width: 900px) { .header-row-sub { display: none; } } @media (max-width: 640px) { .main-container { padding: 14px; } #tab-home > .card { padding: 16px; } .home-search { flex: 1 1 100%; max-width: none; } .home-cat-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } #tab-home .card-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } #tab-home .tool-card { padding: 12px 8px 10px; } #tab-home .tool-icon { width: 40px; height: 40px; margin-bottom: 6px; } #tab-home .tool-icon .emoji-icon { width: 1.2em; height: 1.2em; } #tab-home .tool-desc { font-size: 0.75rem; } .fav-empty { padding: 18px 14px; } .cat-head { padding: 6px 0; } .header { padding: 0 14px; } .header .tab-nav { padding: 3px; } .header .tab-btn { padding: 7px 12px; font-size: 0.8rem; } .logo { font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .header-row-main .tab-nav { margin-left: auto; } .header-cat-nav { justify-content: flex-start; } } #tab-home .home-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 18px; } #tab-home .home-head .card-title { margin: 0; padding: 0; border-bottom: none; flex: 0 0 auto; white-space: nowrap; } #tab-home .home-head .home-toolbar { margin: 0; flex: 1 1 320px; justify-content: flex-end; } #tab-home .home-head .home-search { flex: 1 1 auto; max-width: 520px; min-width: 220px; } #tab-home .home-head .home-search input { height: 36px; } #tab-crop-margin .crop-body { display:grid; grid-template-columns:minmax(230px,2fr) minmax(230px,2fr) minmax(340px,6fr); gap:16px; align-items:stretch; } #tab-crop-margin .crop-col { display:flex; flex-direction:column; gap:10px; min-width:0; } #tab-crop-margin .crop-col-preview { gap:8px; } #tab-crop-margin .crop-note { margin:0; } #tab-crop-margin .upload-area .primary-text { display:flex; align-items:center; justify-content:center; gap:6px; } #tab-crop-margin #crop-file-info { display:flex; align-items:center; gap:6px; background:#f1f5f9; border-radius:10px; padding:6px 10px; font-size:0.82rem; } #tab-crop-margin #crop-file-info #crop-file-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #tab-crop-margin #crop-file-info #crop-page-count { flex:0 0 auto; background:#e2e8f0; padding:1px 8px; border-radius:10px; font-size:0.72rem; } #tab-crop-margin .crop-mode-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } #tab-crop-margin .crop-label { flex:0 0 auto; font-size:0.82rem; font-weight:500; color:var(--text-secondary); } #tab-crop-margin .crop-adjust-group { display:flex; flex-direction:column; gap:5px; background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:8px 10px; } #tab-crop-margin .crop-adjust-title { font-size:0.78rem; font-weight:600; color:#334155; } #tab-crop-margin .crop-adj-row { display:flex; align-items:center; gap:6px; } #tab-crop-margin .crop-adj-row > span { flex:0 0 15px; font-size:0.78rem; color:var(--text-secondary); } #tab-crop-margin .crop-adj-row > em { flex:0 0 auto; font-style:normal; font-size:0.7rem; color:#94a3b8; } #tab-crop-margin .crop-adj-row input[type="range"] { flex:1 1 auto; min-width:0; height:4px; margin:0; accent-color:var(--primary); } #tab-crop-margin .crop-adj-row input.crop-adj-num { flex:0 0 56px; width:56px; padding:1px 5px; border:1px solid #cbd5e1; border-radius:6px; font-size:0.76rem; text-align:right; font-family:var(--font); } #tab-crop-margin .crop-actions { display:flex; flex-direction:column; gap:8px; margin-top:auto; } #tab-crop-margin .crop-actions .btn { width:100%; justify-content:center; } #tab-crop-margin .crop-options { display:grid; grid-template-columns:1fr; gap:8px; background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:10px 12px; } #tab-crop-margin .crop-opt { display:flex; align-items:center; gap:8px; min-width:0; font-size:0.8rem; } #tab-crop-margin .crop-opt > .crop-label { flex:0 0 64px; white-space:nowrap; } #tab-crop-margin .crop-opt input[type="range"] { flex:1 1 auto; min-width:0; height:4px; margin:0; accent-color:var(--primary); } #tab-crop-margin .crop-opt select { flex:1 1 auto; min-width:0; padding:5px 8px; border:1px solid #cbd5e1; border-radius:8px; font-size:0.78rem; font-family:var(--font); background:#fff; } #tab-crop-margin .crop-opt .check-label { font-size:0.78rem; white-space:normal; } #tab-crop-margin .crop-opt-wide { grid-column:1 / -1; flex-wrap:wrap; } #tab-crop-margin .crop-cut-row { align-items:flex-start; } #tab-crop-margin .crop-cut-cards { flex:1 1 auto; min-width:0; display:grid; grid-template-columns:1fr; gap:8px; } #tab-crop-margin .crop-cut-card { display:flex; align-items:flex-start; gap:7px; padding:6px 9px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; cursor:pointer; transition:var(--transition); } #tab-crop-margin .crop-cut-card:hover { border-color:#94a3b8; } #tab-crop-margin .crop-cut-card.is-on { border-color:var(--primary); background:var(--primary-light); box-shadow:inset 0 0 0 1px var(--primary); } #tab-crop-margin .crop-cut-card input[type="radio"] { margin:3px 0 0; flex:0 0 auto; accent-color:var(--primary); } #tab-crop-margin .crop-cut-text { display:flex; flex-direction:column; gap:1px; min-width:0; } #tab-crop-margin .crop-cut-text strong { font-size:0.8rem; color:var(--text); } #tab-crop-margin .crop-cut-card.is-on .crop-cut-text strong { color:var(--primary); } #tab-crop-margin .crop-cut-text em { font-style:normal; font-size:0.72rem; color:var(--text-secondary); line-height:1.35; } #tab-crop-margin .crop-opt-wide select { flex:1 1 auto; min-width:0; } #tab-crop-margin .crop-out-hint { flex:1 1 auto; font-size:0.74rem; color:#94a3b8; } #tab-crop-margin .crop-opt select:disabled { background:#eef2f6; color:#94a3b8; cursor:not-allowed; } #tab-crop-margin .crop-swatches { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; } #tab-crop-margin .crop-swatches .color-preset { width:20px; height:20px; } #tab-crop-margin .crop-swatches input[type="color"] { width:28px; height:22px; padding:0; border:1px solid #cbd5e1; border-radius:5px; background:#fff; cursor:pointer; } #tab-crop-margin #crop-bg-val { font-size:0.74rem; color:#64748b; } #tab-crop-margin .crop-outinfo { display:flex; flex-direction:column; gap:3px; } #tab-crop-margin .crop-outinfo .usage-note { margin:0; font-size:0.76rem; line-height:1.45; } #tab-crop-margin .crop-subrow { display:flex; align-items:center; gap:6px; margin:0; flex-wrap:wrap; } #tab-crop-margin .crop-subrow input.config-input { width:66px; padding:4px 6px; font-size:0.78rem; } #tab-crop-margin .crop-out-margin { align-items:center; gap:5px; flex:0 0 auto; } #tab-crop-margin .crop-out-margin > span { font-size:0.76rem; color:var(--text-secondary); white-space:nowrap; } #tab-crop-margin .crop-out-margin > em { font-style:normal; font-size:0.72rem; color:#94a3b8; } #tab-crop-margin .crop-out-margin > input.config-input { width:58px; padding:4px 6px; font-size:0.78rem; } #tab-crop-margin .canvas-container { flex:0 0 auto; height:var(--preview-h); min-height:0; max-height:none; justify-content:flex-start; align-items:flex-start; padding:8px; background:#f8fafc; border-radius:10px; } #tab-crop-margin #crop-preview-canvas { margin:auto; } #tab-crop-margin .legend { font-size:0.74rem; } @media (max-width: 1180px) { #tab-crop-margin .crop-body { grid-template-columns:1fr 1fr; } #tab-crop-margin .crop-col-preview { grid-column:1 / -1; } } @media (max-width: 760px) { #tab-crop-margin .crop-body { grid-template-columns:1fr; } #tab-crop-margin .crop-col-preview { grid-column:auto; } } .bm-layout { gap:18px; } .bm-editor { flex:0 0 370px; max-width:430px; } .bm-preview { flex:1 1 460px; min-width:0; } .bm-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 0 12px; margin:0; border-bottom:1px solid #eef2f6; } .bm-tb-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .bm-divider { width:1px; height:22px; background:var(--border); flex-shrink:0; } .bm-zoom-ind { font-size:0.8rem; color:var(--text-secondary); min-width:52px; text-align:center; } .bm-tb-right { display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; } .bm-tb-right .status { max-width:240px; } .bm-tip { position:fixed; z-index:2000; display:flex; align-items:center; gap:6px; max-width:260px; padding:7px 6px 7px 12px; border-radius:10px; font-size:0.8rem; font-weight:500; line-height:1.5; color:var(--danger); background:#fff5f5; border:1px solid #fca5a5; box-shadow:0 6px 18px rgba(220,38,38,0.16); opacity:1; transition:opacity 0.18s; } .bm-tip::after { content:''; position:absolute; bottom:-6px; left:var(--bm-arrow, 50%); width:10px; height:10px; background:#fff5f5; border-right:1px solid #fca5a5; border-bottom:1px solid #fca5a5; transform:translateX(-50%) rotate(45deg); } .bm-tip-below::after { top:-6px; bottom:auto; border-right:none; border-bottom:none; border-left:1px solid #fca5a5; border-top:1px solid #fca5a5; } .bm-tip-out { opacity:0; } .bm-tip-text { white-space:normal; } .bm-tip-close { flex:0 0 auto; width:18px; height:18px; padding:0; border:none; border-radius:50%; background:transparent; color:#b91c1c; font-size:13px; line-height:1; cursor:pointer; } .bm-tip-close:hover { background:#fee2e2; } .bm-top-layout { margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid #eef2f6; } .bm-top-left { flex:0 1 660px; max-width:660px; } .bm-top-right { flex:0 0 340px; order:-1; min-width:260px; align-self:center; } .bm-help { margin:0 0 12px; line-height:1.6; } .bm-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; } .bm-section-title { font-weight:500; font-size:0.92rem; } .bm-count { font-size:0.75rem; color:var(--text-secondary); background:#f1f5f9; padding:2px 9px; border-radius:20px; } .bm-file-info { display:none; font-size:0.85rem; color:var(--text-secondary); word-break:break-all; } .bm-file-info strong { color:var(--text); font-weight:500; } .bm-tree { border:1px solid var(--border); border-radius:12px; background:#fafbfc; padding:8px; min-height:180px; max-height:30vh; overflow:auto; } .bm-row { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:8px; cursor:pointer; transition:background 0.15s; } .bm-row:hover { background:#f1f5f9; } .bm-row.active { background:var(--primary-light); box-shadow:inset 3px 0 0 var(--primary); } .bm-caret { width:14px; flex:0 0 14px; text-align:center; color:#94a3b8; font-size:0.75rem; user-select:none; } .bm-caret-empty { width:14px; flex:0 0 14px; } .bm-title { flex:1; min-width:0; font-size:0.88rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bm-page { font-size:0.72rem; background:#e2e8f0; color:var(--text-secondary); padding:1px 8px; border-radius:20px; white-space:nowrap; flex-shrink:0; } .bm-row.active .bm-page { background:#dbeafe; color:#1e40af; } .bm-children { margin-left:16px; border-left:2px solid #eef2f6; padding-left:4px; } .bm-inline-input { flex:1; min-width:0; font-family:var(--font); font-size:0.88rem; padding:2px 6px; border:1px solid var(--primary); border-radius:6px; background:#fff; color:var(--text); outline:none; } .bm-detail { border:1px solid var(--border); border-radius:12px; background:#fafbfc; padding:12px; display:flex; flex-direction:column; gap:10px; } .bm-detail[hidden] { display:none; } .bm-detail-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .bm-detail-row label { font-size:0.8rem; color:var(--text-secondary); width:44px; flex-shrink:0; } .bm-detail-row .config-input { flex:1 1 120px; min-width:0; } .bm-detail-row .bm-num { flex:0 0 84px; } .bm-color { width:38px; height:32px; padding:2px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; cursor:pointer; } .bm-presets { display:flex; gap:6px; } .bm-preset { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; } .bm-preset.active { border-color:var(--text); } .bm-preview-bar { display:flex; align-items:center; justify-content:space-between; font-size:0.8rem; color:var(--text-secondary); } .bm-canvas-wrap { background:#f8fafc; border:1px solid var(--border); border-radius:12px; height:calc(var(--preview-h) + 80px); min-height:0; overflow:auto; padding:16px; text-align:center; } .bm-canvas-wrap canvas { display:none; background:#fff; box-shadow:var(--shadow-sm); margin:0 auto; } .bm-canvas-wrap.has-page canvas { display:block; } @media (max-width:820px) { .bm-layout { flex-direction:column; } .bm-top-left { flex:1 1 auto; max-width:none; width:100%; } .bm-top-right { align-self:stretch; } .bm-editor { flex:1 1 auto; max-width:none; width:100%; } .bm-preview { flex:1 1 auto; width:100%; order:-1; } .bm-canvas-wrap { height:320px; } .bm-tree { max-height:30vh; } .bm-tb-right { margin-left:0; width:100%; } }