.rail-dock{ flex-shrink:0; display:flex; flex-direction:row; align-items:center; height:100%; }
.icon-rail-dock{
  flex-shrink:0; height:100%;
  display:flex; z-index:16;
}
.icon-rail-dock.collapsed{ display:none; }
.icon-rail{
  width:72px;
  flex-shrink:0;
  background:var(--md-color-grey-white);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  padding:0px 8px 14px 8px;
  position:relative;
  z-index:16;
}
.icon-rail-btn{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  border:none; background:none; border-radius:16px; padding:10px 2px;
  font-family:var(--font-sans); font-size:var(--text-2xs); font-weight:var(--font-weight-light); color:var(--ui-muted); cursor:pointer;
}
.icon-rail-btn svg{ width:20px; height:20px; }
.icon-rail-divider{ height:1px; background:var(--ui-border); margin:4px 12px 6px; flex-shrink:0; }
.icon-rail-icon-wrap{ position:relative; display:inline-flex; }
.icon-rail-dot{ position:absolute; top:-3px; right:-6px; width:8px; height:8px; border-radius:50%; background:var(--ui-accent); border:1.5px solid var(--md-color-grey-white); }
.icon-rail-dot.hidden{ display:none; }
.rail-section[data-section="comments"]{ flex:1; min-height:0; }
.icon-rail-btn i{ font-size:var(--text-3xl); font-weight:var(--font-weight-regular); }
.icon-rail-btn:hover{ background:none; }
.icon-rail-btn:hover i{ font-weight:var(--font-weight-black); }
.icon-rail-btn:focus, .icon-rail-btn:focus-visible, .icon-rail-btn.active{ background:none; color:var(--ui-accent); outline:none; }
.icon-rail-btn:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:-2px; border-radius:8px; }
.icon-rail-btn:focus i, .icon-rail-btn:focus-visible i, .icon-rail-btn.active i{ font-weight:var(--font-weight-black); }
.omega-icon-wrap{ position:relative; width:20px; height:20px; }
.omega-icon{
  position:absolute; inset:0; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  transition:opacity .1s ease;
}
.omega-icon-regular{ -webkit-mask-image:url('../assets/logo/logo-ai-regular.svg'); mask-image:url('../assets/logo/logo-ai-regular.svg'); }
.omega-icon-solid{ opacity:0; -webkit-mask-image:url('../assets/logo/logo-ai-solid.svg'); mask-image:url('../assets/logo/logo-ai-solid.svg'); }
.icon-rail-btn-omega:hover .omega-icon-regular,
.icon-rail-btn-omega:focus .omega-icon-regular,
.icon-rail-btn-omega:focus-visible .omega-icon-regular,
.icon-rail-btn-omega.active .omega-icon-regular{ opacity:0; }
.icon-rail-btn-omega:hover .omega-icon-solid,
.icon-rail-btn-omega:focus .omega-icon-solid,
.icon-rail-btn-omega:focus-visible .omega-icon-solid,
.icon-rail-btn-omega.active .omega-icon-solid{ opacity:1; }

