.graphic-root *{box-sizing:border-box;}.graphic-root{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;color:#1f1f1f;display:flex;flex-direction:column;min-height:0;}.graphic-root.fullscreen{min-height:100vh;}.graphic-app-header{display:flex;align-items:center;justify-content:center;padding:12px 16px;border-bottom:1px solid #eee;}.graphic-props-toggle{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;position:relative;}.graphic-props-toggle-btn{position:absolute;z-index:99;right:20px;height:30px;padding:0 12px;border:1px solid #d9d9d9;background-color:#1677ff;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;}.graphic-props-toggle-btn:hover{filter:brightness(0.98);}.graphic-props-toggle-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #91caff;border-radius:6px;}.graphic-app-main{display:grid;grid-template-columns:1fr;column-gap:24px;padding:24px 0;flex:1;position:relative;min-height:300px;}.graphic-app-main.props-collapsed{grid-template-columns:1fr;}.graphic-props-expand-btn{display:none !important;}.graphic-canvas-panel{overflow-x:auto;overflow-y:auto;background:#fafafa;}.graphic-canvas{position:relative;width:1080px;height:720px;margin:0 auto;background:#fff;overflow:hidden;}.graphic-props-panel{border-left:none;padding:0;display:flex;flex-direction:column;overflow:hidden;position:absolute;top:54px;bottom:54px;right:0;width:420px;z-index:10;}.graphic-props-header{position:absolute;top:8px;right:8px;padding:0;border:none;background:transparent;user-select:none;display:flex;align-items:center;justify-content:center;}.graphic-props-header .graphic-props-title{display:none;}.graphic-props-header .graphic-props-collapse-btn{display:none !important;margin-left:auto;cursor:pointer;font-size:16px;color:#666;line-height:1;padding:2px 6px;border-radius:4px;background:transparent;border:none;}.graphic-props-header .graphic-props-collapse-btn:hover{color:#111827;background:transparent;}.graphic-props-header .graphic-props-collapse-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #91caff;border-radius:6px;}.graphic-props-panel #props{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px;flex:1;overflow:auto;transition:transform 0.25s ease, opacity 0.2s ease;}.graphic-props-panel.closed{display:none;}.graphic-props-panel.closed #props{transform:translateX(110%);opacity:0;pointer-events:none;}.graphic-props-footer{position:sticky;bottom:0;left:auto;width:100%;display:flex;gap:8px;justify-content:center;border-top:1px solid #eee;padding:10px 0;background:#fff;box-shadow:0 -4px 12px rgba(0, 0, 0, 0.06);z-index:5;}.graphic-app-footer{height:34px;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:0 16px;background:transparent;border-top:none;box-shadow:none;}.graphic-input{height:30px;min-height:30px;padding:0 8px;border:1px solid #d9d9d9;background:#fff;border-radius:6px;display:inline-block;font-size:13px;box-sizing:border-box;}.graphic-filter-bar .graphic-input{width:200px;}.graphic-pagination .graphic-input{width:120px;}.graphic-props-panel #props .graphic-form-item{margin:6px 0;width:100%;}.graphic-props-panel #props .graphic-form-item-label{display:block;margin-bottom:4px;color:#374151;font-size:13px;}.graphic-props-panel #props .graphic-input{display:block;width:100%;max-width:100%;}.graphic-props-panel #props select.graphic-input{display:block;width:100%;max-width:100%;}.graphic-props-panel #props .input{width:100%;}.graphic-form-sub-label{display:inline-block;min-width:0;white-space:nowrap;color:#666;}.graphic-btn{width:100px;height:30px;padding:0 12px;border:1px solid #d9d9d9;background:#fff;border-radius:6px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:clip;}.graphic-btn.graphic-primary{background:#1677ff;border-color:#1677ff;color:#fff;}.graphic-btn:hover{filter:brightness(0.98);}.graphic-btn.disabled,.graphic-btn.disabled:hover,.graphic-btn.disabled:active{cursor:not-allowed;color:rgba(0, 0, 0, 0.25) !important;background:#f5f5f5 !important;border-color:#d9d9d9 !important;text-shadow:none;box-shadow:none;filter:none;}.graphic-btn:disabled{background:#f5f5f5;border-color:#d9d9d9;color:#bfbfbf;cursor:not-allowed;filter:none;opacity:0.6;}.graphic-btn.graphic-primary:disabled{background:#a3c4ff;border-color:#a3c4ff;color:#fff;cursor:not-allowed;filter:none;opacity:0.6;}.graphic-btn:disabled:hover{filter:none;}.graphic-modal-mask{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:none;align-items:center;justify-content:center;z-index:999;}.graphic-modal{width:760px;max-height:80vh;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.14);display:flex;flex-direction:column;position:relative;}.graphic-modal-header{padding:12px 16px;border-bottom:1px solid #eee;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:12px;}.graphic-modal-header .graphic-app-header{padding:0;border:none;}.graphic-modal-header .graphic-props-toggle{padding:0;}.graphic-modal-header .graphic-props-toggle-btn{position:static;right:auto;}.graphic-modal-body{overflow-y:auto;overflow-x:auto;}.graphic-modal-footer{border-top:1px solid #eee;padding:10px 16px;display:flex;gap:8px;justify-content:flex-end;}.graphic-filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}.graphic-table{width:100%;border-collapse:collapse;}.graphic-table th,.graphic-table td{border-bottom:1px solid #f0f0f0;padding:8px;text-align:left;font-size:13px;}.graphic-table thead th{background:#fafafa;}.graphic-table tr:hover{background:#f7fbff;}.graphic-wrap{white-space:normal;word-break:break-word;}.graphic-pagination{display:flex;align-items:center;gap:6px;padding:10px 0;}.graphic-page-btn{border:1px solid #d9d9d9;background:#fff;border-radius:6px;height:30px;padding:0 8px;cursor:pointer;}.graphic-page-btn.graphic-active{background:#e6f4ff;border-color:#91caff;}.graphic-element-box{position:absolute;z-index:1;line-height:normal;font-size:initial;}.graphic-element-box.graphic-selected{border-color:#1677ff;}.graphic-text-container{display:inline-block;position:absolute;overflow:hidden;}.graphic-text-element{display:block;width:100%;white-space:pre-wrap;word-break:break-word;}.graphic-canvas:hover{cursor:default;}.graphic-element-box:hover{cursor:pointer;}.graphic-area-element:hover{cursor:pointer;}.graphic-shape-element:hover{cursor:pointer;}.graphic-canvas-panel.graphic-fit{overflow-x:hidden;}.graphic-context-menu{position:fixed;z-index:9999;background:#fff;border:1px solid #eee;border-radius:6px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:4px 0;min-width:160px;display:none;}.graphic-context-menu-item{padding:8px 12px;font-size:13px;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;}.graphic-context-menu-item:hover{background-color:#f5f5f5;color:#1677ff;}.graphic-context-menu-item .type-badge{font-size:11px;padding:1px 4px;background:#f0f0f0;border-radius:4px;color:#666;margin-right:8px;min-width:40px;text-align:center;}.graphic-context-menu-item.active{color:#1677ff;font-weight:500;background-color:#e6f4ff;}