.studio-surface{
    /* 品牌与功能 */
    --au-primary: #165dff; --au-primary-bg: #e8f3ff; --au-primary-bd: #bedaff;
    /* 文本四阶：标题 / 正文 / 辅助 / 占位 */
    --au-t1: #1d2129; --au-t2: #4e5969; --au-t3: #86909c; --au-t4: #c9cdd4;
    /* 面与线 */
    --au-bg: #f7f8fa; --au-line: #e5e6eb; --au-line-2: #f2f3f5;
    /* 语义（Arco 官方阶）：红=删除·错误·必警 橙=待办·提醒 绿=成功·变好 */
    --au-danger: #f53f3f; --au-danger-bg: #ffece8;
    --au-warning: #ff7d00; --au-warning-bg: #fff7e8;
    --au-success: #00b42a; --au-success-bg: #e8ffea;
    /* 深色导航（顶栏 / 登录品牌区） */
    --au-nav-bg: #1e293b; --au-nav-fg: #cbd5e1;
    /* ===== 交互升级扩展（2026-09-16，02-design-tokens.md 批次②）=====
       ⚠️ 暗色映射与密度令牌刻意未进：全站基建，随商品页阶段一起启用（feat-ship-console-redesign）。 */
    --au-surface: #ffffff;            /* 白卡承载（新组件用，既有样式不动） */
    --au-row-hover: #f7fbff;          /* 行 hover（收编 .cig-t hover 值） */
    --au-skel: #eef0f4;               /* 骨架屏底 */
    --au-dur-1: 120ms; --au-dur-2: 200ms; --au-dur-3: 320ms;
    --au-ease: cubic-bezier(.34,.69,.1,1);
    --au-shadow-1: 0 1px 4px rgba(29,33,41,.08);   /* 近悬浮（浮条/段控） */
    --au-shadow-2: 0 4px 16px rgba(29,33,41,.16);  /* 遮罩层容器（抽屉/mini 卡） */
    --au-z-pin: 20; --au-z-fx: 100; --au-z-selbar: 200; --au-z-pop: 1000;
    --au-z-drawer: 1100; --au-z-cmdk: 1150; --au-z-loadbar: 1200;
  }
