.gfx-wrap { max-width: 1320px; margin: 0 auto; padding: 20px 16px; } .gfx-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .gfx-header h1 { margin: 0; font-size: clamp(22px, 3.5vw, 30px); color: var(--primary, #14d7ff); font-weight: 800; } .gfx-desc { color: var(--text-muted, rgba(233,248,255,0.55)); font-size: 0.88em; margin: 4px 0 0; max-width: 480px; line-height: 1.5; } .gfx-toolbar { display: flex; flex-wrap: wrap; gap: 8px; } .gfx-btn { background: var(--card-bg, rgba(21,32,48,0.99)); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); color: var(--text-primary, #e9f8ff); border-radius: 10px; padding: 7px 14px; font-size: 0.82em; font-weight: 600; cursor: pointer; transition: all 0.2s; } .gfx-btn:hover { border-color: var(--primary, #14d7ff); background: rgba(20,215,255,0.06); } .gfx-btn-accent { border-color: var(--primary, #14d7ff); color: var(--primary, #14d7ff); } .gfx-btn-accent.active { background: var(--primary, #14d7ff); color: #0a1628; } .gfx-layout { display: grid; grid-template-columns: 290px 1fr 290px; gap: 16px; align-items: start; } .gfx-panel { background: var(--card-bg, rgba(21,32,48,0.99)); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); border-radius: 14px; padding: 16px; } .gfx-main { min-width: 0; } .gfx-section { margin-bottom: 18px; } .gfx-section:last-child { margin-bottom: 0; } .gfx-section-title { margin: 0 0 10px; font-size: 0.82em; font-weight: 700; color: var(--primary, #14d7ff); text-transform: uppercase; letter-spacing: 0.05em; } .gfx-drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 16px; border: 2px dashed var(--card-border, rgba(255,255,255,0.18)); border-radius: 12px; background: rgba(255,255,255,0.02); cursor: pointer; transition: all 0.25s; color: var(--text-muted, rgba(233,248,255,0.55)); font-size: 0.85em; text-align: center; } .gfx-drop-zone:hover { border-color: var(--primary, #14d7ff); background: rgba(20,215,255,0.04); } .gfx-drop-zone.loaded { border-color: #1ec676; border-style: solid; background: rgba(30,198,118,0.06); } .gfx-drop-icon { width: 28px; height: 28px; fill: var(--text-muted, rgba(233,248,255,0.4)); } .gfx-drop-zone.loaded .gfx-drop-icon { fill: #1ec676; } .gfx-drop-zone .gfx-file-name { color: #1ec676; font-weight: 700; font-size: 0.9em; word-break: break-all; } .gfx-summary-list { display: flex; flex-direction: column; gap: 3px; } .gfx-summary-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.2s; font-size: 0.82em; border: 1px solid transparent; } .gfx-summary-item:hover { background: rgba(20,215,255,0.06); border-color: rgba(20,215,255,0.15); } .gfx-summary-item-left { display: flex; align-items: center; gap: 7px; color: var(--text-primary, #e9f8ff); min-width: 0; } .gfx-summary-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .gfx-summary-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gfx-summary-item-count { font-weight: 700; font-size: 0.95em; color: var(--text-muted, rgba(233,248,255,0.6)); flex-shrink: 0; } .gfx-summary-total { margin-top: 8px; padding: 8px 10px; border-top: 1px solid var(--card-border, rgba(255,255,255,0.08)); font-size: 0.8em; color: var(--text-muted, rgba(233,248,255,0.45)); text-align: right; } .gfx-chart-types { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .gfx-type-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border: 1px solid var(--card-border, rgba(255,255,255,0.10)); border-radius: 10px; background: rgba(255,255,255,0.02); color: var(--text-primary, #e9f8ff); cursor: pointer; transition: all 0.2s; font-size: 0.75em; font-weight: 600; } .gfx-type-btn:hover { border-color: var(--primary, #14d7ff); background: rgba(20,215,255,0.06); } .gfx-type-btn svg { width: 22px; height: 22px; fill: var(--primary, #14d7ff); } .gfx-type-btn .gfx-type-icon-line { fill: none; stroke: var(--primary, #14d7ff); stroke-width: 2.5; stroke-linecap: round; } .gfx-presets { display: flex; flex-direction: column; gap: 5px; } .gfx-preset-btn { display: block; width: 100%; padding: 8px 10px; border: 1px solid var(--card-border, rgba(255,255,255,0.10)); border-radius: 10px; background: rgba(255,255,255,0.02); color: var(--text-primary, #e9f8ff); cursor: pointer; transition: all 0.2s; font-size: 0.82em; font-weight: 600; text-align: left; } .gfx-preset-btn:hover { border-color: var(--primary, #14d7ff); background: rgba(20,215,255,0.06); } .gfx-hint { color: var(--text-muted, rgba(233,248,255,0.35)); font-size: 0.76em; margin-top: 8px; line-height: 1.4; } .gfx-view-tabs { display: flex; gap: 8px; margin-bottom: 14px; } .gfx-tab { border: 1px solid var(--card-border, rgba(255,255,255,0.12)); background: rgba(255,255,255,0.03); color: var(--text-muted, rgba(233,248,255,0.58)); border-radius: 999px; padding: 8px 14px; font-size: 0.82em; font-weight: 700; cursor: pointer; } .gfx-tab:hover { border-color: rgba(20,215,255,0.3); color: var(--text-primary, #e9f8ff); } .gfx-tab.active { background: rgba(20,215,255,0.14); border-color: rgba(20,215,255,0.42); color: var(--primary, #14d7ff); } .gfx-dashboard { display: flex; flex-wrap: wrap; gap: 16px; align-content: flex-start; min-height: 400px; position: relative; } .gfx-dashboard.arrange { min-height: 600px; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 16px), repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 16px); } .gfx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 60px 20px; color: var(--text-muted, rgba(233,248,255,0.3)); text-align: center; } .gfx-empty-icon { width: 48px; height: 48px; fill: var(--text-muted, rgba(233,248,255,0.15)); } .gfx-empty p { font-size: 0.9em; max-width: 320px; margin: 0; } .gfx-preview-pane { overflow-x: auto; padding: 10px 0 4px; } .gfx-dashboard.hidden, .gfx-preview-pane.hidden { display: none !important; } .gfx-dashboard--measure { position: fixed !important; left: -12000px !important; top: 0 !important; width: 900px !important; visibility: hidden !important; pointer-events: none !important; } .gfx-preview-pages { display: grid; gap: 18px; justify-items: center; } .gfx-a4-page { width: min(794px, 100%); min-height: 1123px; background: #fff; color: #122033; border-radius: 6px; box-shadow: 0 20px 70px rgba(0,0,0,0.38); padding: 34px 38px 28px; display: flex; flex-direction: column; box-sizing: border-box; } .gfx-a4-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid #d9e4ee; } .gfx-a4-brand img { max-width: 150px; max-height: 42px; object-fit: contain; display: block; } .gfx-a4-meta { display: flex; flex-direction: column; gap: 4px; text-align: right; color: #66788c; font-size: 0.78em; } .gfx-a4-meta strong { color: #122033; font-size: 1rem; } .gfx-a4-body { display: grid; gap: 18px; padding: 20px 0; flex: 1; align-content: start; } .gfx-a4-card { border: 1px solid #d9e4ee; border-radius: 10px; padding: 14px; background: #fbfdff; break-inside: avoid; } .gfx-a4-card--interactive { cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .gfx-a4-card--interactive:hover, .gfx-a4-card--interactive:focus { border-color: #14d7ff; box-shadow: 0 0 0 3px rgba(20,215,255,0.14); outline: none; } .gfx-a4-card h3 { margin: 0 0 10px; color: #0a5f88; font-size: 1rem; } .gfx-a4-chart { display: block; width: 100%; max-height: 280px; object-fit: contain; background: #fff; border-radius: 8px; } .gfx-a4-text { margin: 0; color: #34465a; line-height: 1.55; white-space: pre-wrap; } .gfx-a4-card-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; margin-top: 10px; color: #526477; font-size: 0.78em; } .gfx-a4-card-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gfx-a4-footer { border-top: 1px solid #d9e4ee; padding-top: 10px; color: #7b8da1; font-size: 0.75em; text-align: right; } .gfx-a4-empty { width: min(560px, 100%); border: 1px dashed rgba(20,215,255,0.28); border-radius: 14px; padding: 26px; text-align: center; color: var(--text-muted, rgba(233,248,255,0.6)); background: rgba(255,255,255,0.03); } .gfx-card { position: relative; background: var(--card-bg, rgba(21,32,48,0.99)); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; width: 380px; transition: outline 0.15s; } .gfx-card.absolute { position: absolute; cursor: move; } .gfx-card.selected { outline: 2px solid var(--primary, #14d7ff); outline-offset: 2px; } .gfx-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .gfx-card-title { margin: 0; color: var(--primary, #14d7ff); font-size: 0.88em; font-weight: 700; } .gfx-card-actions { display: flex; gap: 3px; } .gfx-card-btn { padding: 2px 7px; border-radius: 6px; border: 1px solid var(--card-border, rgba(255,255,255,0.10)); background: transparent; color: var(--text-muted, rgba(233,248,255,0.45)); cursor: pointer; font-size: 0.78em; transition: all 0.15s; line-height: 1.4; } .gfx-card-btn:hover { border-color: var(--primary, #14d7ff); color: var(--primary, #14d7ff); } .gfx-card-btn.danger:hover { border-color: #ff5252; color: #ff5252; } .gfx-card-canvas-wrap { border-radius: 8px; overflow: hidden; } .gfx-card canvas { display: block; width: 100%; height: 240px; } .gfx-card-text { padding: 12px; min-height: 80px; color: var(--text-primary, #e9f8ff); font-size: 0.92em; line-height: 1.6; outline: none; border: 1px dashed transparent; border-radius: 8px; transition: border-color 0.2s; } .gfx-card-text:focus { border-color: var(--primary, #14d7ff); } .gfx-card-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px 0; max-height: 80px; overflow-y: auto; } .gfx-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.72em; color: var(--text-muted, rgba(233,248,255,0.6)); } .gfx-legend-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .gfx-inspector { max-height: calc(100vh - 120px); overflow-y: auto; position: sticky; top: 16px; } .gfx-inspector label { display: block; margin-top: 10px; color: var(--text-muted, rgba(233,248,255,0.55)); font-size: 0.78em; font-weight: 600; margin-bottom: 3px; } .gfx-inspector input, .gfx-inspector select, .gfx-inspector textarea { width: 100%; background: rgba(255,255,255,0.05); color: var(--text-primary, #e9f8ff); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); border-radius: 8px; padding: 7px 10px; font-size: 0.85em; box-sizing: border-box; } .gfx-inspector input:focus, .gfx-inspector select:focus, .gfx-inspector textarea:focus { outline: none; border-color: var(--primary, #14d7ff); } .gfx-inspector input[type="checkbox"] { width: auto; accent-color: var(--primary, #14d7ff); } .gfx-checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .gfx-checkbox-row label { margin: 0 !important; display: inline !important; } .gfx-color-popup { position: fixed; z-index: 9999; background: var(--card-bg, rgba(21,32,48,0.99)); border: 1px solid var(--primary, #14d7ff); border-radius: 10px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 10px; } .gfx-color-popup input[type="color"] { width: 36px; height: 36px; border: none; border-radius: 8px; cursor: pointer; background: transparent; padding: 0; } .gfx-color-popup-label { color: var(--text-primary, #e9f8ff); font-size: 0.82em; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gfx-card-menu { position: fixed; z-index: 10020; width: min(320px, calc(100vw - 24px)); background: rgba(9,18,30,0.98); border: 1px solid rgba(20,215,255,0.28); border-radius: 14px; padding: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.04); color: var(--text-primary, #e9f8ff); } .gfx-card-menu-head { font-weight: 800; color: var(--primary, #14d7ff); margin-bottom: 10px; font-size: 0.9em; } .gfx-card-menu-subtitle { color: var(--text-muted, rgba(233,248,255,0.62)); font-size: 0.76em; font-weight: 700; margin: 10px 0 6px; text-transform: uppercase; letter-spacing: 0.05em; } .gfx-card-menu-field { display: grid; gap: 5px; margin: 8px 0; color: var(--text-muted, rgba(233,248,255,0.65)); font-size: 0.78em; font-weight: 700; } .gfx-card-menu-field input, .gfx-card-menu-field select, .gfx-card-menu-field textarea { width: 100%; box-sizing: border-box; border-radius: 9px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: var(--text-primary, #e9f8ff); padding: 8px 10px; font: inherit; font-weight: 600; } .gfx-card-menu-field textarea { resize: vertical; min-height: 92px; line-height: 1.45; } .gfx-card-menu-field input:focus, .gfx-card-menu-field select:focus, .gfx-card-menu-field textarea:focus { outline: none; border-color: rgba(20,215,255,0.54); box-shadow: 0 0 0 3px rgba(20,215,255,0.12); } .gfx-mini-tabs, .gfx-mini-sizes { display: flex; gap: 6px; flex-wrap: wrap; } .gfx-mini-tabs button, .gfx-mini-sizes button { border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; background: rgba(255,255,255,0.04); color: var(--text-muted, rgba(233,248,255,0.7)); padding: 7px 10px; cursor: pointer; font-size: 0.76em; font-weight: 700; } .gfx-mini-tabs button:hover, .gfx-mini-sizes button:hover, .gfx-mini-tabs button.active { border-color: rgba(20,215,255,0.42); color: var(--primary, #14d7ff); background: rgba(20,215,255,0.12); } .gfx-card-menu-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--text-primary, #e9f8ff); font-size: 0.82em; font-weight: 700; } .gfx-card-menu-check input { accent-color: var(--primary, #14d7ff); } .gfx-fullscreen { position: fixed; z-index: 9999; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; } .gfx-fullscreen-box { background: var(--card-bg, rgba(21,32,48,0.99)); border: 1px solid var(--card-border, rgba(255,255,255,0.15)); border-radius: 14px; width: 90vw; height: 88vh; display: flex; flex-direction: column; padding: 14px; overflow: hidden; } .gfx-fullscreen-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0; } .gfx-fullscreen-title { color: var(--primary, #14d7ff); font-size: 1em; font-weight: 700; } .gfx-fullscreen-content { flex: 1; position: relative; min-height: 0; overflow: hidden; } .gfx-fullscreen-content canvas { position: absolute; inset: 0; width: 100%; height: 100%; } @media (max-width: 1100px) { .gfx-layout { grid-template-columns: 260px 1fr; } .gfx-inspector { display: none; } } @media (max-width: 768px) { .gfx-layout { grid-template-columns: 1fr; } .gfx-header { flex-direction: column; } .gfx-card { width: 100% !important; } .gfx-a4-page { min-height: 760px; padding: 24px 18px; } .gfx-a4-card-legend { grid-template-columns: 1fr; } }