@composy/layout-vue 0.0.1 → 0.0.2

package/dist/index.min.css

@@ -1 +1 @@
-:root{color:#172033;background:#eef2f7;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;font-synthesis:none}*{box-sizing:border-box}#app,body,html{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:0}button{font:inherit}button:focus-visible{outline:#5b7cfa solid 2px;outline-offset:2px}.layout-demo{--ink:#172033;--muted:#768198;--line:#dce3ed;--line-strong:#c7d1df;--panel:#fff;--canvas:#f5f7fb;--topbar:rgb(255 255 255 / 92%);--stage:#fff;--stage-header:rgb(250 251 255 / 88%);--card:#fff;--card-line:#d8def0;--checker-a:#e7e9ed;--checker-b:#f8f9fb;--accent:#536df1;--accent-soft:#eef0ff;--shadow:0 16px 40px rgb(36 52 82 / 8%);width:100%;height:100%;min-width:0;min-height:0;display:grid;grid-template-rows:82px minmax(0,1fr);overflow:hidden;background:var(--canvas);color:var(--ink)}.topbar{min-width:0;min-height:0;position:relative;z-index:60;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:visible;background:var(--topbar);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgb(255 255 255 / 80%)}.actions,.brand,.breakpoint-button,.material-source,.mode-button,.route-tabs,.route-tabs button{display:flex;align-items:center}.brand{min-width:150px;gap:10px}.brand-copy{min-width:0;display:grid;gap:2px}.brand-copy strong{color:var(--ink);font-size:14px;line-height:1.1;white-space:nowrap}.brand-copy span{color:var(--muted);font-size:10px;white-space:nowrap}.topbar-center{min-width:0;display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none}.topbar-center__shell{min-width:-moz-max-content;min-width:max-content;padding:4px 6px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 86%,#f0f3fa);box-shadow:0 5px 18px rgb(49 68 104 / 6%)}.topbar-center__section{display:flex;align-items:center;gap:7px}.device-select,.workspace-mode{min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:1px solid transparent;border-radius:9px;color:var(--muted)}.workspace-mode{color:var(--accent);font-size:12px;font-weight:700;white-space:nowrap}.development-mode{position:relative;min-width:124px;min-height:36px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel) 86%,#eef1f7);color:var(--ink);box-shadow:0 4px 12px rgb(49 68 104 / 5%)}.development-mode.is-open,.development-mode:hover{border-color:var(--accent);background:var(--panel);color:var(--accent);box-shadow:0 0 0 3px rgb(88 105 241 / 10%)}.development-mode .custom-select__trigger{min-width:122px;min-height:34px;font-size:11px;font-weight:700}.development-mode__menu{min-width:226px;right:0;left:auto}.development-mode__menu .custom-select__option{min-height:44px}.development-mode__menu .custom-select__option>span{min-width:0;display:grid;gap:2px}.development-mode__menu strong{color:inherit;font-size:11px;font-weight:700}.development-mode__menu small{color:var(--muted);font-size:9px;line-height:1.2}.workspace-mode__hint{padding-left:7px;border-left:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:500}.device-select{position:relative;padding:0;background:color-mix(in srgb,var(--panel) 72%,#eef1f7)}.device-select.is-open,.device-select:hover{border-color:var(--line);background:var(--panel);color:var(--ink)}.custom-select__trigger{min-height:32px;display:inline-flex;align-items:center;gap:7px;min-width:104px;padding:0 9px;border:0;border-radius:inherit;background:0 0;color:inherit;cursor:pointer;font-size:11px;text-align:left}.custom-select__trigger svg:last-child{margin-left:auto;transition:transform 140ms}.custom-select.is-open .custom-select__trigger svg:last-child{transform:rotate(180deg)}.custom-select__menu{position:absolute;z-index:40;top:calc(100% + 7px);left:0;min-width:154px;padding:5px;display:grid;gap:2px;border:1px solid var(--line);border-radius:11px;background:var(--panel);box-shadow:0 14px 32px rgb(37 53 91 / 16%);animation:140ms ease-out select-menu-in}.custom-select__option{min-height:31px;display:flex;align-items:center;gap:7px;padding:0 8px;border:0;border-radius:7px;background:0 0;color:var(--muted);cursor:pointer;font-size:11px;text-align:left}.custom-select__option:hover,.custom-select__option[aria-selected=true]{background:var(--accent-soft);color:var(--accent)}.custom-select__option-meta{margin-left:auto;color:var(--muted);font-size:9px}@keyframes select-menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.orientation-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:color-mix(in srgb,var(--panel) 72%,#eef1f7);color:var(--muted);cursor:pointer;transition:140ms}.orientation-button:hover,.orientation-button[aria-pressed=true]{border-color:var(--line);background:var(--panel);color:var(--accent)}.topbar-center__label{padding:0 2px 0 4px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;white-space:nowrap}.topbar-center__divider{width:1px;height:24px;background:var(--line)}.topbar-center::-webkit-scrollbar{display:none}.brand-mark{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:linear-gradient(145deg,#5f74f6,#8495ff);color:#fff;font-size:18px;font-weight:800;box-shadow:0 8px 18px rgb(83 109 241 / 25%)}.actions svg,.brand-mark svg,.breakpoint-icon svg,.inspector-icon svg,.material-add svg,.material-icon svg,.panel-tip>svg,.route-icon{display:block;flex:0 0 auto}.brand span,.brand strong{display:block}.brand strong{font-size:14px;letter-spacing:.01em}.brand div>span{margin-top:3px;color:var(--muted);font-size:11px}.actions{min-width:0;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-gutter:stable}.route-tabs{flex:0 0 auto;gap:2px;padding:2px;border-radius:9px;background:color-mix(in srgb,var(--panel) 72%,#eef1f7)}.breakpoint-tabs{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:2px;border-radius:9px;background:color-mix(in srgb,var(--panel) 72%,#eef1f7)}.breakpoint-tab{min-height:30px;padding:4px 8px;display:inline-flex;align-items:center;gap:5px;border:0;border-radius:7px;background:0 0;color:#7a8498;cursor:pointer;white-space:nowrap;transition:140ms}.breakpoint-tab:hover{color:var(--ink);background:#fff}.breakpoint-tab[aria-pressed=true]{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgb(38 52 82 / 10%)}.breakpoint-download-button{display:none}.route-tabs button{gap:5px;min-height:30px;padding:4px 9px;border:0;border-radius:7px;background:0 0;color:#6a7488;cursor:pointer;white-space:nowrap;transition:140ms}.route-tabs button:hover{color:var(--ink);background:rgb(255 255 255 / 70%)}.route-tabs button[aria-current=page]{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgb(38 52 82 / 10%)}.route-icon{color:currentColor}.actions button{border:1px solid transparent;border-radius:8px;background:0 0;color:#68748a;cursor:pointer;transition:140ms}.actions button:hover:not(:disabled){border-color:var(--line);background:#fff;color:var(--ink)}.actions button:disabled{opacity:.35;cursor:not-allowed}.icon-button{width:32px;height:32px;flex:0 0 32px;display:grid!important;place-items:center;font-size:20px;line-height:1}.icon-button:nth-of-type(5){color:#e36c7e}.mode-button{flex:0 0 auto;gap:6px;min-height:32px;padding:0 11px;border-color:#cbd4ff!important;background:var(--accent-soft)!important;color:#4d63dc!important;font-size:12px;font-weight:700}.mode-button span:first-child{font-size:16px}.preview-open-button{min-height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid #cbd4ff!important;border-radius:8px;background:#fff!important;color:#536df1!important;cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap}.preview-open-button:hover{background:var(--accent-soft)!important;box-shadow:0 5px 14px rgb(83 109 241 / 12%)}.workspace{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(290px,330px) minmax(0,1fr) minmax(320px,400px);overflow:hidden}.panel-scroll{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin}.materials{padding:16px 16px 18px;display:flex;flex-direction:column;align-items:stretch;gap:9px;background:linear-gradient(180deg,var(--panel) 0,color-mix(in srgb,var(--panel) 94%,var(--canvas)) 100%);border-right:1px solid var(--line)}.inspector-heading,.panel-heading{min-width:0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.panel-heading{padding:0 3px 4px}.materials .panel-heading .eyebrow{display:none}.materials .panel-heading h2{margin:0;font-size:18px;letter-spacing:-.03em}.panel-heading--breakpoint{margin-top:18px}.eyebrow,.stage-kicker{display:block;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.inspector-heading h2,.panel-heading h2{margin:3px 0 0;font-size:14px;line-height:1.15}.breakpoint-icon,.inspector-icon,.panel-count{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700}.material-toolbar{position:relative;z-index:10;display:grid;gap:6px;padding-bottom:4px;margin:0 0 2px;border-bottom:1px solid color-mix(in srgb,var(--line) 76%,transparent)}.material-search{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--panel) 78%,#fff);color:var(--muted)}.material-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgb(88 105 241 / 10%)}.material-search input{width:100%;min-width:0;border:0;outline:0;background:0 0;color:var(--ink);font:inherit;font-size:11px}.material-filter-row{min-width:0;position:relative;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:6px}.material-select{min-width:0;min-height:34px;position:relative;display:flex;align-items:center;padding:0;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel) 78%,#eef2f8);color:var(--muted)}.material-select:hover{border-color:var(--accent);color:var(--accent)}.material-select.is-open{z-index:30;border-color:var(--accent);background:var(--panel);color:var(--ink);box-shadow:0 0 0 3px rgb(88 105 241 / 10%)}.material-select .custom-select__trigger{width:100%;min-width:0;padding:0 8px;font-size:10px}.material-select .custom-select__trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.material-select .custom-select__menu{min-width:max(100%,180px);max-width:min(260px,calc(100vw - 32px));max-height:min(280px,calc(100vh - 180px));overflow-y:auto}.material-select:nth-child(2) .custom-select__menu{right:0;left:auto}.material-filter-reset{width:28px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:0 0;color:var(--muted);cursor:pointer}.material-filter-reset:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.material-result-summary{min-height:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px;color:var(--muted);font-size:10px}.material-result-summary span:last-child{color:var(--accent)}.material-category-list{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.material-category-list::-webkit-scrollbar{display:none}.material-category-button{flex:0 0 auto;min-height:25px;padding:0 9px;border:1px solid transparent;border-radius:7px;background:0 0;color:var(--muted);cursor:pointer;font:inherit;font-size:10px}.material-category-button.active,.material-category-button:hover{border-color:rgb(88 105 241 / 18%);background:var(--accent-soft);color:var(--accent)}.material-empty{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px 12px;border:1px dashed var(--line-strong);border-radius:12px;background:color-mix(in srgb,var(--panel) 76%,var(--canvas));color:var(--muted);font-size:11px;text-align:center}.material-empty svg{color:var(--accent)}.material-empty strong{color:var(--ink);font-size:12px}.material-empty span{font-size:10px}.material-empty button{min-height:28px;margin-top:4px;padding:0 10px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;font:inherit;font-size:10px}.material-empty button:hover{background:color-mix(in srgb,var(--accent-soft) 72%,var(--accent))}.material-source{min-height:72px;gap:9px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-align:left;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;box-shadow:0 4px 14px rgb(48 65 95 / 6%);transition:140ms;display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center}.material-source:hover{border-color:#bcc6ff;background:#fbfbff;transform:translateY(-1px);box-shadow:0 8px 18px rgb(68 87 164 / 12%)}.material-source:active{cursor:grabbing;transform:translateY(0)}.material-copy,.material-source>span:nth-child(2){min-width:0;flex:1}.material-size{flex:0 0 auto;align-self:flex-start;padding:3px 5px;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-size:9px;font-variant-numeric:tabular-nums}.material-card-meta{min-width:0;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}.material-renderer-badges{display:flex;align-items:center;gap:3px}.material-renderer-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 4px;border-radius:5px;background:#edf5ff;color:#4381d9;font-size:8px;line-height:1;white-space:nowrap}.material-renderer-badge--vue{background:#eaf8f1;color:#3f9a74}.material-source small,.material-source strong{display:block}.material-source strong{font-size:12px}.material-source small{margin-top:3px;color:var(--muted);font-size:10px}.material-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px}.material-icon--metric{background:#edf5ff;color:#4381d9}.material-icon--chart{background:#f2eeff;color:#8167dd}.material-add{display:grid;place-items:center;color:#a1abc0}.breakpoint-button{min-height:42px;gap:9px;padding:8px 9px;border:1px solid transparent;border-radius:9px;background:0 0;color:#69758b;text-align:left;cursor:pointer}.breakpoint-button:hover{background:#f6f8fc;color:var(--ink)}.breakpoint-button[aria-pressed=true]{border-color:#ccd4ff;background:var(--accent-soft);color:#4d63dc}.breakpoint-button span:nth-child(2){flex:1;font-size:12px;font-weight:700}.breakpoint-button small{color:#a0a9b9;font-size:10px}.breakpoint-dot{width:7px;height:7px;border-radius:50%;background:#c8d0dc}.breakpoint-button[aria-pressed=true] .breakpoint-dot{background:var(--accent);box-shadow:0 0 0 4px rgb(83 109 241 / 14%)}.panel-tip{margin-top:auto;padding:10px;display:flex;gap:7px;align-items:flex-start;border-radius:9px;background:#f7f8fb;color:#8993a5;font-size:10px;line-height:1.55}.panel-tip>svg{color:var(--accent)}.canvas{position:relative;padding:20px;display:flex;flex-direction:column;gap:10px;background-color:var(--checker-a);background-image:linear-gradient(45deg,var(--checker-b) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-b) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-b) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-b) 75%);background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0}.canvas-toolbar{position:sticky;top:0;z-index:30;align-self:stretch;width:100%;min-height:38px;padding:4px;display:flex;align-items:center;justify-content:flex-end;gap:3px;border:0;background:0 0;box-shadow:none;pointer-events:none}.canvas-toolbar>*{pointer-events:auto}.canvas-device-control{position:absolute;z-index:35;left:0;top:4px;min-height:34px;padding:0;border:1px solid;border-radius:10px;background:var(--topbar);box-shadow:0 8px 22px rgb(67 84 122 / 12%),inset 0 1px 0 rgb(255 255 255 / 80%);backdrop-filter:blur(12px)}.canvas-device-control.is-open,.canvas-device-control:hover{border-color:var(--line-strong);background:var(--panel);color:var(--ink)}.canvas-device-control .custom-select__trigger{min-width:112px}.canvas-device-control .custom-select__menu{top:calc(100% + 7px);left:0}.canvas-device-control+.orientation-button{position:absolute;z-index:35;top:4px;left:120px;border:1px solid;background:var(--topbar);box-shadow:0 8px 22px rgb(67 84 122 / 12%),inset 0 1px 0 rgb(255 255 255 / 80%);backdrop-filter:blur(12px)}.canvas-device-control+.orientation-button+.canvas-toolbar__divider{display:none}.canvas-toolbar__group{display:flex;align-items:center;gap:2px}.canvas-toolbar__divider{width:1px;height:20px;margin:0 3px;background:var(--line)}.canvas-tool-button{width:29px;height:29px;display:grid;place-items:center;border:0;border-radius:8px;background:0 0;color:#7a879d;cursor:pointer;transition:background 140ms,color 140ms,transform 140ms}.canvas-tool-button:hover{background:#f0f3ff;color:var(--accent)}.canvas-tool-button:active{transform:scale(.94)}.canvas-tool-button.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px rgb(83 109 241 / 12%)}.canvas-zoom-label{min-width:42px;color:#5f6d84;font-size:11px;font-variant-numeric:tabular-nums;font-weight:700;text-align:center}.canvas-viewport{position:relative;flex:0 0 auto;min-width:0;min-height:620px;overflow:visible;border-radius:16px;touch-action:none;cursor:default}.canvas-viewport.is-pan-tool{cursor:grab}.canvas-viewport.is-panning{cursor:grabbing}.canvas-scene{width:100%;min-width:0;transform-origin:0 0;will-change:transform}.editor-stage,.preview-stage,.runtime-preview-stage,.vanilla-runtime-stage{flex:0 0 auto;min-width:0;min-height:620px;display:flex;flex-direction:column;height:auto;overflow:visible;border:1px solid var(--line);border-radius:14px;background:var(--stage);box-shadow:var(--shadow)}.editor-stage::before,.preview-stage::before,.runtime-preview-stage::before,.vanilla-runtime-stage::before{content:"";height:3px;flex:0 0 3px;background:linear-gradient(90deg,#5b73f2,#9c83ff 55%,#74cbb1)}.stage-header{min-height:62px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:var(--stage-header)}.stage-header h2{margin:4px 0 0;font-size:15px;line-height:1.15}.stage-kicker{color:var(--muted);font-size:10px;font-weight:700}.stage-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:10px;white-space:nowrap}.stage-badge i{width:6px;height:6px;border-radius:50%;background:#62c49c;box-shadow:0 0 0 3px rgb(98 196 156 / 15%)}.layout-editor-grid,.ldesign-layout-grid,.runtime-preview-grid{flex:0 0 auto;min-width:0;min-height:558px;padding:16px;position:relative;isolation:isolate;background:var(--stage);--gs-cell-height:8px;--gs-item-margin-top:16px!important;--gs-item-margin-bottom:0px!important;--gs-item-margin-left:16px!important;--gs-item-margin-right:0px!important}.layout-editor-grid.gs-12{--gs-column-width:calc((100% - 16px) / 12)!important}.layout-editor-grid.gs-8{--gs-column-width:calc((100% - 16px) / 8)!important;--gs-item-margin-bottom:-4px!important}.layout-editor-grid.gs-4{--gs-column-width:calc((100% - 16px) / 4)!important;--gs-item-margin-bottom:-8px!important}.layout-editor-grid .grid-stack-item-content{padding:0;overflow:hidden;border:0;border-radius:12px;background:0 0;color:var(--ink);cursor:grab}.layout-editor-grid .grid-stack-item-content:active,.layout-editor-grid .ui-draggable-dragging .grid-stack-item-content,.layout-editor-grid.grid-stack-dragging .grid-stack-item-content{cursor:grabbing}.layout-editor-grid .grid-stack-item.ui-draggable-dragging,.layout-editor-grid .grid-stack-item.ui-resizable-resizing,.layout-editor-grid .ui-draggable-dragging{transition:none!important;will-change:left,top,width,height}body>.ui-draggable-dragging[data-layout-material]{transition:none!important;animation:none!important;will-change:left,top}.layout-editor-grid .grid-stack-placeholder>.placeholder-content{border:1px dashed;border-radius:12px;background:rgb(83 109 241 / 10%);box-shadow:inset 0 0 0 1px rgb(255 255 255 / 45%)}.layout-editor-grid::after{content:"拖入物料开始布局";inset:50% auto auto 50%;z-index:-1;transform:translate(-50%,-50%);color:#a8b2c5;font-size:12px;letter-spacing:.08em;pointer-events:none}.layout-editor-grid:has(.grid-stack-item)::after{opacity:0}.layout-editor-grid .grid-stack-item.is-selected .grid-stack-item-content{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}.layout-editor-grid .grid-stack-item:focus-visible .grid-stack-item-content{outline:#12a594 solid 2px;outline-offset:-4px}.ldesign-layout-grid{flex:1 0 auto;min-height:max(180px,min(558px,var(--canvas-grid-height,558px)))}.runtime-preview-grid{flex:1 0 auto}.layout-card,.layout-item-shell{position:relative;width:100%;height:100%;min-width:0;min-height:0}.layout-item-shell{display:block;padding:0;overflow:hidden;border:0;background:0 0;color:inherit}.layout-item-shell--interactive{cursor:pointer}.layout-card{min-height:84px;padding:14px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-line);border-radius:12px;background:linear-gradient(145deg,rgb(255 255 255 / 98%),rgb(248 249 255 / 94%)),var(--card);color:var(--ink);box-shadow:0 10px 24px rgb(71 86 132 / 9%),inset 0 1px 0 rgb(255 255 255 / 80%);transition:border-color 160ms,box-shadow 160ms,transform 160ms}.layout-card__actions{position:absolute;z-index:2;top:9px;right:9px;display:flex;align-items:center;gap:3px;opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity 140ms,transform 140ms;isolation:isolate}.layout-editor-grid .grid-stack-item.is-selected .layout-card__actions,.layout-editor-grid .grid-stack-item:hover .layout-card__actions{opacity:1;transform:translateY(0);pointer-events:auto}.layout-card__action{position:relative;z-index:3;width:24px;height:24px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:7px;background:color-mix(in srgb,var(--panel) 94%,transparent);color:var(--muted);cursor:pointer;pointer-events:auto;box-shadow:0 3px 8px rgb(37 53 91 / 10%);transition:color 140ms,border-color 140ms,background 140ms,transform 140ms}.layout-card__action:hover{border-color:#9aa9ff;background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}.layout-card__footer,.layout-card__meta{display:flex;align-items:center;justify-content:space-between;gap:8px}.layout-card__meta{color:#8590a5;font-size:10px}.layout-card__type{color:var(--accent);font-weight:700}.layout-card__status{padding:2px 5px;border-radius:4px;background:#edf8f3;color:#4aaf84;white-space:nowrap}.layout-card__title{margin:10px 0 7px;overflow:hidden;color:#273249;font-size:13px;font-weight:700;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.layout-card__value{display:block;color:#25345a;font-size:clamp(20px, 2.2vw, 30px);line-height:1;letter-spacing:-.04em}.layout-card__chart{height:36px;display:flex;align-items:flex-end;gap:5px;padding:0 3px}.layout-card__chart i{width:100%;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#8b9cff,#5e72ed)}.layout-card__chart i:first-child{height:38%}.layout-card__chart i:nth-child(2){height:62%}.layout-card__chart i:nth-child(3){height:48%}.layout-card__chart i:nth-child(4){height:82%}.layout-card__chart i:nth-child(5){height:100%}.layout-card__footer{margin-top:auto;padding-top:12px;color:#9aa3b4;font-size:10px}.layout-card__spark{color:#56b78e;font-size:15px;font-weight:700}.layout-item-shell[aria-pressed=true] .layout-card,.widget.selected .layout-card{border-color:#8392f6;box-shadow:0 0 0 2px rgb(83 109 241 / 18%),0 10px 22px rgb(71 86 132 / 12%)}.layout-editor-grid .grid-stack-item:hover .layout-card,.layout-item-shell--interactive:hover .layout-card{border-color:#aab6f7;box-shadow:0 0 0 2px rgb(83 109 241 / 12%),0 14px 28px rgb(71 86 132 / 14%)}.inspectors{padding:18px 14px;display:flex;flex-direction:column;gap:12px;background:var(--panel);color:var(--ink);border-left:1px solid var(--line);overflow:auto}.inspector-heading{align-items:center;padding:2px 3px 0;flex:0 0 auto}.inspector-heading>div:first-child{min-width:0;flex:1}.inspector-heading h2{color:var(--ink)}.inspector-heading .eyebrow{color:var(--muted)}.inspector-icon{background:var(--accent-soft);color:var(--accent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.copy-code-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;transition:140ms}.copy-code-button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent-soft) 72%,#fff);color:var(--accent)}.download-code-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;transition:140ms}.download-code-button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent-soft) 72%,#fff);color:var(--accent)}.code-block{min-height:0;height:0;flex:1 1 0;margin:0;padding:12px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:#f7f9fc;color:#263653;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.65;-moz-tab-size:2;-o-tab-size:2;tab-size:2;white-space:pre;scrollbar-width:thin}.code-block code{display:block;min-width:-moz-max-content;min-width:max-content;color:inherit}.code-token-comment{color:#8b96a8;font-style:italic}.code-token-keyword,.code-token-tag{color:#7257d8}.code-token-attribute,.code-token-property{color:#197d9a}.code-token-string{color:#b05b2b}.code-token-constant,.code-token-number{color:#b43d78}.code-status{display:flex;align-items:center;gap:7px;padding:0 3px 2px;flex:0 0 auto;color:var(--muted);font-size:10px;line-height:1.4}.material-card-actions{display:inline-flex;align-items:center;gap:3px;justify-self:end}.material-code-button{width:25px;height:25px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:7px;background:0 0;color:var(--muted);cursor:pointer;transition:140ms}.material-code-button:focus-visible,.material-code-button:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));background:var(--accent-soft);color:var(--accent);outline:0}.code-status__dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#60c99b;box-shadow:0 0 0 3px rgb(96 201 155 / 14%)}.preview-dialog{--ink:#172033;--muted:#768198;--line:#dce3ed;--panel:#fff;--canvas:#f5f7fb;--stage:#fff;--card:#fff;--card-line:#d8def0;--accent:#536df1;--accent-soft:#eef0ff;position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:28px;color:var(--ink)}.preview-dialog-enter-active,.preview-dialog-leave-active{transition:opacity 180ms}.preview-dialog-enter-active .preview-dialog__panel,.preview-dialog-leave-active .preview-dialog__panel{transition:transform 220ms cubic-bezier(.22, 1, .36, 1),opacity 180ms}.preview-dialog-enter-from,.preview-dialog-leave-to{opacity:0}.preview-dialog-enter-from .preview-dialog__panel,.preview-dialog-leave-to .preview-dialog__panel{opacity:0;transform:translateY(14px) scale(.975)}.preview-dialog__backdrop{position:absolute;inset:0;border:0;background:rgb(20 31 51 / 42%);cursor:default;backdrop-filter:blur(6px)}.preview-dialog__panel{position:relative;z-index:1;width:min(1080px,100%);max-height:min(820px,calc(100vh - 56px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 28px 80px rgb(31 46 78 / 26%)}.preview-dialog__footer,.preview-dialog__header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line)}.preview-dialog__header h2{margin:4px 0 0;font-size:17px}.preview-dialog__header-meta{display:flex;align-items:center;gap:8px}.preview-dialog__header .icon-button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);cursor:pointer;transition:140ms}.preview-dialog__header .icon-button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);transform:rotate(6deg)}.preview-dialog__body{min-height:0;flex:1 1 auto;overflow:auto;padding:18px;background:var(--canvas)}.preview-dialog__canvas{min-height:520px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--stage);box-shadow:inset 0 1px 0 rgb(255 255 255 / 70%)}.preview-dialog__canvas .ldesign-layout-grid{min-height:480px;padding:0;background:0 0}.preview-dialog__card{height:100%}.preview-dialog__footer{border-top:1px solid var(--line);border-bottom:0;color:var(--muted);font-size:11px}.preview-dialog__close-button{min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;font-size:11px;font-weight:700}.preview-dialog__close-button:hover{border-color:var(--accent)}.material-code-dialog__panel{width:min(820px,100%)}.material-code-dialog__subtitle{margin:5px 0 0;color:var(--muted);font-size:11px}.material-code-dialog__body{min-height:0;padding:16px}.material-code-dialog__code{min-height:360px;max-height:min(560px,calc(100vh - 250px));margin:0;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--stage) 82%,var(--canvas))}.material-code-dialog__actions{display:inline-flex;align-items:center;gap:8px}.material-code-dialog__actions .copy-code-button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);cursor:pointer}.material-code-dialog__actions .copy-code-button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.preview-dialog[data-theme=dark]{--ink:#edf2ff;--muted:#95a3be;--line:#34405a;--panel:#192238;--canvas:#121a2d;--stage:#202b43;--card:#1d2940;--card-line:#405071;--accent:#8ea2ff;--accent-soft:#293762}.preview-dialog[data-theme=dark] .preview-dialog__backdrop{background:rgb(4 8 18 / 64%)}.preview-dialog[data-theme=dark] .preview-dialog__canvas{box-shadow:inset 0 1px 0 rgb(255 255 255 / 4%)}.preview-dialog[data-theme=dark] .layout-card{background:linear-gradient(145deg,rgb(39 53 80 / 98%),rgb(29 41 64 / 96%)),var(--card);box-shadow:0 10px 24px rgb(2 8 22 / 30%),inset 0 1px 0 rgb(255 255 255 / 5%)}.preview-dialog[data-theme=dark] .layout-card__title{color:#edf2ff}.preview-dialog[data-theme=dark] .layout-card__value{color:#dbe4ff}.preview-dialog[data-theme=dark] .layout-card__footer,.preview-dialog[data-theme=dark] .layout-card__meta{color:#a8b6d0}@media (max-width:1080px){.workspace{grid-template-columns:minmax(190px,230px) minmax(0,1fr) minmax(260px,320px)}.topbar{gap:10px;padding-inline:12px}.brand{min-width:132px}.route-tabs button{padding-inline:7px}.route-tabs button>span:last-child{display:none}.breakpoint-tab{padding-inline:7px}.breakpoint-tab span{display:none}.canvas{padding:14px}}@media (max-width:720px){.layout-demo{grid-template-rows:70px minmax(0,1fr)}.brand-copy{display:none}.workspace{grid-template-columns:minmax(118px,0.8fr) minmax(0,1.8fr) minmax(170px,1fr)}.inspectors,.materials{padding-inline:9px}.canvas{padding:9px}.stage-header{padding-inline:11px}.stage-header h2{font-size:13px}.stage-badge{padding-inline:6px}.stage-badge i{display:none}.material-source{align-items:flex-start}.breakpoint-button small,.material-source>span:nth-child(2) small,.panel-tip{display:none}.topbar-center{order:3;flex:1 1 100%}.topbar{gap:8px;padding-inline:10px;flex-wrap:wrap}.actions{margin-left:auto}.breakpoint-tabs{display:none}.layout-card{padding:10px}.layout-card__footer{padding-top:7px}}.layout-demo[data-theme=dark]{--ink:#edf2ff;--muted:#93a1bb;--line:#2d3a50;--line-strong:#43516a;--panel:#151e2e;--canvas:#0e1625;--topbar:rgb(17 25 39 / 94%);--stage:#172235;--stage-header:rgb(24 36 56 / 96%);--card:#1d2a40;--card-line:#3b4b68;--checker-a:#1a2638;--checker-b:#223047;--accent:#90a2ff;--accent-soft:#29345d;--shadow:0 18px 42px rgb(0 0 0 / 28%);background:var(--canvas)}.layout-demo[data-theme=dark] .breakpoint-tabs,.layout-demo[data-theme=dark] .route-tabs{background:#1b273b}.layout-demo[data-theme=dark] .topbar-center__shell{background:#151f31;border-color:#2d3a50;box-shadow:0 8px 20px rgb(0 0 0 / 18%)}.layout-demo[data-theme=dark] .canvas-device-control,.layout-demo[data-theme=dark] .development-mode,.layout-demo[data-theme=dark] .device-select,.layout-demo[data-theme=dark] .orientation-button,.layout-demo[data-theme=dark] .workspace-mode{background:#1b273b;color:#a7b3c9}.layout-demo[data-theme=dark] .workspace-mode{background:0 0;color:#b7c2ff}.layout-demo[data-theme=dark] .development-mode.is-open,.layout-demo[data-theme=dark] .development-mode:hover{border-color:#455aab;background:#25324b;color:var(--accent)}.layout-demo[data-theme=dark] .workspace-mode__hint{border-color:#34435d;color:#8190aa}.layout-demo[data-theme=dark] .canvas-device-control.is-open,.layout-demo[data-theme=dark] .canvas-device-control:hover,.layout-demo[data-theme=dark] .device-select.is-open,.layout-demo[data-theme=dark] .device-select:hover,.layout-demo[data-theme=dark] .orientation-button:hover,.layout-demo[data-theme=dark] .orientation-button[aria-pressed=true]{border-color:#455aab;background:#25324b;color:var(--accent)}.layout-demo[data-theme=dark] .custom-select__menu{border-color:#36455f;background:#17243a;box-shadow:0 16px 34px rgb(0 0 0 / 32%)}.layout-demo[data-theme=dark] .custom-select__option:hover,.layout-demo[data-theme=dark] .custom-select__option[aria-selected=true]{background:#26365b;color:#c5ceff}.layout-demo[data-theme=dark] .preview-open-button{border-color:#455aab!important;background:#202d4d!important;color:#c5ceff!important}.layout-demo[data-theme=dark] .breakpoint-tab,.layout-demo[data-theme=dark] .route-tabs button{color:#a7b3c9}.layout-demo[data-theme=dark] .breakpoint-tab:hover,.layout-demo[data-theme=dark] .breakpoint-tab[aria-pressed=true],.layout-demo[data-theme=dark] .route-tabs button:hover,.layout-demo[data-theme=dark] .route-tabs button[aria-current=page]{background:#25324b;color:var(--accent)}.layout-demo[data-theme=dark] .actions button:hover:not(:disabled),.layout-demo[data-theme=dark] .canvas-tool-button:hover{background:#273552;color:var(--accent)}.layout-demo[data-theme=dark] .material-source{background:#1b293e;border-color:var(--line);box-shadow:0 6px 16px rgb(0 0 0 / 18%)}.layout-demo[data-theme=dark] .material-search{background:#17243a}.layout-demo[data-theme=dark] .material-select{background:#1b293e}.layout-demo[data-theme=dark] .material-category-button.active,.layout-demo[data-theme=dark] .material-category-button:hover,.layout-demo[data-theme=dark] .material-filter-reset:hover{background:#26365b}.layout-demo[data-theme=dark] .material-source:hover{background:#22324e;border-color:#5c6fbb}.layout-demo[data-theme=dark] .breakpoint-button[aria-pressed=true],.layout-demo[data-theme=dark] .panel-count{background:var(--accent-soft)}.layout-demo[data-theme=dark] .breakpoint-button{color:#a0aec5}.layout-demo[data-theme=dark] .breakpoint-button:hover{background:#202e47}.layout-demo[data-theme=dark] .panel-tip{background:#1a2639;color:#8999b5}.layout-demo[data-theme=dark] .stage-badge{background:#1f2d45}.layout-demo[data-theme=dark] .layout-card{background:var(--card);color:var(--ink);box-shadow:0 12px 26px rgb(0 0 0 / 20%),inset 0 1px 0 rgb(255 255 255 / 4%)}.layout-demo[data-theme=dark] .layout-card__action{border-color:#40516e;background:#1b2940;color:#a8b6d0}.layout-demo[data-theme=dark] .layout-card__title{color:#eef3ff}.layout-demo[data-theme=dark] .layout-card__value{color:#dbe3ff}.layout-demo[data-theme=dark] .layout-card__footer,.layout-demo[data-theme=dark] .layout-card__meta{color:#9caac1}.layout-demo[data-theme=dark] .layout-editor-grid::after{color:#7889a5}.layout-demo[data-theme=dark] .inspectors{background:#101827;color:#e9eff9;border-left-color:rgb(10 19 34 / 12%)}.layout-demo[data-theme=dark] .copy-code-button,.layout-demo[data-theme=dark] .download-code-button{border-color:rgb(153 170 210 / 16%);background:rgb(117 137 255 / 12%);color:#aab5ff}.layout-demo[data-theme=dark] .copy-code-button:hover,.layout-demo[data-theme=dark] .download-code-button:hover{border-color:rgb(153 170 210 / 34%);background:rgb(117 137 255 / 22%);color:#fff}.layout-demo[data-theme=dark] .code-block{background:#192438;color:#cad5ea;border-color:rgb(153 170 210 / 12%)}.layout-demo[data-theme=dark] .code-token-comment{color:#71819e}.layout-demo[data-theme=dark] .code-token-keyword,.layout-demo[data-theme=dark] .code-token-tag{color:#c4b5fd}.layout-demo[data-theme=dark] .code-token-attribute,.layout-demo[data-theme=dark] .code-token-property{color:#80d8ee}.layout-demo[data-theme=dark] .code-token-string{color:#f3b18a}.layout-demo[data-theme=dark] .code-token-constant,.layout-demo[data-theme=dark] .code-token-number{color:#f3a6cb}.layout-demo[data-theme=dark] .code-status{color:#7f8da6}.layout-demo[data-theme=dark] .mode-button{border-color:#5265b8!important;background:#27345c!important;color:#c5ceff!important}
+:root{color:#172033;background:#eef2f7;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;font-synthesis:none}*{box-sizing:border-box}#app,body,html{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:0}button{font:inherit}button:focus-visible{outline:#5b7cfa solid 2px;outline-offset:2px}.layout-demo{--ink:#172033;--muted:#768198;--line:#dce3ed;--line-strong:#c7d1df;--panel:#fff;--canvas:#f5f7fb;--topbar:rgb(255 255 255 / 92%);--stage:#fff;--stage-header:rgb(250 251 255 / 88%);--card:#fff;--card-line:#d8def0;--checker-a:#e7e9ed;--checker-b:#f8f9fb;--accent:#536df1;--accent-soft:#eef0ff;--shadow:0 16px 40px rgb(36 52 82 / 8%);width:100%;height:100%;min-width:0;min-height:0;display:grid;grid-template-rows:82px minmax(0,1fr);overflow:hidden;background:var(--canvas);color:var(--ink)}.topbar{min-width:0;min-height:0;position:relative;z-index:60;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:visible;background:var(--topbar);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgb(255 255 255 / 80%)}.actions,.brand,.breakpoint-button,.material-source,.mode-button,.route-tabs,.route-tabs button{display:flex;align-items:center}.brand{min-width:150px;gap:10px}.brand-copy{min-width:0;display:grid;gap:2px}.brand-copy strong{color:var(--ink);font-size:14px;line-height:1.1;white-space:nowrap}.brand-copy span{color:var(--muted);font-size:10px;white-space:nowrap}.topbar-center{min-width:0;display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none}.topbar-center__shell{min-width:-moz-max-content;min-width:max-content;padding:4px 6px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 86%,#f0f3fa);box-shadow:0 5px 18px rgb(49 68 104 / 6%)}.topbar-center__section{display:flex;align-items:center;gap:7px}.device-select,.workspace-mode{min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:1px solid transparent;border-radius:9px;color:var(--muted)}.workspace-mode{color:var(--accent);font-size:12px;font-weight:700;white-space:nowrap}.development-mode{position:relative;min-width:124px;min-height:36px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel) 86%,#eef1f7);color:var(--ink);box-shadow:0 4px 12px rgb(49 68 104 / 5%)}.development-mode.is-open,.development-mode:hover{border-color:var(--accent);background:var(--panel);color:var(--accent);box-shadow:0 0 0 3px rgb(88 105 241 / 10%)}.development-mode .custom-select__trigger{min-width:122px;min-height:34px;font-size:11px;font-weight:700}.development-mode__menu{min-width:226px;right:0;left:auto}.development-mode__menu .custom-select__option{min-height:44px}.development-mode__menu .custom-select__option>span{min-width:0;display:grid;gap:2px}.development-mode__menu strong{color:inherit;font-size:11px;font-weight:700}.development-mode__menu small{color:var(--muted);font-size:9px;line-height:1.2}.workspace-mode__hint{padding-left:7px;border-left:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:500}.device-select{position:relative;padding:0;background:color-mix(in srgb,var(--panel) 72%,#eef1f7)}.device-select.is-open,.device-select:hover{border-color:var(--line);background:var(--panel);color:var(--ink)}.custom-select__trigger{min-height:32px;display:inline-flex;align-items:center;gap:7px;min-width:104px;padding:0 9px;border:0;border-radius:inherit;background:0 0;color:inherit;cursor:pointer;font-size:11px;text-align:left}.custom-select__trigger svg:last-child{margin-left:auto;transition:transform 140ms}.custom-select.is-open .custom-select__trigger svg:last-child{transform:rotate(180deg)}.custom-select__menu{position:absolute;z-index:40;top:calc(100% + 7px);left:0;min-width:154px;padding:5px;display:grid;gap:2px;border:1px solid var(--line);border-radius:11px;background:var(--panel);box-shadow:0 14px 32px rgb(37 53 91 / 16%);animation:140ms ease-out select-menu-in}.custom-select__option{min-height:31px;display:flex;align-items:center;gap:7px;padding:0 8px;border:0;border-radius:7px;background:0 0;color:var(--muted);cursor:pointer;font-size:11px;text-align:left}.custom-select__option:hover,.custom-select__option[aria-selected=true]{background:var(--accent-soft);color:var(--accent)}.custom-select__option-meta{margin-left:auto;color:var(--muted);font-size:9px}@keyframes select-menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.orientation-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:color-mix(in srgb,var(--panel) 72%,#eef1f7);color:var(--muted);cursor:pointer;transition:140ms}.orientation-button:hover,.orientation-button[aria-pressed=true]{border-color:var(--line);background:var(--panel);color:var(--accent)}.topbar-center__label{padding:0 2px 0 4px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;white-space:nowrap}.topbar-center__divider{width:1px;height:24px;background:var(--line)}.topbar-center::-webkit-scrollbar{display:none}.brand-mark{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:linear-gradient(145deg,#5f74f6,#8495ff);color:#fff;font-size:18px;font-weight:800;box-shadow:0 8px 18px rgb(83 109 241 / 25%)}.actions svg,.brand-mark svg,.breakpoint-icon svg,.inspector-icon svg,.material-add svg,.material-icon svg,.panel-tip>svg,.route-icon{display:block;flex:0 0 auto}.brand span,.brand strong{display:block}.brand strong{font-size:14px;letter-spacing:.01em}.brand div>span{margin-top:3px;color:var(--muted);font-size:11px}.actions{min-width:0;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-gutter:stable}.route-tabs{flex:0 0 auto;gap:2px;padding:2px;border-radius:9px;background:color-mix(in srgb,var(--panel) 72%,#eef1f7)}.breakpoint-tabs{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:2px;border-radius:9px;background:color-mix(in srgb,var(--panel) 72%,#eef1f7)}.breakpoint-tab{min-height:30px;padding:4px 8px;display:inline-flex;align-items:center;gap:5px;border:0;border-radius:7px;background:0 0;color:#7a8498;cursor:pointer;white-space:nowrap;transition:140ms}.breakpoint-tab:hover{color:var(--ink);background:#fff}.breakpoint-tab[aria-pressed=true]{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgb(38 52 82 / 10%)}.breakpoint-download-button{display:none}.route-tabs button{gap:5px;min-height:30px;padding:4px 9px;border:0;border-radius:7px;background:0 0;color:#6a7488;cursor:pointer;white-space:nowrap;transition:140ms}.route-tabs button:hover{color:var(--ink);background:rgb(255 255 255 / 70%)}.route-tabs button[aria-current=page]{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgb(38 52 82 / 10%)}.route-icon{color:currentColor}.actions button{border:1px solid transparent;border-radius:8px;background:0 0;color:#68748a;cursor:pointer;transition:140ms}.actions button:hover:not(:disabled){border-color:var(--line);background:#fff;color:var(--ink)}.actions button:disabled{opacity:.35;cursor:not-allowed}.icon-button{width:32px;height:32px;flex:0 0 32px;display:grid!important;place-items:center;font-size:20px;line-height:1}.icon-button:nth-of-type(5){color:#e36c7e}.mode-button{flex:0 0 auto;gap:6px;min-height:32px;padding:0 11px;border-color:#cbd4ff!important;background:var(--accent-soft)!important;color:#4d63dc!important;font-size:12px;font-weight:700}.mode-button span:first-child{font-size:16px}.preview-open-button{min-height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid #cbd4ff!important;border-radius:8px;background:#fff!important;color:#536df1!important;cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap}.preview-open-button:hover{background:var(--accent-soft)!important;box-shadow:0 5px 14px rgb(83 109 241 / 12%)}.workspace{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(290px,330px) minmax(0,1fr) minmax(320px,400px);overflow:hidden}.panel-scroll{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin}.materials{padding:16px 16px 18px;display:flex;flex-direction:column;align-items:stretch;gap:9px;background:linear-gradient(180deg,var(--panel) 0,color-mix(in srgb,var(--panel) 94%,var(--canvas)) 100%);border-right:1px solid var(--line)}.inspector-heading,.panel-heading{min-width:0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.panel-heading{padding:0 3px 4px}.materials .panel-heading .eyebrow{display:none}.materials .panel-heading h2{margin:0;font-size:18px;letter-spacing:-.03em}.panel-heading--breakpoint{margin-top:18px}.eyebrow,.stage-kicker{display:block;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.inspector-heading h2,.panel-heading h2{margin:3px 0 0;font-size:14px;line-height:1.15}.breakpoint-icon,.inspector-icon,.panel-count{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700}.material-toolbar{position:relative;z-index:10;display:grid;gap:6px;padding-bottom:4px;margin:0 0 2px;border-bottom:1px solid color-mix(in srgb,var(--line) 76%,transparent)}.material-search{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--panel) 78%,#fff);color:var(--muted)}.material-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgb(88 105 241 / 10%)}.material-search input{width:100%;min-width:0;border:0;outline:0;background:0 0;color:var(--ink);font:inherit;font-size:11px}.material-filter-row{min-width:0;position:relative;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:6px}.material-select{min-width:0;min-height:34px;position:relative;display:flex;align-items:center;padding:0;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel) 78%,#eef2f8);color:var(--muted)}.material-select:hover{border-color:var(--accent);color:var(--accent)}.material-select.is-open{z-index:30;border-color:var(--accent);background:var(--panel);color:var(--ink);box-shadow:0 0 0 3px rgb(88 105 241 / 10%)}.material-select .custom-select__trigger{width:100%;min-width:0;padding:0 8px;font-size:10px}.material-select .custom-select__trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.material-select .custom-select__menu{min-width:max(100%,180px);max-width:min(260px,calc(100vw - 32px));max-height:min(280px,calc(100vh - 180px));overflow-y:auto}.material-select:nth-child(2) .custom-select__menu{right:0;left:auto}.material-filter-reset{width:28px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:0 0;color:var(--muted);cursor:pointer}.material-filter-reset:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.material-result-summary{min-height:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px;color:var(--muted);font-size:10px}.material-result-summary span:last-child{color:var(--accent)}.material-category-list{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.material-category-list::-webkit-scrollbar{display:none}.material-category-button{flex:0 0 auto;min-height:25px;padding:0 9px;border:1px solid transparent;border-radius:7px;background:0 0;color:var(--muted);cursor:pointer;font:inherit;font-size:10px}.material-category-button.active,.material-category-button:hover{border-color:rgb(88 105 241 / 18%);background:var(--accent-soft);color:var(--accent)}.material-empty{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px 12px;border:1px dashed var(--line-strong);border-radius:12px;background:color-mix(in srgb,var(--panel) 76%,var(--canvas));color:var(--muted);font-size:11px;text-align:center}.material-empty svg{color:var(--accent)}.material-empty strong{color:var(--ink);font-size:12px}.material-empty span{font-size:10px}.material-empty button{min-height:28px;margin-top:4px;padding:0 10px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;font:inherit;font-size:10px}.material-empty button:hover{background:color-mix(in srgb,var(--accent-soft) 72%,var(--accent))}.material-source{min-height:72px;gap:9px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-align:left;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;box-shadow:0 4px 14px rgb(48 65 95 / 6%);transition:140ms;display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center}.material-source:hover{border-color:#bcc6ff;background:#fbfbff;transform:translateY(-1px);box-shadow:0 8px 18px rgb(68 87 164 / 12%)}.material-source:active{cursor:grabbing;transform:translateY(0)}.material-copy,.material-source>span:nth-child(2){min-width:0;flex:1}.material-size{flex:0 0 auto;align-self:flex-start;padding:3px 5px;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-size:9px;font-variant-numeric:tabular-nums}.material-card-meta{min-width:0;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}.material-renderer-badges{display:flex;align-items:center;gap:3px}.material-renderer-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 4px;border-radius:5px;background:#edf5ff;color:#4381d9;font-size:8px;line-height:1;white-space:nowrap}.material-renderer-badge--vue{background:#eaf8f1;color:#3f9a74}.material-source small,.material-source strong{display:block}.material-source strong{font-size:12px}.material-source small{margin-top:3px;color:var(--muted);font-size:10px}.material-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px}.material-icon--metric{background:#edf5ff;color:#4381d9}.material-icon--chart{background:#f2eeff;color:#8167dd}.material-add{display:grid;place-items:center;color:#a1abc0}.breakpoint-button{min-height:42px;gap:9px;padding:8px 9px;border:1px solid transparent;border-radius:9px;background:0 0;color:#69758b;text-align:left;cursor:pointer}.breakpoint-button:hover{background:#f6f8fc;color:var(--ink)}.breakpoint-button[aria-pressed=true]{border-color:#ccd4ff;background:var(--accent-soft);color:#4d63dc}.breakpoint-button span:nth-child(2){flex:1;font-size:12px;font-weight:700}.breakpoint-button small{color:#a0a9b9;font-size:10px}.breakpoint-dot{width:7px;height:7px;border-radius:50%;background:#c8d0dc}.breakpoint-button[aria-pressed=true] .breakpoint-dot{background:var(--accent);box-shadow:0 0 0 4px rgb(83 109 241 / 14%)}.panel-tip{margin-top:auto;padding:10px;display:flex;gap:7px;align-items:flex-start;border-radius:9px;background:#f7f8fb;color:#8993a5;font-size:10px;line-height:1.55}.panel-tip>svg{color:var(--accent)}.canvas{position:relative;padding:20px;display:flex;flex-direction:column;gap:10px;background-color:var(--checker-a);background-image:linear-gradient(45deg,var(--checker-b) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-b) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-b) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-b) 75%);background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0}.canvas-toolbar{position:sticky;top:0;z-index:30;align-self:stretch;width:100%;min-height:38px;padding:4px;display:flex;align-items:center;justify-content:flex-end;gap:3px;border:0;background:0 0;box-shadow:none;pointer-events:none}.canvas-toolbar>*{pointer-events:auto}.canvas-device-control{position:absolute;z-index:35;left:0;top:4px;min-height:34px;padding:0;border:1px solid;border-radius:10px;background:var(--topbar);box-shadow:0 8px 22px rgb(67 84 122 / 12%),inset 0 1px 0 rgb(255 255 255 / 80%);backdrop-filter:blur(12px)}.canvas-device-control.is-open,.canvas-device-control:hover{border-color:var(--line-strong);background:var(--panel);color:var(--ink)}.canvas-device-control .custom-select__trigger{min-width:112px}.canvas-device-control .custom-select__menu{top:calc(100% + 7px);left:0}.canvas-device-control+.orientation-button{position:absolute;z-index:35;top:4px;left:120px;border:1px solid;background:var(--topbar);box-shadow:0 8px 22px rgb(67 84 122 / 12%),inset 0 1px 0 rgb(255 255 255 / 80%);backdrop-filter:blur(12px)}.canvas-device-control+.orientation-button+.canvas-toolbar__divider{display:none}.canvas-toolbar__group{display:flex;align-items:center;gap:2px}.canvas-toolbar__divider{width:1px;height:20px;margin:0 3px;background:var(--line)}.canvas-tool-button{width:29px;height:29px;display:grid;place-items:center;border:0;border-radius:8px;background:0 0;color:#7a879d;cursor:pointer;transition:background 140ms,color 140ms,transform 140ms}.canvas-tool-button:hover{background:#f0f3ff;color:var(--accent)}.canvas-tool-button:active{transform:scale(.94)}.canvas-tool-button.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px rgb(83 109 241 / 12%)}.canvas-zoom-label{min-width:42px;color:#5f6d84;font-size:11px;font-variant-numeric:tabular-nums;font-weight:700;text-align:center}.canvas-viewport{position:relative;flex:0 0 auto;min-width:0;min-height:620px;overflow:visible;border-radius:16px;touch-action:none;cursor:default}.canvas-viewport.is-pan-tool{cursor:grab}.canvas-viewport.is-panning{cursor:grabbing}.canvas-scene{width:100%;min-width:0;transform-origin:0 0;will-change:transform}.editor-stage,.preview-stage,.runtime-preview-stage,.vanilla-runtime-stage{flex:0 0 auto;min-width:0;min-height:620px;display:flex;flex-direction:column;height:auto;overflow:visible;border:1px solid var(--line);border-radius:14px;background:var(--stage);box-shadow:var(--shadow)}.editor-stage::before,.preview-stage::before,.runtime-preview-stage::before,.vanilla-runtime-stage::before{content:"";height:3px;flex:0 0 3px;background:linear-gradient(90deg,#5b73f2,#9c83ff 55%,#74cbb1)}.stage-header{min-height:62px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:var(--stage-header)}.stage-header h2{margin:4px 0 0;font-size:15px;line-height:1.15}.stage-kicker{color:var(--muted);font-size:10px;font-weight:700}.stage-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:10px;white-space:nowrap}.stage-badge i{width:6px;height:6px;border-radius:50%;background:#62c49c;box-shadow:0 0 0 3px rgb(98 196 156 / 15%)}.layout-editor-grid,.ldesign-layout-grid,.runtime-preview-grid{flex:0 0 auto;min-width:0;min-height:558px;padding:16px;position:relative;isolation:isolate;background:var(--stage);--gs-cell-height:8px;--gs-item-margin-top:16px!important;--gs-item-margin-bottom:0px!important;--gs-item-margin-left:16px!important;--gs-item-margin-right:0px!important}.layout-editor-grid.gs-12{--gs-column-width:calc((100% - 16px) / 12)!important}.layout-editor-grid.gs-8{--gs-column-width:calc((100% - 16px) / 8)!important;--gs-item-margin-bottom:-4px!important}.layout-editor-grid.gs-4{--gs-column-width:calc((100% - 16px) / 4)!important;--gs-item-margin-bottom:-8px!important}.layout-editor-grid .grid-stack-item-content{padding:0;overflow:hidden;border:0;border-radius:12px;background:0 0;color:var(--ink);cursor:grab}.layout-editor-grid .grid-stack-item-content:active,.layout-editor-grid .ui-draggable-dragging .grid-stack-item-content,.layout-editor-grid.grid-stack-dragging .grid-stack-item-content{cursor:grabbing}.layout-editor-grid .grid-stack-item.ui-draggable-dragging,.layout-editor-grid .grid-stack-item.ui-resizable-resizing,.layout-editor-grid .ui-draggable-dragging{transition:none!important;will-change:left,top,width,height}body>.ui-draggable-dragging[data-layout-material]{transition:none!important;animation:none!important;will-change:left,top}.layout-editor-grid .grid-stack-placeholder>.placeholder-content{border:1px dashed;border-radius:12px;background:rgb(83 109 241 / 10%);box-shadow:inset 0 0 0 1px rgb(255 255 255 / 45%)}.layout-editor-grid::after{content:"拖入物料开始布局";inset:50% auto auto 50%;z-index:-1;transform:translate(-50%,-50%);color:#a8b2c5;font-size:12px;letter-spacing:.08em;pointer-events:none}.layout-editor-grid:has(.grid-stack-item)::after{opacity:0}.layout-editor-grid .grid-stack-item.is-selected .grid-stack-item-content{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}.layout-editor-grid .grid-stack-item:focus-visible .grid-stack-item-content{outline:#12a594 solid 2px;outline-offset:-4px}.ldesign-layout-grid{flex:1 0 auto;min-height:max(180px,min(558px,var(--canvas-grid-height,558px)))}.runtime-preview-grid{flex:1 0 auto}.runtime-preview-stage[data-preview-framework=vue]>.runtime-preview-grid,.vanilla-runtime-stage[data-preview-framework=vue]>.runtime-preview-grid{display:none!important}.layout-card,.layout-item-shell{position:relative;width:100%;height:100%;min-width:0;min-height:0}.layout-item-shell{display:block;padding:0;overflow:hidden;border:0;background:0 0;color:inherit}.layout-item-shell--interactive{cursor:pointer}.layout-card{min-height:84px;padding:14px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-line);border-radius:12px;background:linear-gradient(145deg,rgb(255 255 255 / 98%),rgb(248 249 255 / 94%)),var(--card);color:var(--ink);box-shadow:0 10px 24px rgb(71 86 132 / 9%),inset 0 1px 0 rgb(255 255 255 / 80%);transition:border-color 160ms,box-shadow 160ms,transform 160ms}.layout-card__actions{position:absolute;z-index:2;top:9px;right:9px;display:flex;align-items:center;gap:3px;opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity 140ms,transform 140ms;isolation:isolate}.layout-editor-grid .grid-stack-item.is-selected .layout-card__actions,.layout-editor-grid .grid-stack-item:hover .layout-card__actions{opacity:1;transform:translateY(0);pointer-events:auto}.layout-card__action{position:relative;z-index:3;width:24px;height:24px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:7px;background:color-mix(in srgb,var(--panel) 94%,transparent);color:var(--muted);cursor:pointer;pointer-events:auto;box-shadow:0 3px 8px rgb(37 53 91 / 10%);transition:color 140ms,border-color 140ms,background 140ms,transform 140ms}.layout-card__action:hover{border-color:#9aa9ff;background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}.layout-card__footer,.layout-card__meta{display:flex;align-items:center;justify-content:space-between;gap:8px}.layout-card__meta{color:#8590a5;font-size:10px}.layout-card__type{color:var(--accent);font-weight:700}.layout-card__status{padding:2px 5px;border-radius:4px;background:#edf8f3;color:#4aaf84;white-space:nowrap}.layout-card__title{margin:10px 0 7px;overflow:hidden;color:#273249;font-size:13px;font-weight:700;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.layout-card__value{display:block;color:#25345a;font-size:clamp(20px, 2.2vw, 30px);line-height:1;letter-spacing:-.04em}.layout-card__chart{height:36px;display:flex;align-items:flex-end;gap:5px;padding:0 3px}.layout-card__chart i{width:100%;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#8b9cff,#5e72ed)}.layout-card__chart i:first-child{height:38%}.layout-card__chart i:nth-child(2){height:62%}.layout-card__chart i:nth-child(3){height:48%}.layout-card__chart i:nth-child(4){height:82%}.layout-card__chart i:nth-child(5){height:100%}.layout-card__footer{margin-top:auto;padding-top:12px;color:#9aa3b4;font-size:10px}.layout-card__spark{color:#56b78e;font-size:15px;font-weight:700}.layout-item-shell[aria-pressed=true] .layout-card,.widget.selected .layout-card{border-color:#8392f6;box-shadow:0 0 0 2px rgb(83 109 241 / 18%),0 10px 22px rgb(71 86 132 / 12%)}.layout-editor-grid .grid-stack-item:hover .layout-card,.layout-item-shell--interactive:hover .layout-card{border-color:#aab6f7;box-shadow:0 0 0 2px rgb(83 109 241 / 12%),0 14px 28px rgb(71 86 132 / 14%)}.inspectors{padding:18px 14px;display:flex;flex-direction:column;gap:12px;background:var(--panel);color:var(--ink);border-left:1px solid var(--line);overflow:auto}.inspector-heading{align-items:center;padding:2px 3px 0;flex:0 0 auto}.inspector-heading>div:first-child{min-width:0;flex:1}.inspector-heading h2{color:var(--ink)}.inspector-heading .eyebrow{color:var(--muted)}.inspector-icon{background:var(--accent-soft);color:var(--accent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.copy-code-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;transition:140ms}.copy-code-button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent-soft) 72%,#fff);color:var(--accent)}.download-code-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;transition:140ms}.download-code-button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent-soft) 72%,#fff);color:var(--accent)}.code-block{min-height:0;height:0;flex:1 1 0;margin:0;padding:12px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:#f7f9fc;color:#263653;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.65;-moz-tab-size:2;-o-tab-size:2;tab-size:2;white-space:pre;scrollbar-width:thin}.code-block code{display:block;min-width:-moz-max-content;min-width:max-content;color:inherit}.code-token-comment{color:#8b96a8;font-style:italic}.code-token-keyword,.code-token-tag{color:#7257d8}.code-token-attribute,.code-token-property{color:#197d9a}.code-token-string{color:#b05b2b}.code-token-constant,.code-token-number{color:#b43d78}.code-status{display:flex;align-items:center;gap:7px;padding:0 3px 2px;flex:0 0 auto;color:var(--muted);font-size:10px;line-height:1.4}.material-card-actions{display:inline-flex;align-items:center;gap:3px;justify-self:end}.material-code-button{width:25px;height:25px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:7px;background:0 0;color:var(--muted);cursor:pointer;transition:140ms}.material-code-button:focus-visible,.material-code-button:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));background:var(--accent-soft);color:var(--accent);outline:0}.code-status__dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#60c99b;box-shadow:0 0 0 3px rgb(96 201 155 / 14%)}.preview-dialog{--ink:#172033;--muted:#768198;--line:#dce3ed;--panel:#fff;--canvas:#f5f7fb;--stage:#fff;--card:#fff;--card-line:#d8def0;--accent:#536df1;--accent-soft:#eef0ff;position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:28px;color:var(--ink)}.preview-dialog-enter-active,.preview-dialog-leave-active{transition:opacity 180ms}.preview-dialog-enter-active .preview-dialog__panel,.preview-dialog-leave-active .preview-dialog__panel{transition:transform 220ms cubic-bezier(.22, 1, .36, 1),opacity 180ms}.preview-dialog-enter-from,.preview-dialog-leave-to{opacity:0}.preview-dialog-enter-from .preview-dialog__panel,.preview-dialog-leave-to .preview-dialog__panel{opacity:0;transform:translateY(14px) scale(.975)}.preview-dialog__backdrop{position:absolute;inset:0;border:0;background:rgb(20 31 51 / 42%);cursor:default;backdrop-filter:blur(6px)}.preview-dialog__panel{position:relative;z-index:1;width:min(1080px,100%);max-height:min(820px,calc(100vh - 56px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 28px 80px rgb(31 46 78 / 26%)}.preview-dialog__footer,.preview-dialog__header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line)}.preview-dialog__header h2{margin:4px 0 0;font-size:17px}.preview-dialog__header-meta{display:flex;align-items:center;gap:8px}.preview-dialog__header .icon-button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);cursor:pointer;transition:140ms}.preview-dialog__header .icon-button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);transform:rotate(6deg)}.preview-dialog__body{min-height:0;flex:1 1 auto;overflow:auto;padding:18px;background:var(--canvas)}.preview-dialog__canvas{min-height:520px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--stage);box-shadow:inset 0 1px 0 rgb(255 255 255 / 70%)}.preview-dialog__canvas .ldesign-layout-grid{min-height:480px;padding:0;background:0 0}.preview-dialog__card{height:100%}.preview-dialog__footer{border-top:1px solid var(--line);border-bottom:0;color:var(--muted);font-size:11px}.preview-dialog__close-button{min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;font-size:11px;font-weight:700}.preview-dialog__close-button:hover{border-color:var(--accent)}.material-code-dialog__panel{width:min(820px,100%)}.material-code-dialog__subtitle{margin:5px 0 0;color:var(--muted);font-size:11px}.material-code-dialog__body{min-height:0;padding:16px}.material-code-dialog__code{min-height:360px;max-height:min(560px,calc(100vh - 250px));margin:0;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--stage) 82%,var(--canvas))}.material-code-dialog__actions{display:inline-flex;align-items:center;gap:8px}.material-code-dialog__actions .copy-code-button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);cursor:pointer}.material-code-dialog__actions .copy-code-button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.preview-dialog[data-theme=dark]{--ink:#edf2ff;--muted:#95a3be;--line:#34405a;--panel:#192238;--canvas:#121a2d;--stage:#202b43;--card:#1d2940;--card-line:#405071;--accent:#8ea2ff;--accent-soft:#293762}.preview-dialog[data-theme=dark] .preview-dialog__backdrop{background:rgb(4 8 18 / 64%)}.preview-dialog[data-theme=dark] .preview-dialog__canvas{box-shadow:inset 0 1px 0 rgb(255 255 255 / 4%)}.preview-dialog[data-theme=dark] .layout-card{background:linear-gradient(145deg,rgb(39 53 80 / 98%),rgb(29 41 64 / 96%)),var(--card);box-shadow:0 10px 24px rgb(2 8 22 / 30%),inset 0 1px 0 rgb(255 255 255 / 5%)}.preview-dialog[data-theme=dark] .layout-card__title{color:#edf2ff}.preview-dialog[data-theme=dark] .layout-card__value{color:#dbe4ff}.preview-dialog[data-theme=dark] .layout-card__footer,.preview-dialog[data-theme=dark] .layout-card__meta{color:#a8b6d0}@media (max-width:1080px){.workspace{grid-template-columns:minmax(190px,230px) minmax(0,1fr) minmax(260px,320px)}.topbar{gap:10px;padding-inline:12px}.brand{min-width:132px}.route-tabs button{padding-inline:7px}.route-tabs button>span:last-child{display:none}.breakpoint-tab{padding-inline:7px}.breakpoint-tab span{display:none}.canvas{padding:14px}}@media (max-width:720px){.layout-demo{grid-template-rows:70px minmax(0,1fr)}.brand-copy{display:none}.workspace{grid-template-columns:minmax(118px,0.8fr) minmax(0,1.8fr) minmax(170px,1fr)}.inspectors,.materials{padding-inline:9px}.canvas{padding:9px}.stage-header{padding-inline:11px}.stage-header h2{font-size:13px}.stage-badge{padding-inline:6px}.stage-badge i{display:none}.material-source{align-items:flex-start}.breakpoint-button small,.material-source>span:nth-child(2) small,.panel-tip{display:none}.topbar-center{order:3;flex:1 1 100%}.topbar{gap:8px;padding-inline:10px;flex-wrap:wrap}.actions{margin-left:auto}.breakpoint-tabs{display:none}.layout-card{padding:10px}.layout-card__footer{padding-top:7px}}.layout-demo[data-theme=dark]{--ink:#edf2ff;--muted:#93a1bb;--line:#2d3a50;--line-strong:#43516a;--panel:#151e2e;--canvas:#0e1625;--topbar:rgb(17 25 39 / 94%);--stage:#172235;--stage-header:rgb(24 36 56 / 96%);--card:#1d2a40;--card-line:#3b4b68;--checker-a:#1a2638;--checker-b:#223047;--accent:#90a2ff;--accent-soft:#29345d;--shadow:0 18px 42px rgb(0 0 0 / 28%);background:var(--canvas)}.layout-demo[data-theme=dark] .breakpoint-tabs,.layout-demo[data-theme=dark] .route-tabs{background:#1b273b}.layout-demo[data-theme=dark] .topbar-center__shell{background:#151f31;border-color:#2d3a50;box-shadow:0 8px 20px rgb(0 0 0 / 18%)}.layout-demo[data-theme=dark] .canvas-device-control,.layout-demo[data-theme=dark] .development-mode,.layout-demo[data-theme=dark] .device-select,.layout-demo[data-theme=dark] .orientation-button,.layout-demo[data-theme=dark] .workspace-mode{background:#1b273b;color:#a7b3c9}.layout-demo[data-theme=dark] .workspace-mode{background:0 0;color:#b7c2ff}.layout-demo[data-theme=dark] .development-mode.is-open,.layout-demo[data-theme=dark] .development-mode:hover{border-color:#455aab;background:#25324b;color:var(--accent)}.layout-demo[data-theme=dark] .workspace-mode__hint{border-color:#34435d;color:#8190aa}.layout-demo[data-theme=dark] .canvas-device-control.is-open,.layout-demo[data-theme=dark] .canvas-device-control:hover,.layout-demo[data-theme=dark] .device-select.is-open,.layout-demo[data-theme=dark] .device-select:hover,.layout-demo[data-theme=dark] .orientation-button:hover,.layout-demo[data-theme=dark] .orientation-button[aria-pressed=true]{border-color:#455aab;background:#25324b;color:var(--accent)}.layout-demo[data-theme=dark] .custom-select__menu{border-color:#36455f;background:#17243a;box-shadow:0 16px 34px rgb(0 0 0 / 32%)}.layout-demo[data-theme=dark] .custom-select__option:hover,.layout-demo[data-theme=dark] .custom-select__option[aria-selected=true]{background:#26365b;color:#c5ceff}.layout-demo[data-theme=dark] .preview-open-button{border-color:#455aab!important;background:#202d4d!important;color:#c5ceff!important}.layout-demo[data-theme=dark] .breakpoint-tab,.layout-demo[data-theme=dark] .route-tabs button{color:#a7b3c9}.layout-demo[data-theme=dark] .breakpoint-tab:hover,.layout-demo[data-theme=dark] .breakpoint-tab[aria-pressed=true],.layout-demo[data-theme=dark] .route-tabs button:hover,.layout-demo[data-theme=dark] .route-tabs button[aria-current=page]{background:#25324b;color:var(--accent)}.layout-demo[data-theme=dark] .actions button:hover:not(:disabled),.layout-demo[data-theme=dark] .canvas-tool-button:hover{background:#273552;color:var(--accent)}.layout-demo[data-theme=dark] .material-source{background:#1b293e;border-color:var(--line);box-shadow:0 6px 16px rgb(0 0 0 / 18%)}.layout-demo[data-theme=dark] .material-search{background:#17243a}.layout-demo[data-theme=dark] .material-select{background:#1b293e}.layout-demo[data-theme=dark] .material-category-button.active,.layout-demo[data-theme=dark] .material-category-button:hover,.layout-demo[data-theme=dark] .material-filter-reset:hover{background:#26365b}.layout-demo[data-theme=dark] .material-source:hover{background:#22324e;border-color:#5c6fbb}.layout-demo[data-theme=dark] .breakpoint-button[aria-pressed=true],.layout-demo[data-theme=dark] .panel-count{background:var(--accent-soft)}.layout-demo[data-theme=dark] .breakpoint-button{color:#a0aec5}.layout-demo[data-theme=dark] .breakpoint-button:hover{background:#202e47}.layout-demo[data-theme=dark] .panel-tip{background:#1a2639;color:#8999b5}.layout-demo[data-theme=dark] .stage-badge{background:#1f2d45}.layout-demo[data-theme=dark] .layout-card{background:var(--card);color:var(--ink);box-shadow:0 12px 26px rgb(0 0 0 / 20%),inset 0 1px 0 rgb(255 255 255 / 4%)}.layout-demo[data-theme=dark] .layout-card__action{border-color:#40516e;background:#1b2940;color:#a8b6d0}.layout-demo[data-theme=dark] .layout-card__title{color:#eef3ff}.layout-demo[data-theme=dark] .layout-card__value{color:#dbe3ff}.layout-demo[data-theme=dark] .layout-card__footer,.layout-demo[data-theme=dark] .layout-card__meta{color:#9caac1}.layout-demo[data-theme=dark] .layout-editor-grid::after{color:#7889a5}.layout-demo[data-theme=dark] .inspectors{background:#101827;color:#e9eff9;border-left-color:rgb(10 19 34 / 12%)}.layout-demo[data-theme=dark] .copy-code-button,.layout-demo[data-theme=dark] .download-code-button{border-color:rgb(153 170 210 / 16%);background:rgb(117 137 255 / 12%);color:#aab5ff}.layout-demo[data-theme=dark] .copy-code-button:hover,.layout-demo[data-theme=dark] .download-code-button:hover{border-color:rgb(153 170 210 / 34%);background:rgb(117 137 255 / 22%);color:#fff}.layout-demo[data-theme=dark] .code-block{background:#192438;color:#cad5ea;border-color:rgb(153 170 210 / 12%)}.layout-demo[data-theme=dark] .code-token-comment{color:#71819e}.layout-demo[data-theme=dark] .code-token-keyword,.layout-demo[data-theme=dark] .code-token-tag{color:#c4b5fd}.layout-demo[data-theme=dark] .code-token-attribute,.layout-demo[data-theme=dark] .code-token-property{color:#80d8ee}.layout-demo[data-theme=dark] .code-token-string{color:#f3b18a}.layout-demo[data-theme=dark] .code-token-constant,.layout-demo[data-theme=dark] .code-token-number{color:#f3a6cb}.layout-demo[data-theme=dark] .code-status{color:#7f8da6}.layout-demo[data-theme=dark] .mode-button{border-color:#5265b8!important;background:#27345c!important;color:#c5ceff!important}