:root{--color-brand-navy-950: #0d1519;--color-brand-navy-900: #121d23;--color-brand-navy-800: #18252c;--color-brand-navy-700: #21343e;--color-brand-navy-600: #2d4754;--color-brand-navy-alpha-20: rgba(24, 37, 44, .16);--color-brand-navy-alpha-25: rgba(24, 37, 44, .22);--color-primary-50: #f0f7f8;--color-primary-100: #dcecee;--color-primary-200: #b9dcdf;--color-primary-300: #87c3c8;--color-primary-500: #248f93;--color-primary-600: #1b7a7e;--color-primary-700: #156266;--color-primary-800: #114e52;--color-primary-900: #0e3f42;--color-blue-50: var(--color-primary-50);--color-blue-100: var(--color-primary-100);--color-blue-200: var(--color-primary-200);--color-blue-300: var(--color-primary-300);--color-blue-500: var(--color-primary-500);--color-blue-600: var(--color-primary-600);--color-blue-700: var(--color-primary-700);--color-blue-800: var(--color-primary-800);--color-blue-900: var(--color-primary-900);--color-sky-50: #f1f7fb;--color-sky-100: #e0eef7;--color-sky-200: #c2dced;--color-sky-500: #2c7da8;--color-sky-600: #22668b;--color-sky-700: #1b516f;--color-teal-50: #f0f8f7;--color-teal-100: #dcefed;--color-teal-200: #baded9;--color-teal-600: #1e7a72;--color-teal-700: #17615b;--color-indigo-50: #f3f5fc;--color-indigo-100: #e5e9f8;--color-indigo-200: #ccd4f0;--color-indigo-700: #3f51a8;--color-purple-50: #f7f4fc;--color-purple-100: #ede7f8;--color-purple-200: #dcd0f0;--color-purple-700: #6443a6;--color-rose-50: #fdf3f5;--color-rose-100: #fbe6ea;--color-rose-200: #f5cdd5;--color-rose-600: #c23550;--color-rose-700: #a12940;--color-pink-50: #fcf3f7;--color-pink-100: #f8e6ef;--color-pink-200: #efcbe0;--color-pink-700: #9c2e64;--color-orange-50: #fdf7f0;--color-orange-100: #faecd9;--color-orange-200: #f3d6b0;--color-orange-700: #a85214;--color-cyan-50: #f0f8fa;--color-cyan-100: #dfeff4;--color-cyan-200: #c0dfe9;--color-cyan-700: #1d6980;--color-white: #ffffff;--color-white-alpha-90: rgba(255, 255, 255, .92);--color-slate-25: #fbfcfd;--color-slate-50: #f4f6f8;--color-slate-100: #edf1f5;--color-slate-200: #e1e6ed;--color-slate-300: #cfd7e0;--color-slate-400: #94a1b0;--color-slate-500: #647282;--color-slate-600: #495666;--color-slate-700: #323e4c;--color-slate-800: #202a35;--color-slate-900: #141c24;--color-success-50: #f1f9f5;--color-success-100: #def2e7;--color-success-200: #bfe4d0;--color-success-600: #1f7a53;--color-success-700: #186142;--color-emerald-50: #f1f9f5;--color-emerald-200: #bfe4d0;--color-emerald-600: #1f7a53;--color-emerald-700: #186142;--color-warning-50: #fff9ee;--color-warning-100: #fdf0d5;--color-warning-200: #f9dfa8;--color-warning-600: #b8620c;--color-warning-700: #934c08;--color-danger-50: #fef4f4;--color-danger-100: #fde6e6;--color-danger-200: #f9caca;--color-danger-400: #e56b6b;--color-danger-500: #d64545;--color-danger-600: #c23434;--color-danger-700: #9f2828;--color-danger-800: #822020;--surface-canvas: var(--color-slate-50);--surface-card: var(--color-white);--surface-zebra: var(--color-slate-25);--surface-row-hover: #f1f6f8;--surface-subtle: var(--color-slate-100);--surface-muted: var(--color-slate-200);--surface-brand: var(--color-brand-navy-800);--surface-brand-gradient: linear-gradient(135deg, #18252c 0%, #1e333c 100%);--surface-sidebar-gradient: linear-gradient(180deg, #18252c 0%, #131e24 100%);--surface-topbar-gradient: linear-gradient(90deg, #16232a 0%, #1d353e 100%);--surface-icon-badge: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);--surface-overlay: rgba(15, 24, 30, .46);--surface-overlay-strong: rgba(15, 24, 30, .58);--text-primary: var(--color-slate-900);--text-secondary: var(--color-slate-700);--text-body: var(--color-slate-600);--text-tertiary: var(--color-slate-500);--text-placeholder: var(--color-slate-400);--text-inverse: var(--color-white);--text-brand: var(--color-brand-navy-800);--text-link: var(--color-primary-600);--text-link-hover: var(--color-primary-700);--border-subtle: var(--color-slate-200);--border-row: #eaeff4;--border-default: var(--color-slate-300);--border-strong: var(--color-slate-400);--border-brand: var(--color-primary-200);--border-focus-ring: rgba(27, 122, 126, .14);--font-family-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;--font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--font-size-3xs: 9.5px;--font-size-2xs: 10px;--font-size-2xs-plus: 10.5px;--font-size-xs: 11px;--font-size-xs-plus: 11.5px;--font-size-sm: 12px;--font-size-sm-plus: 12.5px;--font-size-base: 13px;--font-size-base-plus: 13.5px;--font-size-md: 14px;--font-size-lg: 15px;--font-size-xl: 16px;--font-size-2xl: 17px;--font-size-3xl: 18px;--font-size-4xl: 20px;--font-size-display: 24px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--line-height-tight: 1.25;--line-height-snug: 1.4;--line-height-normal: 1.5;--line-height-relaxed: 1.65;--space-0: 0px;--space-0-5: 2px;--space-0-75: 3px;--space-1: 4px;--space-1-25: 5px;--space-1-5: 6px;--space-1-75: 7px;--space-2: 8px;--space-2-25: 9px;--space-2-5: 10px;--space-3: 12px;--space-3-5: 14px;--space-4: 16px;--space-4-5: 18px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--space-9: 36px;--space-10: 40px;--pad-tag-xs: 2px 6px;--pad-badge-sm: 2px 8px;--pad-control-sm: 6px 10px;--pad-control-md: 8px 12px;--pad-table-cell: 9px 12px;--pad-card-header: 10px 14px;--pad-panel-body: 12px 16px;--control-height-2xs: 24px;--control-height-xs: 26px;--control-height-sm: 28px;--control-height-sm-plus: 30px;--control-height-md: 32px;--control-height-md-plus: 34px;--control-height-lg: 36px;--control-height-lg-plus: 38px;--control-height-xl: 40px;--layout-topbar-height: 50px;--radius-2xs: 3px;--radius-xs: 5px;--radius-sm-plus: 6px;--radius-base: 7px;--radius-md-token: 8px;--radius-card: 10px;--radius-panel: 10px;--radius-modal: 12px;--radius-pill: 9999px;--shadow-xs: 0 1px 2px rgba(20, 28, 36, .04);--shadow-card: 0 1px 3px rgba(20, 28, 36, .04), 0 6px 16px -6px rgba(20, 28, 36, .05);--shadow-primary-btn: 0 2px 6px rgba(27, 122, 126, .2), inset 0 1px 0 rgba(255, 255, 255, .14);--shadow-brand-btn: 0 2px 6px rgba(24, 37, 44, .2), inset 0 1px 0 rgba(255, 255, 255, .1);--shadow-danger-card: 0 10px 24px -6px rgba(194, 52, 52, .09);--shadow-dropdown: 0 12px 30px -6px rgba(20, 28, 36, .13), 0 3px 8px -2px rgba(20, 28, 36, .05);--shadow-modal: 0 24px 48px -12px rgba(15, 24, 30, .24), 0 6px 16px -4px rgba(15, 24, 30, .08);--focus-ring-primary: 0 0 0 3px rgba(27, 122, 126, .14);--transition-fast: .13s cubic-bezier(.4, 0, .2, 1);--transition-base: .18s cubic-bezier(.4, 0, .2, 1);--transition-smooth: .24s cubic-bezier(.16, 1, .3, 1)}:root{--bg-app: var(--surface-canvas, #f4f6f8);--bg-surface: var(--surface-card, #ffffff);--bg-surface-subtle: var(--surface-subtle, #edf1f5);--bg-surface-active: var(--surface-muted, #e1e6ed);--border-light: var(--border-subtle, #e1e6ed);--border-medium: var(--border-default, #cfd7e0);--border-focus: var(--color-primary-600, #1b7a7e);--text-main: var(--text-primary, #141c24);--text-muted: var(--text-body, #495666);--text-dim: var(--text-placeholder, #94a1b0);--primary: var(--color-primary-600, #1b7a7e);--primary-hover: var(--color-primary-700, #156266);--primary-subtle: var(--color-primary-50, #f0f7f8);--primary-border: var(--color-primary-200, #b9dcdf);--teal: var(--color-teal-600, #2a7562);--teal-subtle: var(--color-teal-100, #e3f1ec);--teal-border: var(--color-teal-200, #c6e2d9);--success: var(--color-success-600, #1f7a53);--success-subtle: var(--color-success-100, #e1f3ea);--warning: var(--color-warning-600, #b8620c);--warning-subtle: var(--color-warning-100, #fdf0d5);--danger: var(--color-danger-600, #c23434);--danger-subtle: var(--color-danger-100, #fde6e6);--font-sans: var(--font-family-sans);--font-mono: var(--font-family-mono);--shadow-sm: var(--shadow-xs);--shadow-md: var(--shadow-card);--shadow-lg: var(--shadow-dropdown);--radius-sm: 5px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--z-sticky-header: 100;--z-dropdown-popover: 2000;--z-drawer-overlay: 5000;--z-modal-base: 9000;--z-modal-nested: 9500;--z-modal-confirm: var(--z-modal-nested);--z-global-dialog: 99999;--z-global-toast: 100000;--edc-navy: var(--color-brand-navy-800, #18252c);--edc-navy-dark: var(--color-brand-navy-900, #121d23);--btn-h-xs: 24px;--btn-h-sm: 26px;--btn-h-md: 32px;--btn-h-lg: 36px}*{box-sizing:border-box;margin:0;padding:0}button{white-space:nowrap;flex-shrink:0}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-main);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;height:100vh}svg.lucide{stroke-width:1.75}input:not([type=checkbox]):not([type=radio]),select,textarea{font-family:var(--font-sans);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}input:not([type=checkbox]):not([type=radio]):focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--primary);box-shadow:var(--focus-ring-primary)}.app-header{height:50px;background:var(--bg-surface);color:var(--text-main);display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--border-light);box-shadow:var(--shadow-xs);z-index:var(--z-sticky-header);flex-shrink:0;white-space:nowrap;overflow-x:auto;overflow-y:hidden;gap:8px;scrollbar-width:none}.app-header::-webkit-scrollbar{display:none}@media(max-width:1366px){.app-header{padding:0 8px;gap:5px}.app-header .header-db-text{display:none}}@media(max-width:1260px){.app-header{padding:0 6px;gap:4px}.app-header nav button{padding:3px 5px;font-size:11.5px;gap:3px}.header-btn-text{display:none}}@media(max-width:1220px){.app-header{padding:0 4px;gap:3px}.app-header .brand-badge{display:none}}.brand-badge{background:var(--primary-subtle);border:1px solid var(--primary-border);color:var(--primary);font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;letter-spacing:.3px;line-height:1.2;white-space:nowrap;flex-shrink:0}.pulse-dot{width:6.5px;height:6.5px;border-radius:50%;background-color:var(--success)}.designer-layout{display:flex;flex:1;height:100%;width:100%;min-width:0;overflow:hidden}.left-palette{width:252px;min-width:252px;max-width:252px;flex-shrink:0;background-color:var(--bg-surface);border-right:1px solid var(--border-light);display:flex;flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden;z-index:10}.canvas-area{flex:1;min-width:0;background-color:var(--bg-app);display:flex;flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden;position:relative}.right-inspector{width:292px;min-width:292px;max-width:292px;flex-shrink:0;background-color:var(--bg-surface);border-left:1px solid var(--border-light);display:flex;flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden;z-index:10;box-shadow:-1px 0 8px #141c2406}.field-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-8{grid-column:span 8}.col-12{grid-column:span 12}@media(max-width:1200px){.col-3,.col-4{grid-column:span 6}}@media(max-width:768px){.col-3,.col-4,.col-6,.col-8{grid-column:span 12}}.field-card{background-color:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:12px 14px;transition:all .16s ease;position:relative;cursor:pointer;display:flex;flex-direction:column;box-shadow:var(--shadow-xs)}.field-card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-card)}.field-card.selected{border-color:var(--primary);background-color:var(--primary-subtle);box-shadow:var(--focus-ring-primary)}.crf-paper-sheet{background-color:var(--bg-surface);border-radius:10px;border:1px solid var(--border-light);box-shadow:var(--shadow-card);max-width:1040px;width:100%;margin:0 auto;overflow:hidden;transition:all .2s ease}.crf-section-block{border-bottom:1px solid var(--bg-surface-subtle);padding:22px 28px;position:relative;transition:background-color .15s ease}.crf-section-block:last-child{border-bottom:none}.crf-section-block:hover{background-color:var(--color-slate-25)}.crf-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px dashed var(--border-light)}.crf-section-actions{display:flex;align-items:center;gap:4px;opacity:.6;transition:opacity .15s ease}.crf-section-block:hover .crf-section-actions{opacity:1}.crf-field-item{position:relative;padding:10px 12px;border-radius:8px;border:1px solid transparent;background-color:transparent;cursor:pointer;transition:all .15s ease}.crf-field-item:hover{border-color:var(--border-medium);background-color:var(--color-slate-50)}.crf-field-item.selected{border-color:var(--primary);background-color:var(--primary-subtle);box-shadow:var(--focus-ring-primary)}.field-floating-toolbar{position:absolute;top:4px;right:8px;display:none;align-items:center;gap:2px;background:#fffffff5;backdrop-filter:blur(8px);border:1px solid var(--border-light);border-radius:6px;padding:2px 4px;box-shadow:var(--shadow-card);z-index:15}.crf-field-item:hover .field-floating-toolbar,.crf-field-item.selected .field-floating-toolbar{display:flex}.floating-tool-btn{background:none;border:none;padding:3px 6px;border-radius:4px;color:var(--color-slate-500);font-size:11px;font-weight:500;display:inline-flex;align-items:center;gap:3px;cursor:pointer;transition:all .12s ease}.floating-tool-btn:hover{background-color:var(--bg-surface-active);color:var(--text-main)}.floating-tool-btn.btn-danger:hover{background-color:var(--danger-subtle);color:var(--danger)}.view-mode-capsule{display:inline-flex;align-items:center;background-color:var(--bg-surface-subtle);border:1px solid var(--border-light);border-radius:7px;padding:2px}.view-mode-option{padding:4px 10px;font-size:12px;font-weight:600;border-radius:5px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s ease;color:var(--color-slate-500);background-color:transparent}.view-mode-option.active{background-color:var(--bg-surface);color:var(--text-main);box-shadow:var(--shadow-xs)}.crf-grid-table-designer{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border-light);border-radius:8px;overflow:hidden;font-size:13px}.crf-grid-table-designer th{background-color:var(--color-slate-50);color:var(--color-slate-700);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border-light);border-right:1px solid var(--border-light);text-align:left;position:relative}.crf-grid-table-designer th:last-child{border-right:none}.crf-grid-table-designer th.col-selected{background-color:var(--primary-subtle);color:var(--primary-hover);border-bottom-color:var(--primary)}.crf-grid-table-designer td{padding:10px 12px;border-bottom:1px solid var(--bg-surface-subtle);border-right:1px solid var(--bg-surface-subtle);background-color:var(--bg-surface)}.crf-grid-table-designer td:last-child{border-right:none}.card-action-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:var(--text-dim);display:flex;align-items:center;justify-content:center;transition:all .15s ease}.card-action-btn:hover{background-color:var(--bg-surface-subtle);color:var(--color-slate-700)}.card-action-btn.btn-delete:hover{background-color:var(--danger-subtle);color:var(--danger)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:500;padding:6px 12px;border-radius:7px;border:1px solid transparent;cursor:pointer;transition:all .15s ease;user-select:none;white-space:nowrap}.btn-primary{background-color:var(--primary);color:var(--color-white);box-shadow:var(--shadow-primary-btn)}.btn-primary:hover{background-color:var(--primary-hover)}.btn-outline{background-color:var(--bg-surface);border-color:var(--border-medium);color:var(--text-main)}.btn-outline:hover{background-color:var(--bg-surface-subtle);border-color:var(--color-slate-400)}.btn-danger{background-color:var(--danger-subtle);color:var(--danger);border-color:var(--color-danger-200)}.btn-danger:hover{background-color:var(--color-danger-200)}.btn-sm{padding:4px 8px;font-size:12px;border-radius:5px}.form-input,.form-select,.form-textarea{width:100%;font-size:13px;padding:7px 10px;border-radius:7px;border:1px solid var(--border-medium);background-color:var(--bg-surface);color:var(--text-main);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);box-shadow:var(--focus-ring-primary)}.form-label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:4px}.modal-overlay,.modal-backdrop{position:fixed;inset:0;background-color:var(--surface-overlay);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal-base);padding:16px;animation:fadeIn .15s ease}.modal-content{background-color:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);max-width:680px;width:100%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;animation:modalEnter .2s cubic-bezier(.16,1,.3,1)}@keyframes modalEnter{0%{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-slate-300);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-slate-400)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}