lll-ui-card-list{display:block;margin:40px 0;font-family:"Segoe UI",system-ui,sans-serif;--surface-bg:#121215;--surface-dark:#111111;--surface-light:#1b1b1c;--surface-black:#100f15;--surface-header:#2d2d2f;--surface-border-color:#212123;--surface-light-border-color:#2a2830;--surface-hover-bg:#1a1a1d;--surface-hover-border-color:#465156;--bg-dark:var(--surface-bg);--bg-panel:var(--surface-bg);--border-dim:var(--surface-border-color);--text-main:#e0e0e0;--text-dim:#9ca3af;opacity:0;transition:opacity .6s ease;min-height:300px;content-visibility:auto;contain:content}lll-ui-card-list .smart-wrapper{width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:25px}lll-ui-card-list .smart-header{display:flex;flex-direction:column;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--border-dim);position:relative;min-height:44px}lll-ui-card-list .header-top{display:flex;gap:15px;align-items:center}lll-ui-card-list .search-bar{flex:1;background:var(--surface-hover-bg);border:1px solid var(--surface-light-border-color);color:#e0e0e0;padding:6px 12px;border-radius:12px;font-family:"Segoe UI",system-ui,sans-serif;font-size:1rem;outline:0;transition:all .3s;box-shadow:0 4px 10px rgba(0,0,0,.2)}lll-ui-card-list .search-bar:focus{background:var(--surface-light);border-color:var(--surface-hover-border-color);box-shadow:0 8px 20px rgba(0,0,0,.3)}lll-ui-card-list .view-toggles{position:absolute;bottom:0;right:0;display:flex;gap:2px;padding:3px;border-radius:4px;z-index:10}lll-ui-card-list .view-btn{background:0 0;border:0;color:#555;padding:8px;cursor:pointer;border-radius:2px;transition:all .2s;display:flex;align-items:center;justify-content:center}lll-ui-card-list .view-btn:hover{color:#fff}lll-ui-card-list .view-btn.active{background:var(--surface-light);color:#fff}lll-ui-card-list .view-btn svg{width:18px;height:18px;fill:currentColor}lll-ui-card-list .filter-pills{display:flex;flex-wrap:wrap;gap:10px;padding-right:80px}lll-ui-card-list .pill{border:1px solid var(--pill-color, var(--surface-light-border-color));color:#ccc;background-color:color-mix(in srgb,var(--pill-color),transparent 80%);padding:2px 12px;border-radius:12px;font-size:.85rem;cursor:pointer;transition:all .3s;font-weight:600;opacity:.5}lll-ui-card-list .pill.all{color:var(--text-dim);border-color:var(--surface-light-border-color)}lll-ui-card-list .pill.all.active{color:#fff;border-color:var(--surface-hover-border-color);background-color:var(--surface-light);box-shadow:none;opacity:1!important}lll-ui-card-list .pill.active:not(.all){color:#fff;background-color:color-mix(in srgb,var(--pill-color),transparent 80%);border-color:var(--pill-color);box-shadow:0 0 12px color-mix(in srgb,var(--pill-color),transparent 80%);opacity:1!important}lll-ui-card-list .pill:hover{opacity:.7;color:#fff}lll-ui-card-list .smart-body{display:flex;gap:10px;transition:all .3s}lll-ui-card-list .list-pane,lll-ui-card-list .detail-pane{background:var(--bg-panel);border:1px solid var(--border-dim);border-radius:8px}lll-ui-card-list .detail-wrapper{transition:opacity .3s ease,transform .3s ease}lll-ui-card-list .detail-wrapper.slide-out{animation:slideOut .2s ease forwards}lll-ui-card-list .detail-wrapper.slide-in{animation:slideIn .3s ease forwards}@keyframes slideOut{to{opacity:0;transform:translateY(-10px)}}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}lll-ui-card-list .list-item{cursor:pointer;transition:all .2s;position:relative;background:0 0}lll-ui-card-list .item-name{font-family:"Consolas",monospace;font-weight:700;color:#fff;font-size:1.05rem;letter-spacing:-.5px}lll-ui-card-list .list-item.selected .item-name{color:var(--item-color)}lll-ui-card-list .item-cat-tag{font-size:.7rem;padding:4px 12px;border-radius:12px;border:1px solid var(--item-color);color:#ddd;background:var(--item-bg);font-weight:600;white-space:nowrap}lll-ui-card-list .item-desc{font-size:.85rem;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}lll-ui-card-list .smart-body.mode-split{flex-direction:row;max-height:700px}lll-ui-card-list .smart-body.mode-split .list-pane{width:320px;flex-shrink:0;display:flex;flex-direction:column;overflow-y:auto;border-right:1px solid var(--border-dim)}lll-ui-card-list .smart-body.mode-split .detail-pane{flex:1;overflow-y:auto;padding:12px 24px;background:var(--bg-panel)}lll-ui-card-list .smart-body.mode-split .list-item{padding:15px 20px;border-bottom:1px solid var(--border-dim);border-left:3px solid transparent;display:grid;grid-template-areas:"name tag""desc desc";grid-template-columns:1fr auto;row-gap:6px;column-gap:10px;align-items:center}lll-ui-card-list .smart-body.mode-split .list-item.no-cat{grid-template-areas:"name name""desc desc"}lll-ui-card-list .smart-body.mode-split .item-name{grid-area:name}lll-ui-card-list .smart-body.mode-split .item-cat-tag{grid-area:tag}lll-ui-card-list .smart-body.mode-split .item-desc{grid-area:desc}lll-ui-card-list .smart-body.mode-split .list-item:hover{background:var(--surface-hover-bg)}lll-ui-card-list .smart-body.mode-split .list-item.selected{background:var(--surface-hover-bg);border-left-color:var(--item-color)}lll-ui-card-list .smart-body.mode-stack{flex-direction:column}lll-ui-card-list .smart-body.mode-stack .list-pane{display:flex;flex-direction:column;gap:10px;border:0;background:0 0;min-height:50px;max-height:500px;overflow-y:auto}lll-ui-card-list .smart-body.mode-stack .detail-pane{width:100%;padding:20px;min-height:200px;display:none;border-top:1px solid var(--border-dim);background:var(--bg-panel)}lll-ui-card-list .smart-body.mode-stack .detail-pane.has-selection{display:block;animation:fadeIn .4s ease}lll-ui-card-list .smart-body pre{margin-bottom:.5rem}lll-ui-card-list .smart-body.mode-stack .list-item{padding:8px 12px;border:1px solid var(--border-dim);border-radius:12px;display:flex;align-items:center;gap:15px;background:var(--surface-light)}lll-ui-card-list .smart-body.mode-stack .item-name{flex-shrink:0}lll-ui-card-list .smart-body.mode-stack .item-desc{flex:1}lll-ui-card-list .smart-body.mode-stack .item-desc::before{content:" - ";color:#555;margin-right:5px}lll-ui-card-list .smart-body.mode-stack .item-cat-tag{margin-left:auto}lll-ui-card-list .smart-body.mode-stack .list-item:hover{border-color:var(--surface-hover-border-color);box-shadow:0 0 10px rgba(0,0,0,.3)}lll-ui-card-list .smart-body.mode-stack .list-item.selected{border-color:color-mix(in srgb,var(--item-color),transparent 80%);box-shadow:0 0 10px var(--item-bg);background:var(--surface-hover-bg)}lll-ui-card-list .detail-empty{height:100%;display:flex;align-items:center;justify-content:center;color:#444;font-style:italic;font-family:monospace}lll-ui-card-list .detail-header-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}lll-ui-card-list .detail-title{font-family:"Segoe UI",sans-serif;font-size:2.5rem;color:#fff;margin:0;font-weight:200;letter-spacing:-1px;line-height:1.1}lll-ui-card-list .detail-content{color:#ccc;line-height:1.8;font-size:1.05rem}lll-ui-card-list ::-webkit-scrollbar{width:8px;height:8px}lll-ui-card-list ::-webkit-scrollbar-track{background:#0a0a0a}lll-ui-card-list ::-webkit-scrollbar-thumb{background:#333;border-radius:4px}@media (max-width:768px){lll-ui-card-list .view-toggles{display:none}lll-ui-card-list .smart-body.mode-split{flex-direction:column;height:auto}lll-ui-card-list .smart-body.mode-split .list-pane{width:100%;max-height:300px;border-right:none;border-bottom:1px solid var(--border-dim)}lll-ui-card-list .smart-body.mode-split .detail-pane{min-height:400px}}