.rail-panel{
  display:none; overflow:hidden;
  background:var(--md-color-grey-white);
  flex-direction:column;
  position:relative;
  container-name:rail-panel;
  container-type:inline-size;
}
.rail-panel.open{ display:flex; width:300px; height:calc(100% - 12px); box-shadow: var(--shadow-panel); margin-left: 12px; margin-bottom: 12px; border-radius: 12px; z-index: 17; }
.rail-panel-resize-handle{ position:absolute; top:0; left:-3px; bottom:0; width:6px; cursor:col-resize; z-index:5; }
.rail-panel-resize-handle:hover, .rail-panel-resize-handle.resizing{ background:rgba(0,64,222,0.18); }
.rail-panel-header{ cursor:default; }
.rail-panel-body{ flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 14px 0; display:flex; flex-direction:column; gap:10px; scrollbar-width:none; }
.rail-panel-body::-webkit-scrollbar{ display:none; }
#componentCatFilterSeg{ flex-shrink:0; }
.rail-block{ display:flex; flex-direction:column; gap:8px; }
#layoutComposeBlock, #layoutFooterBlock{ margin-top:14px; }
.rail-block.hidden{ display:none; }
.rail-block-label{ font-size:var(--text-sm); font-weight:var(--font-weight-semibold); color:var(--ui-muted); text-transform:uppercase; letter-spacing:0.03em; }
.layout-compose-actions{ display:flex; gap:6px; }
.layout-compose-actions .btn{ flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap; }
.layout-compose-actions .btn i{ margin-right:4px; }
.layout-compose-hint{ font-size:var(--text-sm); color:var(--ui-muted); line-height:1.4; }
.layout-compose-hint:empty{ display:none; }
.layout-compose-hint.is-error{ color:var(--md-color-pink-500); }
.layout-preview-grid{
  display:grid; gap:4px; width:100%; aspect-ratio:16/9; padding:10px;
  border:1px solid var(--ui-border); border-radius:10px; background:var(--md-neutral-background-2-rest);
}
.layout-preview-cell{ background:var(--md-color-grey-white); border:1px solid var(--ui-border); border-radius:4px; }
.layout-preview-cell.row-hover{ background:color-mix(in srgb, var(--ui-accent) 14%, var(--md-color-grey-white)); }
html[data-ui-theme="dark"] .layout-preview-cell.row-hover{ background:color-mix(in srgb, var(--ui-accent) 30%, var(--md-color-grey-white)); }
.rail-section{ display:flex; flex-direction:column; gap:10px; }
.rail-section.hidden{ display:none; }
.rail-panel-bottom-spacer{ flex-shrink:0; height:28px; }
.rail-section[data-section="properties"]{ gap:0; }
#layoutGridControls{ display:flex; flex-direction:column; gap:10px; }
#layoutGridControls.hidden{ display:none; }
.section-color-swatch{
  width:26px; height:26px; border-radius:50%; border:none; padding:0;
  cursor:pointer; box-shadow:inset 0 0 0 1px rgba(var(--shadow-rgb),0.12);
  outline:2px solid transparent; outline-offset:3px; transition:outline-color .15s ease;
}
.section-color-swatch.active{ outline-color:var(--ui-accent); }
.tag-color-swatches{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.tag-color-swatch{
  box-sizing:border-box; flex:0 0 auto; display:block; line-height:0;
  width:16px; height:16px; border-radius:50%; border:none; padding:0;
  cursor:pointer; background:var(--swatch-color);
  outline:2px solid transparent; outline-offset:3px; transition:outline-color .15s ease;
}
.tag-color-swatch.active{ outline-color:var(--ui-accent); }
.search-box{ position:relative; }
.search-box input{
  width:100%;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  padding:7px 28px 7px 32px;
  border:1px solid var(--ui-border);
  border-radius:8px;
  outline:none;
}
.search-box input:focus{ border-color:var(--ui-accent); }
.row-edit .search-box input{ padding:7px 28px 7px 32px; }
.search-box::before{
  font-family:"Font Awesome 6 Pro"; font-weight:var(--font-weight-black); content:"\f002";
  position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--ui-muted); font-size:var(--text-base); pointer-events:none;
}
.search-box:focus-within::before{ color:var(--ui-accent); }
.search-clear-btn{
  display:none; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
  background:none; border:none; padding:0; color:var(--ui-muted); font-size:var(--text-sm); cursor:pointer;
}
.search-clear-btn:hover{ background:var(--md-neutral-background-2-rest); color:var(--ui-text); }
.search-box.has-value .search-clear-btn{ display:flex; }
.search-box.has-suggestion input{ padding-right:56px; position:relative; z-index:1; background:transparent; }
.search-ghost{
  position:absolute; inset:0; padding:7px 56px 7px 32px; font-family:var(--font-sans);
  font-size:var(--text-base); display:flex; align-items:center; white-space:pre; overflow:hidden;
  pointer-events:none; z-index:0;
}
.search-ghost-typed{ color:transparent; }
.search-ghost-rest{ color:var(--ui-muted); }
.search-tab-hint{
  display:none; position:absolute; right:28px; top:50%; transform:translateY(-50%);
  font-size:var(--text-xs); font-weight:var(--font-weight-semibold); color:var(--ui-muted); border:1px solid var(--ui-border);
  border-radius:4px; padding:1px 5px; background:var(--md-color-grey-white); z-index:1;
}
.search-box.has-suggestion .search-tab-hint{ display:block; }
.search-recent-menu{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60;
  flex-direction:column; gap:1px; padding:6px; box-sizing:border-box;
  background:var(--md-color-grey-white); border:1px solid var(--ui-border); border-radius:10px; box-shadow:var(--shadow-popover);
}
.search-box.recent-open .search-recent-menu{ display:flex; }
.search-recent-head{ font-size:var(--text-xs); font-weight:var(--font-weight-semibold); color:var(--ui-muted); padding:4px 8px 5px; }
.search-recent-item{
  display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:6px 8px; box-sizing:border-box;
  border:none; border-radius:6px; background:none; text-align:left; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--text-base); color:var(--ui-text);
}
.search-recent-item:hover{ background:var(--md-neutral-background-2-rest); }
.search-recent-item > i{ color:var(--ui-muted); font-size:var(--text-sm); flex-shrink:0; }
.search-recent-item > span:first-of-type{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-recent-remove{ display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; color:var(--ui-muted); font-size:var(--text-sm); opacity:0; flex-shrink:0; }
.search-recent-item:hover .search-recent-remove{ opacity:1; }
.search-recent-remove:hover{ background:var(--ui-border); color:var(--ui-text); }
.panel-hint{ font-size:var(--text-sm); color:var(--ui-muted); margin:0; line-height:1.4; }
#propertiesPanelTitle{ display:block; margin-bottom:8px; }
.prop-field-hint{ font-size:var(--text-xs); color:var(--ui-muted); margin-top:-6px; padding-left:3px; }
#pricingFooterWrap{ display:flex; flex-direction:column; gap:12px; }
.prop-field-hint a{ color:var(--md-neutral-foreground-2-rest); text-decoration:underline; }
.library-import-btn{ display:block; width:100%; margin-bottom:8px; }
.empty-hint{ font-size:var(--text-md); color:var(--ui-muted); text-align:center; padding:16px 4px; grid-column:1 / -1; }

.component-category-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 10px;
}
@container rail-panel (min-width:420px){
  .component-category-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@container rail-panel (min-width:600px){
  .component-category-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
#componentListAll, #libraryList{ display:flex; flex-direction:column; gap:18px; }
.rail-section[data-section="cards"].list-empty, .rail-section[data-section="library"].list-empty{ flex:1; min-height:0; }
#componentListAll.list-empty, #libraryList.list-empty{ flex:1; min-height:0; }
.search-no-results{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px 16px; color:var(--md-neutral-foreground-3-rest); font-size:var(--text-base); }
.search-no-results img{ width:56px; height:56px; }
.search-no-results-reset{
  background:var(--ui-accent); border:none; color:var(--md-color-grey-white); font-family:var(--font-sans);
  font-size:var(--text-base); font-weight:var(--font-weight-semibold); cursor:pointer; padding:8px 16px; border-radius:8px;
}
.search-no-results-reset:hover{ background:var(--ui-accent-hover); }
.component-category-label{ font-size:var(--text-sm); font-weight:var(--font-weight-semibold); color:var(--ui-muted); text-transform:uppercase; letter-spacing:0.04em; }
.component-category-label-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.component-category-header-actions{ display:flex; align-items:center; gap:10px; }
.component-category:not(:first-child){ border-top:1px solid var(--ui-border); padding-top:18px; }
.component-thumb{ cursor:grab; }
.component-thumb:active{ cursor:grabbing; }
.component-thumb.dragging{ opacity:0.4; }
.thumb-preview{
  background:var(--card-bg); border-radius:10px; padding:12px 8px;
  border:1px solid var(--ui-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  text-align:center; height:76px; overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.component-thumb:hover .thumb-preview{ border-color:var(--ui-accent); box-shadow:var(--shadow-sm); }
.thumb-preview img{ width:100%; height:100%; object-fit:contain; }
.thumb-preview .stat-value{ font-family:var(--font-display); font-size:var(--text-xl); line-height:1.2; color:var(--stat-color); }
.thumb-preview .stat-label{ font-family:var(--font-sans); font-size:var(--text-2xs); line-height:1.2; color:var(--label-color); }
.thumb-name{ display:block; font-size:var(--text-md); color:var(--ui-text); text-align:center; margin-top:6px; letter-spacing:0.02em; }

.prop-span-row, .prop-grid-row{ display:flex; gap:8px; margin-bottom:10px; }
.prop-repair-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.prop-repair-row .btn{ width:100%; box-sizing:border-box; display:flex; justify-content:center; }
.prop-repair-row .prop-field-hint{ margin-top:0; }
.prop-span-field, .prop-grid-field{
  position:relative; flex:1 1 0; min-width:0; height:34px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:2px; padding:0 4px;
  border:1px solid var(--ui-border); border-radius:8px; background:var(--md-color-grey-white);
}
.prop-span-field:focus-within, .prop-grid-field:focus-within{ border-color:var(--ui-accent); }
.prop-span-field[data-title-span]{ flex:0 0 auto; width:112px; }
.prop-span-label{
  position:absolute; left:9px; top:0; transform:translateY(-50%);
  font-size:var(--text-xs); line-height:1; color:var(--ui-muted);
  background:var(--md-color-grey-white); padding:0 3px; margin-left:-3px; pointer-events:none;
}
.prop-span-field button, .prop-grid-field button{
  flex:0 0 auto; width:24px; height:24px; border-radius:6px; cursor:pointer;
  border:none; background:transparent; color:var(--ui-text);
  font-size:var(--text-xl); line-height:1; display:flex; align-items:center; justify-content:center;
}
.prop-span-field button:hover:not(:disabled), .prop-grid-field button:hover:not(:disabled){ background:var(--ui-surface-2); }
.prop-span-field button:disabled, .prop-grid-field button:disabled{ opacity:0.3; cursor:not-allowed; }
.prop-span-value{
  flex:1 1 auto; text-align:center; font-size:var(--text-base); color:var(--ui-text);
  font-family:var(--font-sans);
}

.prop-field.is-mixed input::placeholder,
.prop-field.is-mixed textarea::placeholder{ color:var(--md-neutral-foreground-3-rest); opacity:1; }
.prop-multi-empty{
  margin:12px 2px; font-size:var(--text-md); line-height:1.45; color:var(--ui-muted);
}

.mini-segment.is-mixed{ position:relative; }
.mini-segment.is-mixed .cols-group-thumb{ opacity:0; }
.mini-segment.is-mixed button{ color:var(--md-neutral-foreground-3-rest); }
.mini-segment-mixed-host{ position:relative; display:inline-flex; border-radius:8px; }
.mini-segment-mixed-host.is-mixed .cols-group-thumb{ opacity:0; }
.mini-segment-mixed-host.is-mixed button{ color:var(--md-neutral-foreground-3-rest); }
.mini-segment-mixed-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:inherit; background:rgba(255,255,255,0.82);
  font-size:var(--text-sm); color:var(--md-neutral-foreground-3-rest);
  transition:opacity .14s ease;
}
.mini-segment.is-mixed:hover .mini-segment-mixed-overlay,
.mini-segment-mixed-host.is-mixed:hover .mini-segment-mixed-overlay{ opacity:0; }

.is-mixed-value::placeholder{ color:var(--md-neutral-foreground-3-rest); opacity:1; }
#propsBody .prop-field:has(> input.is-mixed-value) > span:first-child,
#propsBody .prop-field:has(> textarea.is-mixed-value) > span:first-child,
#propsBody .prop-field.is-mixed > span:first-child{ top:0; font-size:var(--text-xs); transform:translateY(-50%); }
#propsBody .prop-field input.is-mixed-value::placeholder, #propsBody .prop-field textarea.is-mixed-value::placeholder,
#propsBody .prop-field.is-mixed input::placeholder, #propsBody .prop-field.is-mixed textarea::placeholder{ color:var(--md-neutral-foreground-3-rest); opacity:1; }

html[data-ui-theme="dark"] .mini-segment-mixed-overlay{ background:rgba(26,31,39,0.82); }

.rail-filter-row, .rail-sticky-head{
  position:sticky; top:-12px; z-index:3; flex-shrink:0;
  background:var(--md-color-grey-white);
  padding:12px 0 10px; margin:-12px 0 0;
}
.rail-filter-row{ display:flex; align-items:stretch; gap:8px; }
.rail-sticky-head{ display:flex; flex-direction:column; gap:10px; }
.rail-filter-row.rail-cat-scrolled, .rail-sticky-head.rail-cat-scrolled{
  box-shadow:0 4px 12px rgba(var(--shadow-rgb),0.15);
}
.rail-filter-row > .search-box{ flex:1; min-width:0; }
.rail-dd{ position:relative; flex-shrink:0; }
.rail-dd-btn{
  position:relative; height:100%; padding:0 8px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--ui-border); border-radius:8px; background:none; color:var(--ui-text);
  font-size:var(--text-base); cursor:pointer;
}
.rail-dd-btn:hover{ background:var(--md-neutral-background-2-rest); }
.rail-dd-btn .rail-dd-caret{ font-size:var(--text-2xs); color:var(--ui-muted); }
.rail-dd-btn.has-value::after{
  content:''; position:absolute; top:4px; right:4px; width:6px; height:6px; border-radius:50%;
  background:var(--ui-accent);
}
.rail-dd-menu{ min-width:190px; max-width:240px; }
.rail-check-option{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 8px;
  border:none; background:none; border-radius:6px; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--text-sm); color:var(--ui-text);
}
.rail-check-option:hover{ background:var(--ui-surface-2); }
.rail-check-box{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:16px; height:16px; border-radius:4px; border:1.5px solid var(--ui-border);
  background:var(--md-color-grey-white); color:transparent; font-size:var(--text-2xs);
}
.rail-check-box.checked{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--md-color-grey-white); }

.rail-panel-body{ position:relative; --scroll-fade-inset:0px; --scroll-fade-gap:10px; }
.rail-panel-body.has-scroll:not(.at-scroll-end)::after{
  content:''; position:sticky; display:block; flex-shrink:0; left:0; right:0; bottom:0;
  height:48px; margin-top:calc(-48px - var(--scroll-fade-gap)); pointer-events:none;
  background:linear-gradient(to top, var(--md-color-grey-white) 0%, rgba(255,255,255,0.92) 45%, rgba(255,255,255,0) 100%);
}
html[data-ui-theme="dark"] .rail-panel-body.has-scroll:not(.at-scroll-end)::after{
  background:linear-gradient(to top, var(--md-color-grey-white) 0%, rgba(26,31,39,0.92) 45%, rgba(26,31,39,0) 100%);
}