:root{--color-primary: #007acc;--color-primary-hover: #005aa3;--color-primary-text: #ffffff;--color-bg-body: #ffffff;--color-bg-surface: #fafafa;--color-bg-subtle: #f5f5f5;--color-bg-hover: #f0f0f0;--color-bg-active: #ececec;--color-bg-canvas: #f5f5f5;--color-bg-drop: #e3f2fd;--color-bg-overlay-strong: rgba(0, 0, 0, .72);--color-bg-overlay-medium: rgba(0, 0, 0, .48);--color-bg-overlay-light: rgba(0, 0, 0, .1);--color-bg-control: rgba(255, 255, 255, .55);--color-bg-focus-ring: rgba(0, 122, 204, .16);--color-bg-menu-item-hover: #e0e7ff;--color-bg-menu-item-active: #c7d2fe;--color-bg-gradient-header-end: #f4f7fc;--color-bg-gradient-start-a: #f4f7fb;--color-bg-gradient-start-b: #e7eef8;--color-bg-gradient-panel-a: #eef6ff;--color-bg-gradient-panel-b: #fbfdff;--color-bg-gradient-panel-c: #f8fbff;--color-bg-gradient-warning-a: #fff8d9;--color-bg-gradient-warning-b: #fffef7;--color-bg-gradient-danger-a: #fff0f0;--color-bg-gradient-danger-b: #fff8f8;--color-bg-dark: #111111;--color-bg-info: #f7fbff;--color-bg-note: #f4f9ff;--color-bg-overlay-card: rgba(0, 0, 0, .62);--color-border: #cccccc;--color-border-subtle: #dddddd;--color-border-input: #d4d4d4;--color-border-tag: #bad7ff;--color-border-emphasis: #b8b8b8;--color-border-splitter: #dddddd;--color-border-focus: var(--color-primary);--color-border-muted: #d8d8d8;--color-border-muted-2: #d2d2d2;--color-border-soft: #c9c9c9;--color-border-info: #a9c8ec;--color-border-note: #b7d1ed;--color-border-danger-strong: #d64545;--color-border-danger-soft: #e39898;--color-border-warning: #d9a406;--color-border-on-dark: rgba(255, 255, 255, .45);--color-text-primary: #333333;--color-text-secondary: #444444;--color-text-muted: #666666;--color-text-faint: #999999;--color-text-on-dark: #ffffff;--color-text-subtle: #6a6a6a;--color-text-disabled: #bdbdbd;--color-text-inverse-accent: #1d4ed8;--color-text: var(--color-text-primary);--color-text-danger: #8a2f2f;--color-danger: #b42318;--color-danger-bg: #fff5f4;--color-danger-border: #f0c9c5;--color-danger-bg-hover: #fee4e2;--color-danger-border-hover: #e9a9a3;--color-tag-bg: #eaf3ff;--color-tag-text: #16406d;--color-tag-bg-hover: #dcecff;--color-highlight: #ffe066;--color-success: #0c6b3a;--color-success-bg: rgba(12, 107, 58, .96);--color-success-border: rgba(12, 107, 58, .35);--color-success-solid: #26a65b;--color-accent-soft-outline: rgba(48, 106, 185, .22);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-full: 999px;--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: 14px;--space-3: 10px;--space-3-5: 18px;--space-4: 20px;--space-5: 24px;--space-8: 40px;--space-6: 16px;--space-7: 12px;--space-0-5: 2px;--space-0-75: 3px;--font-size-xs: .8rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-md: 1.15rem;--font-size-lg: 1.25rem;--font-size-icon: 2rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-medium: .12s ease;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 16px rgba(0, 0, 0, .1);--shadow-lg: 0 18px 40px rgba(0, 0, 0, .18);--shadow-elevated: 0 10px 22px rgba(0, 0, 0, .12);--shadow-canvas: 0 10px 28px rgba(0, 0, 0, .08);--sidebar-width: 300px;--toolbar-padding: 8px;--footer-padding: 8px}*,*:before,*:after{box-sizing:border-box}app-root{display:block;width:100%;height:100%;max-width:100%;min-width:0;overflow:hidden}html{font-size:14px}html,body{height:100%;width:100%;margin:0}body{overflow:hidden;height:100vh;box-sizing:border-box;padding:var(--space-3);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:var(--font-size-base)}.canvas-container{border:1px solid var(--color-border);background:var(--color-bg-body);box-sizing:border-box}mark.search-highlight{background:var(--color-highlight);color:inherit;border-radius:var(--space-0-5);padding:0 var(--space-1)}.orientation-menu{position:relative}.orientation-btn{width:auto;padding:0 var(--space-1-75);gap:var(--space-1)}.orientation-menu-panel{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:210px;background:var(--color-bg-body);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md)}.orientation-option{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer}.orientation-option:hover{background:var(--color-bg-subtle)}.orientation-option fa-icon:last-child{margin-left:auto}.orientation-btn.active{background:var(--color-primary);color:var(--color-primary-text);border-color:var(--color-primary)}hr,.hr,.vr{border:none;background:var( --color-border-splitter)}hr,.hr{height:1px;width:100%;margin:var(--space-1-5) 0}.vr{width:1px;height:100%;margin:0 var(--space-1-5)}.scroll-container-vertical{overflow-x:hidden;overflow-y:auto}