/* shell.css：页面外壳布局（从 7 页 critical-layout 超集合并；.data-table-card/thead th/tbody td 为 EVF 版，A/R 页面在内联覆盖块中使用 AR 版） */

      #app-shell{
        display: flex;
        height: 100vh;
        overflow: hidden;
        background: var(--clr-bg);
        position: relative;
      }
      #app-shell[data-sidebar-pos="right"]{
        flex-direction: row-reverse;
      }
      #app-shell::before{
        content: "";
        position: absolute;
        inset: 0;
        background:
        radial-gradient(900px 500px at 85% -10%, rgba(124, 111, 232, 0.10), transparent 60%),
        radial-gradient(700px 420px at -10% 100%, rgba(94, 86, 214, 0.08), transparent 60%),
        #F7F7FB;
        pointer-events: none;
        z-index: 0;
      }
      [data-theme="dark"] #app-shell::before{
        background:
        radial-gradient(900px 500px at 85% -10%, rgba(124, 111, 232, 0.14), transparent 60%),
        radial-gradient(700px 420px at -10% 100%, rgba(94, 86, 214, 0.10), transparent 60%),
        #0F1016;
      }

      #sidebar{
        width: 216px;
        min-width: 216px;
        height: calc(100vh - 28px);
        margin: 14px;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        background: var(--glass-bg);
        border: var(--glass-border);
        border-radius: var(--r-lg);
        box-shadow: var(--glass-shadow);
        overflow: hidden;
      }

      .sidebar-logo{
        display: flex;
        align-items: center;
        gap: var(--s-3);
        padding: var(--s-5) var(--s-4);
        height: 72px;
        flex-shrink: 0;
      }
      .logo-mark{
        width: 36px;
        height: 36px;
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--clr-brand-ink);
      }
      .logo-text{
        font-family: var(--font-display);
        font-size: 14.5px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--clr-ink);
        white-space: nowrap;
      }

      .sidebar-nav{
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
        padding: var(--s-4) var(--s-2);
        overflow-x: hidden;
        overflow-y: auto; /* 窗口过矮时导航可滚动，避免图标被裁切 */
        scrollbar-width: none;
      }
      .sidebar-nav::-webkit-scrollbar{ display: none; }
      /* 窗口较矮时先压缩间距，避免导航溢出到滚动区外 */
      @media (max-height: 760px){
        .sidebar-nav{ gap: 4px; padding-top: 10px; padding-bottom: 10px; }
        .sidebar-nav .nav-section-label{ padding: 10px var(--s-4) 2px; }
      }
      @media (max-height: 640px){
        .sidebar-nav .nav-item{ height: 34px; }
        .sidebar-nav .nav-section-label{ padding: 8px var(--s-4) 2px; }
      }
      .nav-item{
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--s-3);
        height: 38px;
        flex-shrink: 0; /* 保持行高，不被 flex 压扁 */
        padding: 0 var(--control-px-md);
        border: none;
        background: transparent;
        border-radius: var(--r-md);
        cursor: pointer;
        color: var(--clr-ink-2);
        text-align: left;
        transition: background-color var(--duration-fast) var(--ease-out-expo),
                    color var(--duration-fast) var(--ease-out-expo);
        text-decoration: none;
      }
      .nav-item .nav-icon{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
      }
      .nav-item .nav-label{
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
      }
      .nav-item:hover{ background: var(--brand-muted); color: var(--clr-ink); }
      .nav-item[aria-current="page"]{
        color: var(--clr-brand);
        background: var(--clr-fill-strong);
        font-weight: 600;
      }
      .nav-item:focus-visible{
        outline: 2px solid var(--clr-brand);
        outline-offset: -2px;
      }

      .nav-tooltip{
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        padding: 6px 10px;
        background: var(--glass-bg);
        border: var(--glass-border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-2);
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 500;
        color: var(--clr-ink);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        z-index: 20;
        transition: opacity 120ms ease-out, transform 120ms ease-out;
      }

      .nav-section-label{
        flex-shrink: 0;
        font-family: var(--font-display);
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--clr-ink-3);
        padding: var(--s-4) var(--s-4) var(--s-1);
        white-space: nowrap;
      }

      .sidebar-footer{
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
        padding: var(--s-2);
        border-top: 1px solid var(--clr-line);
      }
      .footer-row{
        display: flex;
        align-items: center;
        gap: var(--s-3);
        height: 44px;
        padding: 0 14px;
      }
      .user-avatar{
        width: 32px;
        height: 32px;
        border-radius: var(--r-pill);
        background: linear-gradient(135deg, var(--clr-support) 0%, #4C3EC8 100%);
        color: var(--clr-brand-ink);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 600;
        flex-shrink: 0;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
      }
      .user-meta{
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
      .user-name{
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 600;
        color: var(--clr-ink);
        white-space: nowrap;
        line-height: 1.2;
      }
      .user-role{
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--clr-ink-2);
        white-space: nowrap;
      }
      .toggle-btn{
        width: 44px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        border: none;
        background: transparent;
        color: var(--clr-ink-3);
        cursor: pointer;
        border-radius: var(--r-md);
        transition: color var(--duration-fast) var(--ease-out-expo),
                    background-color var(--duration-fast) var(--ease-out-expo);
      }
      .toggle-btn:hover{ color: var(--clr-ink); background: var(--brand-muted); }
      .toggle-btn:focus-visible{ outline: 2px solid var(--clr-brand); outline-offset: 1px; }

      #content-panel{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        z-index: 1;
        min-width: 0;
      }
      [data-scroll-region="primary"]{
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
      }
      .content-enter{
        animation: content-enter 360ms var(--ease-out-expo) both;
      }
      @keyframes content-enter {
        from{ opacity: 0; transform: translateY(12px); }
        to{ opacity: 1; transform: translateY(0); }
      }

      .top-bar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-5);
        padding: var(--s-5) var(--s-6);
        border-bottom: 1px solid var(--clr-line);
        background: var(--clr-bar-bg);
        flex-shrink: 0;
      }
      .top-bar-left{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
      .top-bar-right{ display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }

      .btn-primary{
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        height: var(--control-h-lg);
        padding: 0 var(--control-px-lg);
        background: var(--brand-grad);
        color: var(--clr-brand-ink);
        border: none;
        border-radius: var(--r-md);
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 12px -3px rgba(124, 111, 232, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
        transition: background-color var(--duration-fast) var(--ease-out-expo),
                    transform var(--duration-fast) var(--ease-out-expo),
                    box-shadow var(--duration-fast) var(--ease-out-expo);
      }
      .btn-primary:hover{
        background: linear-gradient(135deg, #7C6FE8, #5248CC);
        transform: translateY(-1px);
        box-shadow: 0 8px 20px -6px rgba(124, 111, 232, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
      }
      .btn-primary:active{ transform: translateY(0) scale(0.97); }

      .btn-secondary{
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        height: var(--control-h-lg);
        padding: 0 var(--control-px-lg);
        background: var(--glass-bg);
        color: var(--clr-ink);
        border: 1px solid var(--clr-line);
        border-radius: var(--r-md);
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color var(--duration-fast) var(--ease-out-expo),
                    transform var(--duration-fast) var(--ease-out-expo),
                    border-color var(--duration-fast) var(--ease-out-expo);
      }
      .btn-secondary:hover{
        background: var(--clr-fill-strong);
        border-color: var(--clr-brand);
        transform: translateY(-1px);
      }

      .btn-ghost{
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        height: var(--control-h-md);
        padding: 0 var(--control-px-md);
        background: transparent;
        color: var(--clr-ink-2);
        border: 1px solid var(--clr-line);
        border-radius: var(--r-md);
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out-expo);
      }
      .btn-ghost:hover{
        background: var(--brand-muted);
        color: var(--clr-ink);
        border-color: var(--clr-ink-3);
      }

      .btn-danger{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--control-h-sm);
        height: var(--control-h-sm);
        background: transparent;
        color: var(--clr-ink-3);
        border: none;
        border-radius: var(--r-md);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out-expo);
      }
      .btn-danger:hover{
        background: var(--state-error-bg);
        color: var(--state-error);
      }

      .btn-icon{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--control-h-sm);
        height: var(--control-h-sm);
        background: transparent;
        color: var(--clr-ink-3);
        border: none;
        border-radius: var(--r-md);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out-expo);
      }
      .btn-icon:hover{
        background: var(--brand-muted);
        color: var(--clr-ink);
      }
      .btn-icon:disabled,
      .btn-icon:disabled:hover{
        opacity: 0.4;
        cursor: not-allowed;
        background: transparent;
      }
      .btn-primary:disabled, .btn-primary:disabled:hover,
      .btn-secondary:disabled, .btn-secondary:disabled:hover,
      .btn-danger:disabled, .btn-danger:disabled:hover,
      .btn-ghost:disabled, .btn-ghost:disabled:hover{
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      .btn-icon.btn-delete:hover{
        background: var(--state-error-bg);
        color: var(--state-error);
      }

      .tool-container{
        display: flex;
        flex-direction: column;
        gap: var(--s-4);
        padding: var(--s-5) var(--content-px);
        min-height: 0;
      }

      .toolbar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--s-3);
        padding: var(--s-3) var(--s-4);
        background: var(--glass-bg);
        border: var(--glass-border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-1);
      }
      .toolbar-left{ display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
      .toolbar-right{ display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

      .global-settings-card{
        background: var(--glass-bg);
        border: var(--glass-border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-1);
        padding: var(--s-4) var(--s-5);
      }
      .global-settings-header{
        display: flex;
        align-items: center;
        gap: var(--s-3);
        margin-bottom: var(--s-3);
      }
      .global-settings-title{
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 600;
        color: var(--clr-ink);
        margin: 0;
      }
      .global-settings-desc{
        font-size: 12px;
        color: var(--clr-ink-2);
        margin: 0;
      }
      .global-settings-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--s-4);
      }
      .global-settings-field{
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
      }
      .global-settings-field label{
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 500;
        color: var(--clr-ink-2);
      }
      .global-settings-field .hint{
        font-size: 11px;
        color: var(--clr-ink-2);
      }
      .global-settings-field.pair-input-block{
        grid-column: 1 / -1;
      }
      .pair-input-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--s-4);
      }
      .pair-input-col{
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
      }
      .pair-textarea{
        height: auto;
        min-height: 88px;
        padding: var(--s-2) var(--s-3);
        resize: vertical;
        line-height: 1.7;
        font-family: var(--font-mono);
        font-size: 11px;
      }
      .pair-input-actions{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-3);
        flex-wrap: wrap;
      }

      .data-table-card{
        background: var(--glass-bg);
        border: var(--glass-border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-1);
        overflow: hidden;
        animation: content-enter 400ms var(--ease-out-expo) 100ms both;
      }

      .data-table{
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
      }
      .data-table thead th{
        font-family: var(--font-display);
        font-size: 11px;
        font-weight: 600;
        color: var(--clr-ink-2);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-align: left;
        padding: var(--s-3) var(--s-4);
        background: var(--clr-bg);
        border-bottom: 1px solid var(--clr-line);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
      }
      .th-with-batch{
        display: flex;
        align-items: center;
        gap: var(--s-2);
      }
      .batch-input-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--control-h-xs);
        height: var(--control-h-xs);
        padding: 0;
        background: var(--clr-brand);
        color: var(--clr-brand-ink);
        border: none;
        border-radius: var(--r-sm);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out-expo);
      }
      .batch-input-btn:hover{
        background: var(--clr-brand-hover);
        transform: scale(1.1);
      }
      .batch-input-btn:active{
        transform: scale(0.97);
      }
      .batch-clear-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--control-h-xs);
        height: var(--control-h-xs);
        padding: 0;
        border: none;
        border-radius: var(--r-sm);
        background: var(--state-error-bg);
        color: var(--state-error);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out-expo);
      }
      .batch-clear-btn:hover{
        background: var(--state-error);
        color: #fff;
        transform: scale(1.1);
      }
      .batch-clear-btn:active{
        transform: scale(0.97);
      }

      .data-table tbody td{
        padding: var(--s-2) var(--s-4);
        border-bottom: 1px solid var(--clr-line);
        vertical-align: middle;font-variant-numeric: tabular-nums; }
      .data-table tbody tr:last-child td{ border-bottom: none; }
      .data-table tbody tr:hover{ background: var(--clr-hover-overlay); }
      .data-table tbody tr:nth-child(even){ background: var(--brand-muted); }
      @keyframes row-enter{
        from{ opacity: 0; transform: translateY(6px); }
        to{ opacity: 1; transform: translateY(0); }
      }
      .row-enter{ animation: row-enter 200ms var(--ease-out-expo) both; }

      .input-field{
        width: 100%;
        height: var(--control-h-sm);
        padding: 0 var(--s-3);
        background: var(--clr-field-bg);
        border: 1px solid var(--clr-line);
        border-radius: var(--r-md);
        font-family: var(--font-body);
        font-size: 12px;
        color: var(--clr-ink);
        transition: border-color var(--duration-fast) var(--ease-out-expo),
                    box-shadow var(--duration-fast) var(--ease-out-expo);
        box-sizing: border-box;
      }
      .input-field:focus{
        outline: none;
        border-color: var(--clr-brand);
        box-shadow: 0 0 0 3px rgba(124, 111, 232, 0.15);
      }
      .input-field::placeholder{ color: var(--clr-ink-3); }

      .url-cell{
        font-family: var(--font-mono);
        font-size: 11px;
        line-height: 1.6;
        color: var(--clr-ink-2);
        word-break: break-all;
        padding: var(--s-2) var(--s-3);
        background: var(--clr-fill-subtle);
        border: 1px solid rgba(26, 29, 38, 0.06);
        border-radius: var(--r-md);
        max-height: 72px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out-expo);
      }
      .url-cell:hover{
        background: var(--clr-fill-strong);
        color: var(--clr-ink);
      }
      .url-cell.has-value{ color: var(--clr-ink); }
      .url-cell.expanded{
        max-height: none;
        overflow: visible;
      }
      .url-cell.has-value::after{
        content: '▾';
        position: absolute;
        right: var(--s-2);
        bottom: 2px;
        font-size: 10px;
        color: var(--clr-ink-3);
        pointer-events: none;
        transition: transform var(--duration-fast) var(--ease-out-expo);
      }
      .url-cell.has-value.expanded::after{ transform: rotate(180deg); }
      .url-copy-row{
        display: flex;
        align-items: center;
        gap: var(--s-2);
        margin-top: var(--s-2);
      }

      .row-actions{
        display: flex;
        align-items: center;
        gap: var(--s-1);
      }

      .badge{
        display: inline-flex;
        align-items: center;
        height: 24px;
        padding: 0 var(--s-2);
        font-family: var(--font-display);
        font-size: 11px;
        font-weight: 600;
        border-radius: var(--r-sm);
      }
      .badge-success{
        background: rgba(47, 144, 120, 0.12);
        color: var(--state-success);
      }
      .badge-warning{
        background: rgba(217, 130, 11, 0.12);
        color: var(--state-warning);
      }

      @keyframes spin{ to{ transform: rotate(360deg); } }
      .spinner{
        width: 16px; height: 16px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
        display: inline-block;
        flex-shrink: 0;
      }
      .upload-zone.is-loading{ pointer-events: none; opacity: 0.6; }
      .upload-zone.is-loading::after{
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 36px; height: 36px;
        border: 3px solid var(--clr-line);
        border-top-color: var(--clr-brand);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
        background: var(--clr-bg);
      }
      .btn-primary.is-loading{ pointer-events: none; position: relative; }
      .btn-primary.is-loading > *:not(.spinner){ visibility: hidden; }
      .btn-primary.is-loading .spinner{
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        color: var(--clr-brand-ink);
      }
      .empty-state{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--s-3);
        padding: var(--s-7) var(--s-5);
        color: var(--clr-ink-2);
      }
      .empty-state-icon{
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand-muted);
        border-radius: var(--r-pill);
        color: var(--clr-brand);
        box-shadow: 0 0 0 8px var(--brand-muted);
        animation: empty-float 2.4s ease-in-out infinite;
      }
      @keyframes empty-float{
        0%, 100%{ transform: translateY(0); }
        50%{ transform: translateY(-3px); }
      }
      .empty-state-title{
        font-size: 15px;
        font-weight: 600;
        color: var(--clr-ink);
        margin: 0;
      }
      .empty-state-desc{
        font-size: 13px;
        color: var(--clr-ink-3);
        margin: 0;
      }
      .empty-state-action{ margin-top: var(--s-1); }


      .confirm-modal-overlay{
        position: fixed;
        inset: 0;
        background: rgba(26, 29, 38, 0.4);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3000;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-normal) var(--ease-out-expo);
      }
      .confirm-modal-overlay.show{
        opacity: 1;
        pointer-events: auto;
      }
      .confirm-modal{
        width: 90%;
        max-width: 400px;
        background: var(--clr-bg);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-3);
        overflow: hidden;
        transform: scale(0.95) translateY(10px);
        transition: transform var(--duration-normal) var(--ease-out-expo);
      }
      .confirm-modal-overlay.show .confirm-modal{
        transform: scale(1) translateY(0);
      }
      .confirm-modal-body{
        padding: var(--s-5);
        text-align: center;
      }
      .confirm-modal-icon{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--state-error-bg);
        color: var(--state-error);
        margin-bottom: var(--s-3);
      }
      .confirm-modal-message{
        font-size: 14px;
        color: var(--clr-ink-2);
        margin: 0;
        line-height: 1.6;
      }
      .confirm-modal-footer{
        padding: var(--s-4) var(--s-5);
        border-top: 1px solid var(--clr-line);
        display: flex;
        justify-content: center;
        gap: var(--s-3);
      }
      #confirm-modal-ok{
        width: auto;
        height: 36px;
        padding: 0 14px;
        background: transparent;
        color: var(--state-error);
        border: 1px solid var(--state-error);
        border-radius: var(--r-md);
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 500;
      }
      #confirm-modal-ok:hover{
        background: var(--state-error);
        color: #fff;
      }
      .toast{
        position: fixed;
        border-left: 3px solid var(--clr-brand);
        bottom: var(--s-6);
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        padding: var(--s-3) var(--s-5);
        background: var(--toast-bg);
        color: var(--clr-ink);
        border: 1px solid var(--clr-line);
        border-left: 3px solid var(--clr-brand);
        border-radius: var(--r-lg);
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 500;
        box-shadow: var(--shadow-3);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-normal) var(--ease-out-expo),
                    transform var(--duration-normal) var(--ease-out-expo);
        z-index: 1000;
      }
      .toast.show{
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
      .toast-success{ border-left-color: var(--state-success); }
      .toast-error{ border-left-color: var(--state-error); }
      .toast-warning{ border-left-color: var(--state-warning); }
      .toast-info{ border-left-color: var(--state-info); }
      .toast.show{
        display: flex;
        align-items: center;
        gap: var(--s-3);
      }
      .toast-action{
        pointer-events: auto;
        background: var(--clr-brand);
        color: var(--clr-brand-ink);
        border: none;
        border-radius: var(--r-sm);
        padding: 3px 12px;
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
      }
      .toast-action:hover{ background: var(--clr-brand-hover); }



      .info-banner{
        display: flex;
        align-items: flex-start;
        gap: var(--s-3);
        padding: var(--s-3) var(--s-4);
        background: rgba(47, 144, 120, 0.06);
        border: 1px solid rgba(47, 144, 120, 0.15);
        border-radius: var(--r-lg);
        animation: content-enter 300ms var(--ease-out-expo) both;
      }
      .info-banner-icon{
        flex-shrink: 0;
        color: var(--clr-support);
        display: flex;
      }
      .info-banner-content{
        display: flex;
        flex-direction: column;
        gap: var(--s-1);
      }
      .info-banner-title{
        margin: 0;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        color: var(--clr-ink);
      }
      .info-banner-text{
        margin: 0;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--clr-ink-2);
        line-height: 1.6;
      }

      .col-label{ width: 200px; }
      .col-product{ width: 180px; }
      .col-account{ width: 160px; }
      .col-url{ width: auto; min-width: 400px; }
      .col-actions{ width: 80px; }

      .batch-modal-overlay{
        position: fixed;
        inset: 0;
        background: rgba(26, 29, 38, 0.4);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-normal) var(--ease-out-expo);
      }
      .batch-modal-overlay.show{
        opacity: 1;
        pointer-events: auto;
      }
      .batch-modal{
        width: 90%;
        max-width: 500px;
        background: var(--clr-bg);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-3);
        overflow: hidden;
        transform: scale(0.95) translateY(10px);
        transition: transform var(--duration-normal) var(--ease-out-expo);
      }
      .batch-modal-overlay.show .batch-modal{
        transform: scale(1) translateY(0);
      }
      .batch-modal-header{
        padding: var(--s-4) var(--s-5);
        border-bottom: 1px solid var(--clr-line);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .batch-modal-title{
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 600;
        margin: 0;
      }
      .batch-modal-body{
        padding: var(--s-5);
      }
      .batch-modal-hint{
        font-size: 12px;
        color: var(--clr-ink-2);
        margin: 0 0 var(--s-3);
      }
      .batch-modal-textarea{
        width: 100%;
        min-height: 200px;
        padding: var(--s-3);
        background: var(--clr-field-bg);
        border: 1px solid var(--clr-line);
        border-radius: var(--r-md);
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--clr-ink);
        resize: vertical;
        box-sizing: border-box;
        line-height: 1.8;
      }
      .batch-modal-textarea:focus{
        outline: none;
        border-color: var(--clr-brand);
        box-shadow: 0 0 0 3px rgba(124, 111, 232, 0.15);
      }
      .batch-modal-footer{
        padding: var(--s-4) var(--s-5);
        border-top: 1px solid var(--clr-line);
        display: flex;
        justify-content: flex-end;
        gap: var(--s-3);
      }

      @media (max-width: 1024px) {
        .data-table thead{ display: none; }
        .data-table tbody tr{
          display: block;
          margin-bottom: var(--s-4);
          padding: var(--s-4);
          border: 1px solid var(--clr-line);
          border-radius: var(--r-lg);
        }
        .data-table tbody td{
          display: flex;
          align-items: center;
          gap: var(--s-3);
          padding: var(--s-2) 0;
          border-bottom: none;font-variant-numeric: tabular-nums; }
        .data-table tbody td::before{
          content: attr(data-label);
          font-family: var(--font-display);
          font-size: 11px;
          font-weight: 600;
          color: var(--clr-ink-2);
          text-transform: uppercase;
          letter-spacing: 0.04em;
          white-space: nowrap;
          min-width: 80px;
        }
        .url-cell{ max-width: 100%; }
      }
    
      /* ---- 来自 filename.html 的页面专属规则 ---- */
      .upload-zone{
        background: var(--glass-bg);
        border: 1.5px dashed var(--clr-line-2);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-1);
        padding: var(--s-6) var(--s-5);
        text-align: center;
        cursor: pointer;
        transition: all 200ms var(--ease-out-expo);
        animation: content-enter 400ms var(--ease-out-expo) both;
        position: relative;
      }
      .upload-zone:hover{
        border-color: var(--clr-brand);
        background: rgba(124, 111, 232, 0.04);
      }
      .upload-zone.dragover{
        border-color: var(--clr-brand);
        background: rgba(124, 111, 232, 0.08);
        box-shadow: 0 0 0 3px rgba(124, 111, 232, 0.1), var(--shadow-1);
      }
      .upload-zone-icon{
        width: 48px;
        height: 48px;
        margin: 0 auto var(--s-3);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand-muted);
        border-radius: var(--r-pill);
        color: var(--clr-brand);
      }
      .upload-zone-title{
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        color: var(--clr-ink);
        margin: 0 0 var(--s-1);
      }
      .upload-zone-desc{
        font-size: 12px;
        color: var(--clr-ink-2);
        margin: 0;
      }
      .upload-zone-filename{
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--clr-brand);
        margin-top: var(--s-2);
        font-weight: 600;
      }
      .text-cell{
        font-family: var(--font-body);
        font-size: 12px;
        line-height: 1.6;
        color: var(--clr-ink);
        word-break: break-all;
        padding: var(--s-2) var(--s-3);
      }
      .col-filename{ width: auto; min-width: 300px; }
      .col-cid{ width: 280px; }
      .col-result{ width: auto; min-width: 400px; }

      /* ---- 来自 daily-report.html 的页面专属规则 ---- */
      .result-card{
        background: var(--glass-bg);
        border: var(--glass-border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-1);
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 400px;
        max-height: 600px;
        position: relative;
        animation: content-enter 400ms var(--ease-out-expo) 100ms both;
      }
      .result-card.is-empty{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .result-text{
        font-family: var(--font-mono);
        font-size: 13px;
        line-height: 1.8;
        font-variant-numeric: tabular-nums;
        color: var(--clr-ink);
        white-space: pre-wrap;
        word-break: break-all;
        padding: var(--s-4) var(--s-5);
        margin: 0;
      }

      /* ---- 来自 data-summary.html 的页面专属规则 ---- */
      .data-table thead th.col-dim{
        text-align: left;
      }
      .data-table tbody td.cost-cell{ position: relative; }
      .cost-bar{
        position: absolute;
        top: 0; bottom: 0; left: 0;
        background: var(--brand-bar);
        pointer-events: none;
      }
      .data-table tbody td.col-dim{
        font-family: var(--font-body);
        font-weight: 600;
        color: var(--clr-ink);
        text-align: left;
      }
      .data-table tfoot td{
        padding: var(--s-3) var(--s-4);
        border-top: 2px solid var(--clr-line-2);
        background: rgba(124, 111, 232, 0.06);
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 700;
        color: var(--clr-brand);
        text-align: right;
        white-space: nowrap;
        position: sticky;
        bottom: 0;font-variant-numeric: tabular-nums; }
      .data-table tfoot td.col-dim{
        font-family: var(--font-body);
        text-align: left;
      }

      /* ---- 来自 settings.html 的页面专属规则 ---- */
      .sr-only{
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0,0,0,0); white-space: nowrap; border: 0;
      }
      .settings-layout{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--s-5);
        padding: var(--s-6) var(--content-px);
      }
      .settings-stack{
        width: 100%;
        max-width: 640px;
        display: flex;
        flex-direction: column;
        gap: var(--s-5);
      }
      .settings-section{
        padding: var(--s-5) var(--s-5) var(--s-3);
        background: var(--glass-bg);
        border: 1px solid var(--clr-edge);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-1);
        animation: settings-enter 420ms var(--ease-out-expo) both;
      }
      .settings-section.danger-zone{
        border-left: 3px solid rgba(229, 72, 77, 0.4);
      }
      @keyframes settings-enter {
        from{ opacity: 0; transform: translateY(8px); }
        to{ opacity: 1; transform: translateY(0); }
      }
      .section-title{
        margin: 0 0 var(--s-2);
      }
      .setting-row{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-4);
        min-height: 52px;
        padding: var(--s-3) var(--s-1);
        border-bottom: 1px solid var(--clr-line);
      }
      .setting-row:last-child{ border-bottom: none; }
      .setting-label{
        margin: 0;
        color: var(--clr-ink);
      }
      .setting-value{
        font-family: var(--font-body);
        font-size: 14px;
        color: var(--clr-ink);
        text-align: right;
      }
      .setting-value.muted{ color: var(--clr-ink-2); }
      .profile-avatar{
        width: 40px;
        height: 40px;
        border-radius: var(--r-pill);
        background: rgba(124, 111, 232, 0.18);
        color: var(--clr-brand);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
      }
      .pill-btn{
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        height: var(--control-h-md);
        padding: 0 var(--s-3);
        background: var(--clr-fill-subtle);
        border: 1px solid var(--clr-line);
        border-radius: var(--r-pill);
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 500;
        color: var(--clr-ink);
        cursor: pointer;
        transition: background-color var(--duration-fast) var(--ease-out-expo),
                    border-color var(--duration-fast) var(--ease-out-expo),
                    transform var(--duration-fast) var(--ease-out-expo);
      }
      .pill-btn:hover{
        background: var(--clr-fill-strong);
        border-color: rgba(124, 111, 232, 0.35);
        transform: translateY(-1px);
      }
      .pill-btn:focus-visible{
        outline: 2px solid var(--clr-brand);
        outline-offset: 2px;
      }
      .pill-btn .pill-chevron{
        display: inline-flex;
        color: var(--clr-ink-3);
      }
      .toggle-switch{
        position: relative;
        width: 44px;
        height: 24px;
        border: none;
        border-radius: var(--r-pill);
        background: var(--clr-line);
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        transition: background-color 200ms var(--ease-out-expo);
      }
      .toggle-switch[aria-checked="true"]{
        background: var(--clr-brand);
        animation: toggle-bounce 300ms var(--ease-spring);
      }
      @keyframes toggle-bounce {
        0%{ transform: scale(1); }
        50%{ transform: scale(1.05); }
        100%{ transform: scale(1); }
      }
      .toggle-switch .toggle-knob{
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        border-radius: var(--r-pill);
        background: #FFFFFF;
        box-shadow: 0 1px 3px rgba(28, 25, 60, 0.25);
        transition: transform 200ms var(--ease-out-expo);
      }
      .toggle-switch[aria-checked="true"] .toggle-knob{
        transform: translateX(20px);
      }
      .toggle-switch:focus-visible{
        outline: 2px solid var(--clr-brand);
        outline-offset: 2px;
      }
      .btn-danger-text{
        background: transparent;
        border: none;
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 600;
        color: var(--state-error);
        cursor: pointer;
        padding: var(--s-2) var(--s-2);
        border-radius: var(--r-sm);
        transition: background-color var(--duration-fast) var(--ease-out-expo),
                    transform var(--duration-fast) var(--ease-out-expo);
      }
      .btn-danger-text:hover{
        background: var(--state-error-bg);
        transform: translateY(-1px);
      }
      .btn-danger-text:focus-visible{
        outline: 2px solid var(--state-error);
        outline-offset: 2px;
      }