.studio-surface{ --sb-w:244px; --sb-cw:64px; --sb-bg:var(--au-nav-bg); --sb-fg:var(--au-nav-fg); --sb-accent:var(--au-primary); --top-h:56px; }
.studio-surface .page{ height:100%; min-height:0; display:flex; flex-direction:column; padding:16px 20px 10px; box-sizing:border-box; }
.studio-surface .if2-page,.studio-surface .if2-page *,.studio-surface .if2-page *::before,.studio-surface .if2-page *::after{ box-sizing: border-box; }
.studio-surface .if2-page{ font-size:13px; color:#1c1917; }
.studio-surface .if2-batpage > *{ flex: 0 0 auto; }
.studio-surface .if2-batrow{ display:flex; gap:11px; align-items:flex-start; padding:12px;
                border-bottom:1px solid #f5f4f2; }
.studio-surface .if2-batrow:hover{ background:#fafaf9; }
.studio-surface .if2-batrow-info{ display:flex; align-items:center; gap:6px; flex:0 0 auto; padding-top:2px; }
.studio-surface .if2-batrow-refs{ display:flex; gap:7px; flex-wrap:wrap; flex:0 0 auto; max-width:420px; }
.studio-surface .if2-batrow-main{ flex:1; min-width:180px; }
.studio-surface .if2-batrow-arrow{ flex:0 0 auto; color:#c8c4c0; font-size:15px; align-self:center; }
.studio-surface .if2-batrow-st{ flex:0 0 92px; padding-top:2px; }
.studio-surface .if2-batrow-act{ flex:0 0 auto; display:flex; gap:3px; padding-top:2px; }
.studio-surface .if2-batdot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.studio-surface .if2-batcell{ position:relative; width:110px; flex:0 0 110px; border:1px solid #d6d3d1;
                 background:#fff; overflow:hidden; display:flex; flex-direction:column; }
.studio-surface .if2-batcell .imgdrop,.studio-surface .if2-batcell .imgdrop-inline{ display:block; }
.studio-surface .if2-batcell .imgdrop.aim::after{ top:3px; right:3px; }
.studio-surface .if2-batcell-body{ position:relative; height:86px; background:#fafaf9; }
.studio-surface .if2-batcell-res{ width:100px; flex:0 0 100px; }
.studio-surface .if2-batcell-res .if2-batcell-body{ height:100px; }
.studio-surface .if2-batcell-img{ width:100%; height:86px; object-fit:cover; cursor:zoom-in; display:block; }
.studio-surface .if2-batcell-res .if2-batcell-img{ height:100px; }
.studio-surface .if2-batcell-empty{ height:86px; box-sizing:border-box; display:flex; flex-direction:column;
                       align-items:center; justify-content:center; gap:3px; font-size:10.5px;
                       color:#a8a29e; cursor:pointer; text-align:center; padding:0 4px;
                       background:repeating-linear-gradient(45deg,#fcfcfb 0 5px,#f7f6f4 5px 10px); }
.studio-surface .if2-batcell-empty:hover{ background:#f0f7f2; color:#1f7a37; }
.studio-surface .if2-batcell-off{ cursor:default; background:#fafaf9; }
.studio-surface .if2-batcell-off:hover{ background:#fafaf9; color:#a8a29e; }
.studio-surface .if2-batcell-up{ font-size:16px; line-height:1; }
.studio-surface .if2-batcell-foot{ height:22px; border-top:1px solid #eeeceb; display:flex; align-items:center;
                      gap:2px; padding:0 3px; background:#fff; }
.studio-surface .if2-batcell-cap{ flex:1; min-width:0; font-size:10px; color:#78716c; white-space:nowrap;
                     overflow:hidden; text-overflow:ellipsis; }
.studio-surface .if2-batcell-lib{ flex:0 0 auto; width:17px; height:17px; display:flex; align-items:center;
                     justify-content:center; font-size:10px; color:#78716c; cursor:pointer; }
.studio-surface .if2-batcell-lib:hover{ background:#f0efed; color:#1c1917; }
.studio-surface .if2-batcell-x{ position:absolute; right:2px; top:2px; width:16px; height:16px; background:#a92a1f;
                   color:#fff; font-size:10px; display:flex; align-items:center;
                   justify-content:center; cursor:pointer; }
.studio-surface .if2-batcell-mk{ position:absolute; left:2px; top:2px; height:16px; padding:0 4px;
                    background:rgba(31,122,55,.9); color:#fff; font-size:9px; display:flex;
                    align-items:center; cursor:pointer; }
.studio-surface .if2-batcell-badge{ position:absolute; left:2px; bottom:2px; background:rgba(194,98,10,.9);
                       color:#fff; font-size:9px; padding:0 4px; }
.studio-surface .if2-batcell-hatch{ width:100%; height:100%;
                       background:repeating-linear-gradient(45deg,#fafaf9 0 6px,#f0efed 6px 12px); }
.studio-surface .if2-batcell-run{ width:100%; height:100%;
                     background:linear-gradient(90deg,#f5f4f2 25%,#eceae8 37%,#f5f4f2 63%);
                     background-size:400% 100%; animation:if2batshim 1.4s ease infinite; }
.studio-surface .if2-batcell-fail{ width:100%; height:100%; display:flex; align-items:center;
                      justify-content:center; color:#a92a1f; font-size:20px; background:#fdf4f2; }
.studio-surface .if2-batcell-ok{ position:absolute; right:3px; bottom:3px; width:15px; height:15px;
                    border-radius:50%; background:#fff; color:#1f7a37; font-size:11px;
                    display:flex; align-items:center; justify-content:center; }
.studio-surface .if2-batslot{ border:2px dashed #b9ddc2; background:#f5faf6; padding:8px 10px;
                 min-width:172px; display:flex; flex-direction:column; gap:5px; }
.studio-surface .if2-phwrap{ position:relative; display:inline-flex; }
.studio-surface .if2-phbtn{ height:22px; padding:0 8px; font-size:10.5px; gap:3px; }
.studio-surface .if2-phn{ margin-left:2px; background:#1f7a37; color:#fff; font-size:9.5px; line-height:1;
             padding:2px 4px; border-radius:7px; font-weight:700; }
.studio-surface .if2-phpop{ position:absolute; top:26px; left:0; z-index:1400; width:330px;
               background:#fff; border:1px solid #d6d3d1; box-shadow:0 6px 20px rgba(28,25,23,.14); }
.studio-surface .if2-phpop-r{ left:auto; right:0; }
.studio-surface .if2-phpop-h{ display:flex; align-items:center; gap:6px; padding:7px 10px;
                 border-bottom:1px solid #f0efed; font-size:12px; font-weight:700; }
.studio-surface .if2-phx{ font-size:10.5px; font-weight:400; color:#78716c; cursor:pointer;
             border:1px solid #e7e5e4; padding:1px 6px; }
.studio-surface .if2-phx:hover{ background:#f5f4f2; color:#1c1917; }
.studio-surface .if2-phpop-b{ max-height:280px; overflow:auto; }
.studio-surface .if2-phpop-f{ padding:6px 10px; border-top:1px solid #f0efed; font-size:10.5px; color:#78716c; }
.studio-surface .if2-phrow{ display:flex; align-items:center; gap:7px; padding:6px 10px; cursor:pointer; }
.studio-surface .if2-phrow:hover{ background:#f0f7f2; }
.studio-surface .if2-batslot-no{ width:17px; height:17px; border-radius:50%; background:#1f7a37; color:#fff;
                    font-size:10.5px; display:flex; align-items:center; justify-content:center;
                    flex:0 0 auto; }
.studio-surface .if2-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.studio-surface .if2-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:14px; }
.studio-surface .if2-title{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
.studio-surface .if2-sub{ font-size:12.5px; color:#57534e; margin-top:5px; }
.studio-surface .if2-card{ background:#fff; border:1px solid #d6d3d1; }
.studio-surface .if2-btn{ height:34px; padding:0 16px; border:1px solid #d6d3d1; background:#fff; color:#44403c; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; white-space:nowrap; }
.studio-surface .if2-btn:hover{ border-color:#1c1917; background:#fafaf9; }
.studio-surface .if2-btn-pri{ background:#1e5f9e; border-color:#12456f; color:#fff; }
.studio-surface .if2-btn-pri:hover{ background:#12456f; border-color:#12456f; }
.studio-surface .if2-btn-dis{ background:#f5f5f4 !important; border-color:#e7e5e4 !important; color:#a8a29e !important; cursor:not-allowed !important; }
.studio-surface .if2-act{ height:24px; padding:0 8px; border:1px solid #d6d3d1; background:#fff; color:#44403c; font-size:11.5px; display:inline-flex; align-items:center; cursor:pointer; user-select:none; white-space:nowrap; }
.studio-surface .if2-act:hover{ border-color:#1c1917; }
.studio-surface .if2-ico{ width:26px; height:24px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid transparent; color:#78716c; font-size:14px; cursor:pointer; user-select:none; }
.studio-surface .if2-ico:hover{ color:#1c1917; background:#f5f5f4; border-color:#d6d3d1; }
.studio-surface .if2-ico-danger{ color:#b0776f; }
.studio-surface .if2-ico-danger:hover{ color:#a92a1f; background:#fdf1f0; border-color:#e0aca7; }
.studio-surface .if2-cropstage{ flex:1; min-width:0; position:relative; overflow:hidden; background:#44403c;
    background-image:linear-gradient(45deg,#4c4844 25%,transparent 25%),linear-gradient(-45deg,#4c4844 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#4c4844 75%),linear-gradient(-45deg,transparent 75%,#4c4844 75%);
    background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; touch-action:none; user-select:none; }
.studio-surface .if2-cropframe{ position:absolute; outline-style:solid; outline-color:#fff; cursor:move; box-shadow:0 0 0 9999px rgba(0,0,0,.55); }
.studio-surface .if2-cropgrip{ position:absolute; background:#fff; border-style:solid; border-color:#44403c; box-sizing:border-box; }
.studio-surface .if2-cropthird{ position:absolute; background:rgba(255,255,255,.35); pointer-events:none; }
.studio-surface .if2-croploupe{ position:absolute; width:150px; height:150px; border:2px solid #fff; pointer-events:none;
    box-shadow:0 6px 20px rgba(0,0,0,.45); background-repeat:no-repeat; z-index:5; }
.studio-surface .if2-croploupe::after{ content:''; position:absolute; inset:0; opacity:.85;
    background:linear-gradient(#fff,#fff) center/1px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 1px no-repeat; }
.studio-surface .if2-croploupe-tag{ position:absolute; left:0; bottom:-20px; background:#1c1917; color:#fff; font-size:10.5px; padding:1px 6px; white-space:nowrap; }
.studio-surface .if2-cropzoom{ position:absolute; right:14px; bottom:9px; display:flex; align-items:center; gap:6px; background:rgba(28,25,23,.86); padding:6px 8px; z-index:6; }
.studio-surface .if2-cropzb{ width:26px; height:24px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #57534e; cursor:pointer; font-size:13px; }
.studio-surface .if2-cropzb:hover{ background:#f5f5f4; }
.studio-surface .if2-cropkbd{ font-size:10.5px; border:1px solid #d6d3d1; padding:0 4px; background:#fafaf9; }
.studio-surface .if2-wbolay{ position:absolute; inset:0; pointer-events:none; }
.studio-surface .if2-wbolay > *{ pointer-events:auto; }
.studio-surface .if2-wbedge{ position:absolute; }
.studio-surface .if2-wbmark{ position:absolute; border:1.5px solid #1e5f9e; background:rgba(30,95,158,.20); }
.studio-surface .if2-wbmark span{ position:absolute; left:2px; top:2px; font-size:10px; font-weight:700; background:#1e5f9e; color:#fff; padding:0 4px; }
.studio-surface .if2-wbmask{ position:absolute; background:rgba(28,25,23,.6); outline:1px dashed #fff; }
.studio-surface .if2-wbtext{ position:absolute; white-space:pre; cursor:move; line-height:1.25; user-select:none;
    transform:translateY(-50%); }
.studio-surface .if2-wbtext-sel{ outline:1px dashed #1e5f9e; outline-offset:2px; }
.studio-surface .if2-wbhint{ position:absolute; left:14px; bottom:9px; z-index:6; background:rgba(28,25,23,.82); color:#e7e5e4; font-size:11px; padding:5px 9px; max-width:58%; }
.studio-surface .if2-wbpanel{ border:1px solid #e7e5e4; background:#fafaf9; padding:10px; }
.studio-surface .if2-wbchip{ height:24px; padding:0 8px; border:1px solid #b9d3e8; background:#eaf2f9; color:#12456f; font-size:11px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.studio-surface .if2-wbchip-o{ border-color:#e6b781; background:#fdf7f0; color:#8a5a1f; }
.studio-surface .if2-wbchip i{ font-style:normal; opacity:.55; }
.studio-surface .if2-wbchip i:hover{ opacity:1; }
.studio-surface .if2-wbref{ position:relative; border-right:1px solid #e7e5e4; background:#fafaf9; padding:12px; display:flex; flex-direction:column; gap:9px; overflow:auto; }
.studio-surface .if2-wbref-fold{ padding:10px 4px; align-items:center; overflow:hidden; }
.studio-surface .if2-wbref-fold > *:not(.if2-act){ display:none; }
.studio-surface .if2-wbref-rs{ position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; z-index:9; }
.studio-surface .if2-wbref-rs:hover{ background:rgba(30,95,158,.22); }
.studio-surface .if2-wbrefbox{ position:relative; width:100%; aspect-ratio:1; background:#fff; border:1px solid #d6d3d1; cursor:crosshair; touch-action:none; user-select:none; }
.studio-surface .if2-wbrefmark{ position:absolute; border:1.5px solid #c2620a; background:rgba(194,98,10,.18); }
.studio-surface .if2-wbrefmark span{ position:absolute; left:2px; top:2px; font-size:10px; font-weight:700; background:#c2620a; color:#fff; padding:0 4px; }
.studio-surface .if2-tag{ display:inline-flex; align-items:center; justify-content:center; height:22px; padding:0 8px; font-size:11.5px; font-weight:600; border:1px solid; white-space:nowrap; }
.studio-surface .if2-input{ border:1px solid #d6d3d1; outline:none; font-size:12.5px; padding:5px 7px; background:#fff; color:#1c1917; width:100%; }
.studio-surface .if2-input:focus{ border-color:#1e5f9e; }
.studio-surface .if2-input:disabled{ background:#fafaf9; color:#78716c; }
.studio-surface .if2-ta1{ display:block; height:30px; line-height:18px; resize:none; overflow:hidden; white-space:pre; font-family:inherit; }
.studio-surface .if2-spin{ width:14px; height:14px; border:2px solid #e7e5e4; border-top-color:#1e5f9e; border-radius:50%; animation:if2spin .8s linear infinite; }
.studio-surface .if2-bar{ height:100%; background:#1e5f9e; background-image:linear-gradient(105deg,rgba(255,255,255,.34) 25%,transparent 25% 50%,rgba(255,255,255,.34) 50% 75%,transparent 75%); background-size:12px 12px; animation:if2flow .9s linear infinite; transition:width .5s linear; }
.studio-surface .if2-jrow{ display:grid; grid-template-columns:170px 1fr 112px 96px 150px 74px 108px 148px; align-items:center; gap:12px; padding:11px 14px; }
.studio-surface .if2-jhead{ padding:9px 14px; border-bottom:1px solid #1c1917; background:#fafaf9; font-size:11.5px; font-weight:700; color:#57534e; }
.studio-surface .if2-jline{ border-bottom:1px solid #f0efed; cursor:pointer; }
.studio-surface .if2-jline:hover{ background:#fafaf9; }
.studio-surface .if2-mrow{ grid-template-columns:62px 1fr 96px 96px 70px 80px 96px 104px; }
.studio-surface .if2-mask{ position:fixed; inset:0; background:rgba(28,25,23,.72); z-index:1200; display:flex; align-items:center; justify-content:center; padding:32px; }
.studio-surface .if2-modal{ background:#fff; border:1px solid #1c1917; display:flex; flex-direction:column; max-height:92vh; }
.studio-surface .if2-modal-h{ padding:12px 16px; border-bottom:1px solid #1c1917; background:#fafaf9; font-size:13.5px; font-weight:700; color:#1c1917; }
.studio-surface .if2-modal-f{ padding:12px 16px; border-top:1px solid #e7e5e4; background:#fafaf9; display:flex; justify-content:flex-end; gap:8px; }
.studio-surface .if2-ghead{ display:flex; background:#fafaf9; border-bottom:1px solid #1c1917; font-size:11.5px; font-weight:600; color:#57534e; }
.studio-surface .if2-grow{ display:flex; border-bottom:1px solid #d6d3d1; align-items:stretch; }
.studio-surface .if2-crow{ display:grid; grid-template-columns:96px 1fr 1.15fr .9fr 96px; border-bottom:1px solid #f5f5f4; align-items:stretch; }
.studio-surface .if2-num{ width:18px; height:18px; flex:0 0 18px; border:1px solid #b9d3e8; background:#eaf2f9; color:#1e5f9e; font-size:10.5px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.studio-surface .au-imgs .imgdrop.au-add{ width:96px; height:96px; flex:none; cursor:pointer; }
.studio-surface .au-imgs .imgdrop.au-add .imgdrop-zone{ height:100%; box-sizing:border-box; display:flex; flex-direction:column;
                                           align-items:center; justify-content:center; gap:2px; border:1px dashed var(--au-t4);
                                           border-radius:6px; background:#fafbfc; color:var(--au-t2); }
.studio-surface .au-imgs .imgdrop.au-add:hover .imgdrop-zone,.studio-surface .au-imgs .imgdrop.au-add.on .imgdrop-zone{ border-color:var(--au-primary); color:var(--au-primary); }
.studio-surface{height:100%;min-height:0;overflow:auto}.studio-surface .page{display:block;padding:20px;min-height:100%;height:auto;box-sizing:border-box}.studio-surface .if2-mask{position:fixed}.studio-surface input,.studio-surface textarea{font-family:inherit}
@keyframes if2batshim{0%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes if2spin{to{transform:rotate(360deg)}}
@keyframes if2flow{from{background-position:0 0}to{background-position:24px 0}}