:root{--bg-surface:#0c1322;--bg-surface-dim:#0c1322;--bg-surface-bright:#323949;--bg-surface-container-lowest:#070e1d;--bg-surface-container-low:#141b2b;--bg-surface-container:#191f2f;--bg-surface-container-high:#232a3a;--bg-surface-container-highest:#2e3545;--on-surface:#dce2f7;--on-surface-variant:#c2c6d6;--inverse-surface:#dce2f7;--inverse-on-surface:#293040;--outline:#8c909f;--outline-variant:#424754;--outline-dark:#222938;--primary:#ff804e;--primary-blue:#ff5312;--primary-blue-hover:#e64200;--on-primary:#fff;--primary-container:#ff5312;--on-primary-container:#fff;--secondary:#ff804e;--on-secondary:#fff;--secondary-container:#ff5312;--on-secondary-container:#fff;--tertiary:#ffb95f;--on-tertiary:#472a00;--error:#ffb4ab;--on-error:#690005;--background:#0c1322;--on-background:#dce2f7;--dot-color:hsla(227,9%,59%,.12);--active-blue:#ff5312;--inactive-gray:#4b5563;--font-chrome:var(--font-dm-sans),"DM Sans",sans-serif;--font-canvas:var(--font-dm-sans),"DM Sans",sans-serif;--sidebar-left-width:196px;--sidebar-right-width:224px;--header-height:52px;--base-unit:4px;--shadow-card-hover:0 6px 24px rgba(0,0,0,.35);--shadow-menu:0 8px 32px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);--shadow-modal:0 12px 32px rgba(0,0,0,.6);--shadow-drawer:-10px 0 30px rgba(0,0,0,.5)}body.light-theme{--bg-surface:#f3f4f6;--bg-surface-dim:#e5e7eb;--bg-surface-bright:#fff;--bg-surface-container-lowest:#fff;--bg-surface-container-low:#f9fafb;--bg-surface-container:#f3f4f6;--bg-surface-container-high:#e5e7eb;--bg-surface-container-highest:#d1d5db;--on-surface:#111827;--on-surface-variant:#4b5563;--inverse-surface:#1f2937;--inverse-on-surface:#f9fafb;--outline:#6b7280;--outline-variant:#d1d5db;--outline-dark:#e5e7eb;--background:#f3f4f6;--on-background:#111827;--dot-color:rgba(17,24,39,.12);--shadow-card-hover:0 4px 12px rgba(0,0,0,.06);--shadow-menu:0 4px 16px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06);--shadow-modal:0 12px 32px rgba(0,0,0,.15);--shadow-drawer:-10px 0 30px rgba(0,0,0,.15)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-chrome)!important}.canvas-page-wrapper{background-color:var(--background);color:var(--on-surface);font-family:var(--font-chrome);font-size:14px;height:100vh;overflow:hidden;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-surface-container-lowest)}::-webkit-scrollbar-thumb{background:var(--outline-variant)}::-webkit-scrollbar-thumb:hover{background:var(--outline)}.top-nav{height:var(--header-height);background-color:var(--bg-surface-container-lowest);border-bottom:1px solid var(--outline-variant);justify-content:space-between;padding:0 16px;z-index:100;-webkit-user-select:none;-moz-user-select:none;user-select:none}.nav-left,.nav-right,.top-nav{display:flex;align-items:center}.nav-left,.nav-right{gap:16px}.back-btn-tactical{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--outline-variant);border-radius:4px;color:var(--on-surface-variant);background:transparent;transition:all .15s ease;cursor:pointer}.back-btn-tactical:hover{color:var(--on-surface);border-color:var(--outline);background-color:var(--bg-surface-container-low)}.breadcrumb-link{color:var(--outline);text-decoration:none;transition:color .15s ease}.breadcrumb-link:hover{color:var(--on-surface)}.nav-links{display:flex;gap:8px}.nav-link{font-size:13px;font-weight:500;color:var(--on-surface-variant);padding:6px 12px;position:relative;transition:color .15s ease}.nav-link.active,.nav-link:hover{color:var(--on-surface)}.nav-link.active{font-weight:600}.nav-link.active:after{content:"";position:absolute;bottom:-15px;left:0;width:100%;height:2px;background-color:var(--primary-blue)}.project-title{font-size:9.75px;text-transform:uppercase}.nav-actions{display:flex;gap:4px}.icon-btn{background:none;border:none;color:var(--on-surface-variant);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;transition:all .15s ease}.icon-btn:hover{color:var(--on-surface);background-color:var(--bg-surface-container-low)}.nav-divider{width:1px;height:20px;background-color:var(--outline-variant)}.nav-btn-save{background-color:var(--primary-blue);border:1px solid var(--primary-blue);color:#fff;padding:6px 16px;font-weight:500;font-size:13px;cursor:pointer;transition:all .15s ease;border-radius:4px}.nav-btn-save:hover{background-color:var(--primary-blue-hover);border-color:var(--primary-blue-hover)}.nav-btn-export{background:transparent;border:1px solid var(--outline);color:var(--on-surface);padding:6px 16px;font-weight:500;font-size:13px;cursor:pointer;transition:all .15s ease;border-radius:4px}.nav-btn-export:hover{background-color:var(--bg-surface-container-low);border-color:var(--on-surface)}.app-container{display:flex;flex:1 1;height:calc(100vh - var(--header-height));overflow:hidden;position:relative}.panel-splitter{width:4px;background-color:var(--outline-variant);flex-shrink:0;z-index:20;transition:background-color .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.panel-splitter.active,.panel-splitter:hover{background-color:var(--primary-blue)}.sidebar-left{width:var(--sidebar-left-width);flex-shrink:0;background-color:var(--bg-surface-container-lowest);border-right:1px solid var(--outline-variant);justify-content:space-between;padding:16px 0;z-index:10;box-shadow:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sidebar-left,.sidebar-top{display:flex;flex-direction:column}.sidebar-top{padding:0 12px}.add-collection-btn{background-color:var(--secondary-container);color:var(--bg-surface-container-lowest);font-family:var(--font-chrome);font-weight:560;font-size:10px;border:none;width:100%;height:28px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:background-color .15s ease;border-radius:4px;margin:0 auto}.add-collection-btn:hover{background-color:var(--secondary)}.navigation-label{font-size:7.5px;font-weight:525;text-transform:uppercase;letter-spacing:.05em;color:var(--outline);margin-bottom:12px}.sidebar-nav{display:flex;flex-direction:column;gap:4px}.sidebar-link{height:36px;display:flex;align-items:center;padding:0 8px;gap:8px;color:var(--on-surface-variant);font-size:9.75px;font-weight:375;transition:all .15s ease;border-left:2px solid transparent}.sidebar-link.active,.sidebar-link:hover{color:var(--on-surface);background-color:var(--bg-surface-container-low)}.sidebar-link.active{border-left-color:var(--primary-blue);font-weight:450}.link-icon{flex-shrink:0;opacity:.7}.sidebar-link.active .link-icon{opacity:1;color:var(--primary-blue)}.sidebar-bottom{padding:0 12px;display:flex;flex-direction:column;gap:12px}.user-profile{gap:8px;background-color:var(--bg-surface-container-low);border:1px solid var(--outline-variant);padding:6px 8px}.user-avatar,.user-profile{display:flex;align-items:center}.user-avatar{width:24px;height:24px;justify-content:center;background-color:var(--bg-surface-container-high);border-radius:50%;overflow:hidden}.user-info{display:flex;flex-direction:column}.username{font-weight:450;font-size:9.75px;color:var(--on-surface)}.status{font-size:8.25px;color:var(--outline)}.sidebar-footer-links{display:flex;gap:12px;padding-left:4px}.footer-link{font-size:9px;color:var(--outline);display:flex;align-items:center;gap:6px;transition:color .15s ease}.footer-link:hover{color:var(--on-surface)}.sidebar-right{width:var(--sidebar-right-width);flex-shrink:0;background-color:var(--bg-surface-container-lowest);border-left:1px solid var(--outline-variant);display:flex;flex-direction:column;z-index:10;box-shadow:none;transition:transform .2s cubic-bezier(.4,0,.2,1);transform:translateX(0)}.sidebar-right.hidden{width:0;overflow:hidden;border-left:none}.inspector-header{height:48px;padding:0 16px;border-bottom:1px solid var(--outline-variant);display:flex;justify-content:space-between;align-items:center}.inspector-title{font-weight:700;font-size:14px;letter-spacing:-.01em}.close-btn{background:none;border:none;color:var(--outline);cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color .15s ease}.close-btn:hover{color:var(--on-surface)}.inspector-content{flex:1 1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:20px}.inspector-section{display:flex;flex-direction:column;gap:12px}.section-label{font-size:10px;font-weight:700;color:var(--outline);letter-spacing:.05em}.form-group{display:flex;flex-direction:column;gap:6px}.input-label{font-size:11px;color:var(--on-surface-variant)}.text-input{background-color:var(--bg-surface-container-low);border:1px solid var(--outline-variant);color:var(--on-surface);font-family:var(--font-chrome);font-size:13px;height:36px;padding:0 10px;width:100%;outline:none;border-radius:0;transition:border-color .15s ease}.text-input:focus{border-color:var(--primary-blue)}.text-input-add{font-style:italic;font-size:12px}.fields-list{display:flex;flex-direction:column;border:1px solid var(--outline-variant)}.field-item-container{display:flex;flex-direction:column;border-bottom:1px solid var(--outline-variant);background-color:var(--bg-surface-container)}.field-item-container:last-child{border-bottom:none}.field-item{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 8px}.field-phone-config{display:flex;align-items:center;gap:8px;padding:6px 8px 10px 30px;border-top:1px solid rgba(66,71,84,.2);background-color:var(--bg-surface-container-low)}.phone-country-select{background-color:var(--bg-surface-container-high);border:1px solid var(--outline-variant);color:var(--on-surface);font-family:var(--font-chrome);font-size:11px;height:24px;padding:0 4px;outline:none;border-radius:0;cursor:pointer;max-width:130px}.phone-country-select:focus{border-color:var(--primary-blue)}.phone-number-input{background-color:var(--bg-surface-container-high);border:1px solid var(--outline-variant);color:var(--on-surface);font-family:var(--font-canvas);font-size:12px;height:24px;padding:0 8px;outline:none;border-radius:0;flex:1 1}.phone-number-input:focus{border-color:var(--primary-blue)}.field-left{gap:8px;flex:1 1}.drag-handle,.field-left{display:flex;align-items:center}.drag-handle{color:var(--outline);cursor:-webkit-grab;cursor:grab}.drag-handle:active{cursor:-webkit-grabbing;cursor:grabbing}.field-name-input{background:transparent;border:none;color:var(--on-surface);font-family:var(--font-chrome);font-size:13px;outline:none;width:100%}.field-right{display:flex;align-items:center;gap:8px}.field-indicator-btn{background:none;border:none;color:var(--outline);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px;transition:color .15s ease}.field-indicator-btn.active.key{color:var(--tertiary)}.field-indicator-btn.active.link{color:var(--primary-blue)}.field-item-delete{background:none;border:none;color:var(--outline);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease}.field-item-delete:hover{color:var(--error)}.canvas-workspace{flex:1 1;position:relative;overflow:hidden;background-color:var(--bg-surface-dim);background-image:radial-gradient(var(--dot-color) 1px,transparent 1px);background-size:16px 16px}.canvas-grid{position:absolute;top:0;left:0;width:0;height:0;overflow:visible;transform-origin:0 0;cursor:-webkit-grab;cursor:grab}.canvas-grid:active{cursor:-webkit-grabbing;cursor:grabbing}.connections-layer{position:absolute;top:0;left:0;width:3000px;height:3000px;pointer-events:none;z-index:5;overflow:visible}.connection-line{fill:none;stroke:var(--on-surface-variant);stroke-width:1.8;stroke-dasharray:4 4;opacity:.85;transition:stroke-width .15s ease,opacity .15s ease,stroke .15s ease;pointer-events:none}.connection-line.highlight{stroke-width:2.5;opacity:1;stroke:var(--primary)}.connection-line.dimmed{opacity:.45;stroke-width:1.2;stroke-dasharray:2 4}.connection-line.selected-focus{stroke-width:2.5;stroke:#3b82f6;stroke-dasharray:4 4;opacity:1}.db-card.related-focus{border-color:rgba(255,83,18,.65);box-shadow:0 0 12px var(--shadow-glow)}.canvas-nodes-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.db-card{position:absolute;width:220px;background-color:var(--bg-surface-container);border:1px solid var(--outline-variant);pointer-events:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2;border-radius:0;transition:border-color .15s ease,box-shadow .15s ease,opacity .15s ease}.db-card:hover{border-color:var(--outline)}.db-card.selected{border-color:var(--primary-blue)}.db-card.highlight{box-shadow:0 0 12px var(--shadow-glow)}.db-card.dragging{border-color:var(--primary-blue);box-shadow:0 0 16px var(--shadow-glow);opacity:.8;z-index:1000}.db-card-coords-indicator{font-family:var(--font-canvas);font-size:9px;color:var(--outline);background-color:var(--bg-surface-container-lowest);padding:1px 4px;margin-left:8px;display:none;border:1px solid var(--outline-variant)}.db-card.dragging .db-card-coords-indicator{display:inline-block}.db-card-header{height:38px;background-color:var(--bg-surface-container-high);border-bottom:1px solid var(--outline-variant);display:flex;justify-content:space-between;align-items:center;padding:0 10px;cursor:move;position:relative}.db-card-title{font-family:var(--font-canvas);font-weight:700;font-size:13px;color:var(--primary-blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1}.db-card-menu-btn{background:none;border:none;color:var(--outline);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px}.db-card-fields{display:flex;flex-direction:column}.db-card-field-row{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-family:var(--font-canvas);font-size:12px;color:var(--on-surface-variant);border-bottom:1px solid rgba(66,71,84,.2);position:relative}.db-card-field-row:last-child{border-bottom:none}.db-card-field-left{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-card-field-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.db-card-field-icon.key{color:var(--tertiary)}.db-card-field-icon.link{color:var(--primary-blue)}.db-card-field-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-card-field-type{font-size:10px;opacity:.5;text-transform:uppercase}.field-port{position:absolute;width:8px;height:8px;background-color:var(--bg-surface-container-high);border:1px solid var(--outline-variant);border-radius:50%;top:50%;transform:translateY(-50%);z-index:5;cursor:crosshair;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.field-port:hover{background-color:var(--primary-blue);border-color:var(--primary-blue);box-shadow:0 0 8px var(--primary-blue)}.field-port.port-left{left:-5px}.field-port.port-right{right:-5px}.zoom-controls{position:absolute;bottom:24px;right:24px;background-color:var(--bg-surface-container);border:1px solid var(--outline-variant);display:flex;flex-direction:column;z-index:5;-webkit-user-select:none;-moz-user-select:none;user-select:none}.zoom-btn{background:none;border:none;color:var(--on-surface-variant);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;border-bottom:1px solid var(--outline-variant)}.zoom-btn:last-child{border-bottom:none}.zoom-btn:hover{background-color:var(--bg-surface-container-high);color:var(--on-surface)}.zoom-level{height:36px;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--outline-variant);color:var(--on-surface-variant);font-family:var(--font-canvas)}.minimap-container,.zoom-level{background-color:var(--bg-surface-container-low)}.minimap-container{position:absolute;bottom:24px;left:24px;width:140px;height:100px;border:1px solid var(--outline-variant);z-index:5;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.minimap-viewport{position:absolute;border:1px solid rgba(59,130,246,.4);background-color:rgba(59,130,246,.05);pointer-events:none}.minimap-node{position:absolute;background-color:var(--primary-blue);opacity:.6}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(7,14,29,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-card{width:640px;background-color:var(--bg-surface-container);border:1px solid var(--outline-variant);display:flex;flex-direction:column;max-height:80vh;border-radius:0;transform:translateY(20px);transition:transform .2s cubic-bezier(.4,0,.2,1)}.modal-overlay.active .modal-card{transform:translateY(0)}.modal-header{height:48px;padding:0 16px;border-bottom:1px solid var(--outline-variant);display:flex;justify-content:space-between;align-items:center}.modal-title{font-weight:700;font-size:15px}.modal-close{background:none;border:none;color:var(--outline);cursor:pointer;font-size:16px}.modal-close:hover{color:var(--on-surface)}.modal-tabs{display:flex;border-bottom:1px solid var(--outline-variant);background-color:var(--bg-surface-container-low)}.modal-tab{background:none;color:var(--on-surface-variant);padding:12px 20px;font-size:13px;font-weight:500;cursor:pointer;border:none;border-bottom:2px solid transparent;transition:all .15s ease}.modal-tab.active,.modal-tab:hover{color:var(--on-surface)}.modal-tab.active{border-bottom-color:var(--primary-blue);font-weight:600}.modal-content{flex:1 1;overflow-y:auto;padding:16px;background-color:var(--bg-surface-container-lowest)}.code-view{margin:0;font-family:var(--font-canvas);font-size:13px;line-height:1.5;color:var(--on-surface);white-space:pre-wrap}.modal-actions{height:56px;border-top:1px solid var(--outline-variant);display:flex;justify-content:flex-end;align-items:center;padding:0 16px;gap:12px}.modal-btn{height:36px;padding:0 16px;font-size:13px;font-weight:600;cursor:pointer;border-radius:0;transition:all .15s ease}.modal-btn.primary{background-color:var(--primary-blue);border:1px solid var(--primary-blue);color:#fff}.modal-btn.primary:hover{background-color:var(--primary-blue-hover);border-color:var(--primary-blue-hover)}.modal-btn.secondary{background:transparent;border:1px solid var(--outline);color:var(--on-surface)}.modal-btn.secondary:hover{border-color:var(--on-surface);background-color:var(--bg-surface-container-low)}.sql-keyword{color:#569cd6;font-weight:700}.sql-type{color:#4ec9b0}.sql-string{color:#ce9178}.sql-comment{color:#6a9955;font-style:italic}.sql-constraint{color:#c586c0}.toast-container{position:fixed;bottom:24px;left:24px;display:flex;flex-direction:column;gap:8px;z-index:10000;pointer-events:none}.toast{background-color:var(--bg-surface-container-highest);border:1px solid var(--primary-blue);color:var(--on-surface);padding:10px 20px;font-size:13px;font-weight:500;pointer-events:auto;animation:toast-in .25s cubic-bezier(0,0,.2,1),toast-out .25s cubic-bezier(.4,0,1,1) 2.75s forwards;border-radius:0}@keyframes toast-in{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}.db-card-delete-btn{background:none;border:none;color:var(--outline);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px;transition:color .15s ease}.db-card-delete-btn:hover{color:var(--error)}.panel-splitter{width:6px;margin:0 -3px;background-color:transparent;cursor:col-resize;z-index:50;position:relative}.panel-splitter:after{content:"";position:absolute;top:0;left:2px;width:2px;height:100%;background-color:var(--outline-variant);transition:background-color .15s ease}.panel-splitter.active:after,.panel-splitter:hover:after{background-color:var(--primary-blue)}.history-drawer-overlay{position:fixed;inset:0;background-color:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;opacity:0;pointer-events:none;transition:opacity .4s ease}.history-drawer-overlay.active{opacity:1;pointer-events:auto}.history-drawer{position:fixed;top:0;right:-60%;width:60%;max-width:none;height:100vh;background-color:var(--bg-surface-container-lowest);-webkit-backdrop-filter:none;backdrop-filter:none;border-left:1px solid var(--outline-variant);z-index:10000;transition:right .4s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:none;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.history-drawer.active{right:0}.history-drawer-header{height:var(--header-height);padding:0 20px;border-bottom:1px solid hsla(0,0%,100%,.1);display:flex;justify-content:space-between;align-items:center;background-color:transparent}.history-drawer-title{font-family:var(--font-canvas);font-weight:700;font-size:12px;letter-spacing:.05em;color:var(--primary-blue)}.history-drawer-close{background:none;border:none;color:var(--outline);cursor:pointer;font-size:16px;transition:color .15s ease}.history-drawer-close:hover{color:var(--on-surface)}.history-drawer-content{flex:1 1;overflow-y:auto;padding:24px 48px;display:flex;flex-direction:column;gap:16px;background-color:transparent;font-family:var(--font-canvas)}.history-log-item{border-bottom:1px solid var(--outline-dark);padding-bottom:12px;line-height:1.6}.history-log-item:last-child{border-bottom:none}.history-log-time{font-size:11px;color:var(--outline);margin-bottom:4px}.history-log-action{font-size:13px;color:var(--on-surface)}.history-log-meta{font-size:11px;color:var(--primary-blue);margin-top:2px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.spinner{animation:spin 1s linear infinite}:root{--brand-blue:#ff5312;--brand-blue-hover:#e64200;--brand-blue-glow:rgba(255,83,18,.18)}.templates-workspace{flex:1 1;display:flex;overflow:hidden;background-color:var(--bg-surface-dim)}.templates-main-content{flex:1 1;display:flex;flex-direction:column;padding:24px;overflow-y:auto;border-right:1px solid var(--outline-variant)}.templates-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.templates-title{font-family:var(--font-chrome);font-size:20px;font-weight:600;color:var(--on-surface);margin-bottom:4px}.templates-subtitle{font-family:var(--font-chrome);font-size:13px;color:var(--on-surface-variant)}.view-toggles{display:flex;border:1px solid var(--outline-variant);border-radius:4px;overflow:hidden;background-color:var(--bg-surface-container-low)}.view-toggle-btn{background:transparent;border:none;color:var(--outline);padding:6px 10px;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.view-toggle-btn:hover{color:var(--on-surface);background-color:var(--bg-surface-container)}.view-toggle-btn.active{color:var(--brand-blue);background-color:var(--bg-surface-container-high)}.templates-filters{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}.filter-chip{background-color:var(--bg-surface-container-low);border:1px solid var(--outline-variant);color:var(--on-surface-variant);padding:6px 12px;font-size:12px;font-weight:500;border-radius:4px;cursor:pointer;transition:all .15s ease}.filter-chip:hover{border-color:var(--outline);color:var(--on-surface)}.filter-chip.active{background-color:var(--brand-blue-glow);border-color:var(--brand-blue);color:var(--on-surface);box-shadow:0 0 8px var(--brand-blue-glow)}.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:16px;gap:16px;align-content:start}.starter-card{background-color:var(--bg-surface-container-low);border:1px solid var(--outline-variant);padding:16px;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.starter-card:hover{transform:translateY(-2px);border-color:var(--outline)}.starter-card.selected,.starter-card:hover{background-color:var(--bg-surface-container)}.starter-card.selected{border-color:var(--brand-blue);box-shadow:0 0 12px var(--brand-blue-glow)}.starter-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background-color:transparent;transition:background-color .2s ease}.starter-card.selected:before{background-color:var(--brand-blue)}.starter-card-header{display:flex;justify-content:space-between;align-items:center}.starter-card-title{font-size:15px;font-weight:600;color:var(--on-surface);font-family:var(--font-chrome)}.starter-card-category{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--outline);letter-spacing:.05em;background-color:var(--bg-surface-container-high);padding:2px 6px;border-radius:2px}.starter-card-desc{font-size:12px;color:var(--on-surface-variant);line-height:1.5;min-height:36px}.starter-card-stats{display:flex;gap:12px;font-size:11px;color:var(--outline);border-top:1px solid var(--outline-dark);padding-top:10px;margin-top:4px}.starter-card-stat{display:flex;align-items:center;gap:4px}.starter-card-tables-preview{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.starter-table-tag{font-family:var(--font-canvas);font-size:10px;background-color:var(--bg-surface-container-highest);color:var(--on-surface-variant);padding:1px 5px;border:1px solid var(--outline-variant)}.templates-list-wrapper{overflow-x:auto;background-color:var(--bg-surface-container-lowest);border:1px solid var(--outline-variant)}.templates-list-table{width:100%;border-collapse:collapse;text-align:left}.templates-list-table td,.templates-list-table th{padding:12px 16px;border-bottom:1px solid var(--outline-dark)}.templates-list-table th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--outline);font-weight:600;background-color:var(--bg-surface-container-lowest)}.templates-list-table tbody tr{cursor:pointer;transition:all .15s ease}.templates-list-table tbody tr:hover{background-color:var(--bg-surface-container-low)}.templates-list-table tbody tr.selected{background-color:var(--bg-surface-container);color:var(--on-surface);border-left:3px solid var(--brand-blue)}.template-detail-panel{width:320px;min-width:320px;background-color:var(--bg-surface-container-lowest);display:flex;flex-direction:column;overflow:hidden;border-left:1px solid var(--outline-variant)}.detail-header{padding:20px;border-bottom:1px solid var(--outline-variant)}.detail-title{font-size:16px;font-weight:600;color:var(--on-surface);margin-bottom:4px}.detail-category{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--brand-blue);letter-spacing:.05em}.detail-body{flex:1 1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}.detail-desc{font-size:12.5px;color:var(--on-surface-variant);line-height:1.5}.detail-section-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--outline);letter-spacing:.05em;margin-bottom:8px}.detail-collections-list{display:flex;flex-direction:column;gap:6px}.detail-col-item{background-color:var(--bg-surface-container-low);border:1px solid var(--outline-variant);padding:8px 10px}.detail-col-name{font-family:var(--font-canvas);font-size:12px;font-weight:600;color:var(--on-surface);margin-bottom:4px}.detail-col-fields{font-size:11px;color:var(--outline);line-height:1.4}.detail-connections-list{display:flex;flex-direction:column;gap:6px}.detail-conn-item{font-family:var(--font-canvas);font-size:11px;color:var(--on-surface-variant);padding:6px 10px;border-left:2px solid var(--brand-blue)}.detail-conn-item,.detail-footer{background-color:var(--bg-surface-container-low)}.detail-footer{padding:20px;border-top:1px solid var(--outline-variant);display:flex;flex-direction:column;gap:16px}.btn-import-starter{width:100%;background-color:var(--brand-blue);color:#fff;border:none;padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;text-align:center}.btn-import-starter:hover:not(:disabled){background-color:var(--brand-blue-hover);box-shadow:0 0 10px var(--brand-blue-glow)}.btn-import-starter:disabled{background-color:var(--bg-surface-container-highest);color:var(--outline);cursor:not-allowed;border:1px solid var(--outline-variant)}.quick-tip-box{display:flex;gap:8px;background-color:var(--bg-surface-container-lowest);border:1px solid var(--outline-variant);padding:10px;border-radius:4px}.quick-tip-icon{color:var(--brand-blue);flex-shrink:0;margin-top:2px}.quick-tip-text{font-size:11px;color:var(--on-surface-variant);line-height:1.4}.step-indicator{font-size:11px;color:var(--primary-btn);text-transform:uppercase;font-weight:700;margin-bottom:4px;letter-spacing:.1em}.signup-step{display:flex;flex-direction:column;gap:20px}.signup-step-hidden{display:none}.step-hint{font-size:13px;color:var(--on-surface-variant);margin-top:-8px}.modal-box-settings{width:400px}.modal-box-confirm{width:380px}.confirm-message-text{color:var(--text);font-size:14px;margin:0;line-height:1.5}.modal-btn-confirm-action{background-color:var(--blue);border-color:var(--blue)}.nav-left-gap{gap:12px}.breadcrumb-separator{color:var(--outline-variant)}.project-title{color:var(--on-surface);font-weight:600}.shortcut-hint{text-align:center;font-size:9px;font-style:italic;color:var(--outline);margin-top:6px;margin-bottom:8px;font-family:var(--font-mono);letter-spacing:.05em}.user-info-flex{flex:1 1}.btn-logout{background:none;border:none;color:var(--outline);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;transition:color .15s ease}.btn-logout:hover{color:var(--on-surface)}.detail-section-hidden,.panel-splitter-hidden,.templates-workspace-hidden{display:none}.modal-card-supabase{width:480px}.modal-content-supabase{background-color:var(--bg-surface-container);display:flex;flex-direction:column;gap:16px;padding:20px;text-align:left}.form-group-left{text-align:left}.supabase-input-label{text-align:left;display:block;margin-bottom:4px}.supabase-status-banner-hidden{display:none;padding:10px;border-left:3px solid var(--primary-blue);background-color:var(--bg-surface-container-low);font-size:12px;color:var(--on-surface-variant);font-family:var(--font-chrome);line-height:1.4}.supabase-action-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;margin-top:4px}.modal-btn-flex{display:flex;align-items:center;justify-content:center;gap:6px}.btn-supabase-push{background-color:#3ecf8e;border-color:#3ecf8e;color:#0c1322}.direct-exec-container{border-top:1px solid var(--outline-variant);padding-top:12px;margin-top:8px}.direct-exec-title{font-size:10px;font-weight:700;color:var(--outline);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}.direct-exec-desc{font-size:11px;color:var(--on-surface-variant);line-height:1.4;margin-bottom:8px}.direct-exec-code{font-size:11px;padding:8px;margin-bottom:0;max-height:100px;overflow-y:auto;background-color:var(--bg-surface-container-low);border:1px solid var(--outline-variant)}