.widget-menu-layer{
    position:fixed;
    inset:0;
    z-index:90;
    pointer-events:none;
    visibility:hidden;
  }
  .widget-menu-layer.is-open{
    pointer-events:auto;
    visibility:visible;
  }
  .widget-context-menu{
    position:fixed;
    left:0;
    top:0;
    width:min(184px,calc(100vw - 28px));
    padding:8px;
    border:var(--app-shell-border);
    border-radius:22px;
    background:var(--ui-color);
    color:#000;
    box-shadow:var(--soft-shadow);
    opacity:0;
    transform:translateY(7px) scale(.965);
    transform-origin:50% 20%;
    transition:opacity .16s ease,transform .18s cubic-bezier(.2,.72,.24,1);
    will-change:transform,opacity;
  }
  .widget-menu-layer.is-open .widget-context-menu{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  .widget-menu-action{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-height:45px;
    margin:0;
    padding:0 12px;
    border:0;
    border-radius:15px;
    background:transparent;
    color:#000;
    display:flex;
    align-items:center;
    gap:11px;
    font-size:13.5px;
    font-weight:400;
    line-height:1;
    letter-spacing:.01em;
    text-align:left;
    box-shadow:none;
    transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  }
  .widget-menu-action + .widget-menu-action{margin-top:2px}
  .widget-menu-action:active{
    transform:scale(.975);
    background:color-mix(in srgb,var(--ui-color) 97%,black);
    box-shadow:var(--app-shell-shadow-active);
  }
  .widget-menu-action .fa-inline-icon{
    width:17px;
    height:17px;
    color:#000;
    fill:currentColor;
    flex:0 0 17px;
  }
  .widget-menu-action span{color:#000}
  [aria-label$="组件"].is-menu-source{
    transform:scale(.992);
    filter:saturate(.98);
    transition:transform .16s ease,filter .16s ease;
  }

  .screen-page{
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }
  .screen-page.active{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }

  .widget-editor-page{
    position:fixed;
    inset:0;
    z-index:110;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-top:env(safe-area-inset-top);
    background:var(--ui-color);
    transform:translate3d(16px,0,0);
    transition:
      opacity .22s ease,
      transform .26s cubic-bezier(.2,.72,.24,1),
      visibility 0s linear .26s;
  }
  .widget-editor-page.active{
    transform:translate3d(0,0,0);
    transition-delay:0s;
  }
  .editor-title{
    align-self:center;
    flex:0 0 auto;
    margin:12px 0 5px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    color:var(--text-main);
    font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;
    font-size:10.5px;
    font-weight:400;
    line-height:1.4;
    letter-spacing:.24em;
    text-indent:.24em;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
  }

  .editor-preview-zone{
    position:relative;
    flex:0 0 min(390px,48dvh);
    min-height:250px;
    overflow:hidden;
    touch-action:pan-y;
  }
  .editor-preview-track{
    position:relative;
    height:calc(100% - 30px);
    width:100%;
    transform:none;
    will-change:auto;
  }
  .editor-preview-slide{
    position:absolute;
    inset:0;
    width:100%;
    min-width:0;
    overflow:hidden;
    padding:8px var(--side-pad) 2px;
    transform-origin:50% 72%;
    will-change:transform,opacity;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
  }
  .editor-preview-stage{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(var(--preview-scale,1));
    transform-origin:50% 50%;
    pointer-events:none;
  }
  .editor-preview-card{
    grid-column:auto;
    grid-row:auto;
    align-self:auto;
    flex:none;
    max-width:none;
    max-height:none;
    pointer-events:none;
    transform:none;
  }
  .editor-preview-name{
    position:absolute;
    left:20px;
    right:20px;
    bottom:3px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
    font-size:11px;
    font-weight:400;
    line-height:1;
    letter-spacing:.04em;
    text-shadow:
      -1px -1px 1.4px rgba(var(--highlight-tint-rgb),.42),
      1px 1px 2px rgba(var(--shadow-warm-rgb),.08);
  }

  .editor-controls-shell{
    position:relative;
    z-index:2;
    flex:1 1 auto;
    min-height:0;
    margin-top:var(--convex-divider-depth);
    border:var(--app-shell-border);
    border-bottom:0;
    border-radius:var(--convex-divider-depth) var(--convex-divider-depth) 0 0;
    background:var(--ui-color);
    box-shadow:var(--soft-shadow);
    overflow:hidden;
  }
  .editor-controls-shell::before,
  .theme-editor-shell::before{
    content:"";
    position:absolute;
    z-index:4;
    left:0;
    right:0;
    top:1px;
    height:var(--convex-divider-depth);
    border-top:1px solid var(--ui-divider-border);
    border-radius:var(--convex-divider-depth) var(--convex-divider-depth) 0 0;
    filter:var(--ui-divider-filter);
    pointer-events:none;
  }
  .editor-controls-scroll{
    position:absolute;
    inset:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
    padding:calc(var(--convex-divider-depth) - 7px) var(--side-pad) calc(20px + env(safe-area-inset-bottom));
  }
  .editor-controls-scroll::-webkit-scrollbar{display:none}
  .editor-form{
    width:min(100%,520px);
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .editor-field{
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .editor-field-label{
    padding-left:6px;
    color:var(--text-secondary);
    font-size:10.5px;
    font-weight:400;
    line-height:1.1;
    text-shadow:-1px -1px 1px rgba(var(--highlight-tint-rgb),.30);
  }
  .editor-field-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
  }
  .editor-input,
  .editor-upload,
  .editor-reset{
    appearance:none;
    -webkit-appearance:none;
    min-height:44px;
    border:var(--app-shell-border);
    border-radius:17px;
    background:var(--ui-color);
    color:var(--text-main);
    font:inherit;
    font-size:12px;
    font-weight:400;
    outline:none;
    box-shadow:var(--soft-shadow-sm);
    transition:transform .14s ease,box-shadow .16s ease;
  }
  .editor-input{
    width:100%;
    padding:0 14px;
    user-select:text;
    -webkit-user-select:text;
  }
  .editor-input::placeholder{color:color-mix(in srgb,var(--text-secondary) 55%,transparent)}
  .editor-input:focus{
    transform:translateY(-1px);
    box-shadow:var(--soft-shadow);
  }
  .editor-upload{
    min-width:74px;
    padding:0 14px;
    display:grid;
    place-items:center;
    line-height:1;
  }
  .editor-upload:active,.editor-reset:active{
    transform:scale(.985);
    box-shadow:var(--soft-shadow-sm);
  }
  .editor-reset{
    width:100%;
    margin-top:5px;
    padding:0 14px;
  }
  .editor-file-input{display:none}
  .has-editor-image .media-placeholder-glyph,
  .avatar.has-editor-image .avatar-silhouette{display:none}

  @media (max-height:700px){
    .editor-preview-zone{flex-basis:min(330px,44dvh);min-height:220px}
    .editor-title{margin-top:8px}
  }

  .editor-controls-shell input,
  .editor-controls-shell button{
    touch-action:manipulation;
  }
  .editor-controls-shell .editor-input{
    touch-action:auto;
    cursor:text;
  }

  .layout-toolbar{
    position:fixed;
    z-index:82;
    left:50%;
    bottom:calc(var(--dock-gap) + var(--dock-h) + var(--pager-gap) + 22px + env(safe-area-inset-bottom));
    display:flex;
    gap:10px;
    padding:7px;
    border:var(--app-shell-border);
    border-radius:20px;
    background:var(--ui-color);
    box-shadow:var(--soft-shadow);
    transform:translate(-50%,8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .16s ease,transform .18s ease,visibility 0s linear .18s;
  }
  body.layout-editing .layout-toolbar{
    transform:translate(-50%,0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
  .layout-toolbar-button{
    appearance:none;
    -webkit-appearance:none;
    min-height:38px;
    padding:0 15px;
    border:var(--app-shell-border);
    border-radius:14px;
    background:var(--ui-color);
    box-shadow:var(--soft-shadow-sm);
    color:#000;
    font-size:12px;
    font-weight:400;
  }
  .layout-picker-layer{
    position:fixed;
    inset:0;
    z-index:88;
    display:flex;
    align-items:flex-end;
    justify-content:stretch;
    padding:0;
    background:rgba(0,0,0,.055);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,visibility 0s linear .22s;
  }
  .layout-picker-layer.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
  .layout-picker{
    width:100%;
    max-height:min(76dvh,680px);
    overflow:hidden;
    padding:10px var(--side-pad) calc(14px + env(safe-area-inset-bottom));
    border:var(--app-shell-border);
    border-bottom:0;
    border-radius:30px 30px 0 0;
    background:var(--layout-drawer-master);
    box-shadow:var(--soft-shadow);
    transform:translate3d(0,102%,0);
    transition:transform .24s cubic-bezier(.22,.76,.3,1);
  }
  .layout-picker-layer.is-open .layout-picker{transform:translate3d(0,0,0)}
  .layout-picker-head{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    margin-bottom:7px;
  }
  .layout-picker-head::before{
    content:"";
    position:absolute;
    left:50%;
    top:1px;
    width:34px;
    height:4px;
    border-radius:999px;
    background:rgba(0,0,0,.16);
    transform:translateX(-50%);
  }
  .layout-picker-title{
    margin-top:9px;
    color:#000;
    font-size:12px;
    font-weight:400;
    letter-spacing:.08em;
  }
  .layout-picker-scroll{
    max-height:calc(min(76dvh,680px) - 62px - env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    padding:2px 0 8px;
  }
  .layout-picker-scroll::-webkit-scrollbar{display:none}
  .layout-picker-size-tabs{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 0 9px;
  }
  .layout-picker-size-tab{
    appearance:none;
    -webkit-appearance:none;
    min-width:48px;
    height:28px;
    padding:0 10px;
    border:var(--app-shell-border);
    border-radius:999px;
    background:var(--layout-drawer-master);
    box-shadow:var(--soft-shadow-sm);
    color:var(--text-secondary);
    font-size:10px;
    font-weight:400;
  }
  .layout-picker-size-tab.is-active{color:#000}
  .layout-picker-pages{
    display:flex;
    width:100%;
    align-items:flex-start;
    transition:transform .24s cubic-bezier(.22,.76,.3,1);
    will-change:transform;
  }
  .layout-picker-page{
    flex:0 0 100%;
    width:100%;
    min-width:0;
    padding:0 1px;
  }
  .layout-picker-grid{
    --layout-picker-cell:calc((100vw - (var(--side-pad) * 2) - (var(--layout-picker-gap) * 3)) / 4);
    display:grid;
    grid-template-columns:repeat(4,var(--layout-picker-cell));
    column-gap:var(--layout-picker-gap);
    /* 28px 是组件名称/meta 占位；组件本体之间的净纵向间距统一为 20px 的 global-row-gap。 */
    row-gap:calc(var(--layout-picker-row-gap) + 28px);
    justify-content:center;
    align-content:start;
  }
  .layout-picker-button{
    appearance:none;
    -webkit-appearance:none;
    position:relative;
    width:auto;
    height:auto;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    padding:0;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:#000;
    overflow:visible;
    text-align:initial;
  }
  .layout-picker-button + .layout-picker-button{margin-top:0}
  .layout-picker-button:active{transform:scale(.992)}
  .layout-picker-preview{
    position:relative;
    width:100%;
    height:var(--picker-preview-height);
    flex:0 0 var(--picker-preview-height);
    overflow:visible;
    display:block;
    border-radius:0;
    background:transparent;
    pointer-events:none;
  }
  .layout-picker-meta{
    position:relative;
    z-index:3;
    min-height:20px;
    padding:0 2px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
    background:transparent;
    box-shadow:none;
    border-radius:0;
    pointer-events:none;
  }
  .layout-picker-name{font-size:10px;font-weight:400;color:#000}
  .layout-picker-size{font-size:9px;font-weight:400;color:var(--text-secondary)}
  .layout-picker-preview-card{
    position:absolute;
    left:50%;
    top:50%;
    margin:0;
    max-width:none;
    max-height:none;
    transform-origin:center center;
    pointer-events:none;
    will-change:transform;
    z-index:1;
  }
  .dock > [data-instance-id]{min-width:0;min-height:0;align-self:center;justify-self:stretch}
  .dock > .app[data-instance-id]{justify-content:center}
  body.layout-editing .dock [data-instance-id]{cursor:grab;touch-action:none}

  body.layout-editing [data-instance-id]{cursor:grab;touch-action:none}
  [data-instance-id].layout-drag-source{opacity:.18;transition:opacity .12s ease}
  .layout-drag-ghost{
    position:fixed;
    z-index:140;
    left:0;
    top:0;
    margin:0;
    pointer-events:none;
    will-change:transform;
    filter:none;
  }
  [data-instance-id]{will-change:transform}
  [data-instance-id].layout-shifting{transition:transform 210ms cubic-bezier(.22,.74,.28,1)}

  @media (prefers-reduced-motion:reduce){
    .sleeve-art,
    .cardpack-art,
    .record-art{transition:none}
    .widget-editor-page,
    .editor-preview-slide,
    .editor-title,
    .editor-upload,
    .editor-reset,
    .editor-input,
    [data-instance-id],
    .app-icon,
    .pager-dot,
    .widget-context-menu,
    .widget-menu-action{transition:none}
  }