:root {
        --bg: #f6f7f9;
        --top: #f2f4f7;
        --panel: #ffffff;
        --soft: #f9fafb;
        --hover: #f2f4f7;
        --line: #eaecf0;
        --line-2: #d0d5dd;
        --text: #101828;
        --text-2: #344054;
        --muted: #667085;
        --weak: #98a2b3;
        --blue: #155eef;
        --blue-2: #2970ff;
        --blue-soft: #eff4ff;
        --violet: #7a5af8;
        --green: #079455;
        --green-soft: #ecfdf3;
        --orange: #dc6803;
        --orange-soft: #fffaeb;
        --red: #d92d20;
        --red-soft: #fef3f2;
        --shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
        --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23344054' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
      }

      * { box-sizing: border-box; }
      html, body, #app { height: 100%; }
      body {
        margin: 0;
        min-width: 1180px;
        background: var(--bg);
        color: var(--text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", "Microsoft YaHei", sans-serif;
        letter-spacing: 0;
      }
      body.login-page { min-width: 0; }
      button, input, textarea, select { font: inherit; }
      button {
        align-items: center;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 13px;
        font-weight: 700;
        gap: 6px;
        justify-content: center;
        min-height: 30px;
        padding: 0 11px;
        transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
        white-space: nowrap;
      }
      button:disabled { cursor: not-allowed; opacity: .55; }
      input, textarea, select {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        color: var(--text);
        outline: none;
        font-size: 13px;
        padding: 8px 10px;
      }
      select {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background-image: var(--select-arrow);
        background-position: right 14px center;
        background-repeat: no-repeat;
        background-size: 16px 16px;
        padding-right: 38px;
      }
      select::-ms-expand { display: none; }
      input:focus, textarea:focus, select:focus {
        border-color: var(--blue-2);
        box-shadow: 0 0 0 3px rgba(41, 112, 255, .14);
      }
      textarea {
        line-height: 1.6;
        min-height: 120px;
        resize: vertical;
      }
      label {
        color: var(--text-2);
        display: block;
        font-size: 12px;
        font-weight: 800;
        margin: 0 0 6px;
      }
      .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 18px rgba(21,94,239,.18); }
      .btn-primary:hover { background: #004eeb; }
      .btn-secondary { background: #fff; border: 1px solid var(--line); color: var(--text-2); }
      .btn-secondary:hover { background: var(--soft); border-color: var(--line-2); }
      .btn-ghost { background: transparent; color: var(--muted); }
      .btn-ghost:hover { background: var(--hover); color: var(--text-2); }
      .btn-danger { background: var(--red-soft); color: var(--red); }
      .icon {
        align-items: center;
        color: currentColor;
        display: inline-flex;
        flex: 0 0 auto;
        height: 16px;
        justify-content: center;
        line-height: 0;
        width: 16px;
      }
      .icon svg { display: block; height: 100%; width: 100%; }
      .nav-icon { height: 16px; width: 16px; }
      .tab-icon, .action-icon { height: 14px; width: 14px; }
      .icon-only { height: 16px; width: 16px; }
      .card-more { color: var(--weak); height: 16px; width: 16px; }
      .type-icon { height: 18px; width: 18px; }
      .send-icon { height: 16px; width: 16px; }
      .btn-icon {
        min-height: 30px;
        padding: 0;
        width: 30px;
      }

      .login {
        align-items: center;
        background:
          linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
          radial-gradient(circle at 18% 22%, rgba(21,94,239,.28), transparent 34%),
          radial-gradient(circle at 78% 70%, rgba(18,183,106,.16), transparent 30%),
          linear-gradient(135deg, #08111f 0%, #101b2f 52%, #0c1728 100%);
        background-size: 40px 40px, 40px 40px, auto, auto, auto;
        color: #edf6ff;
        display: flex;
        justify-content: center;
        min-height: 100%;
        overflow: auto;
        padding: 42px;
        position: relative;
      }
      .login::before,
      .login::after {
        content: "";
        pointer-events: none;
        position: absolute;
      }
      .login::before {
        background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .28), transparent);
        height: 1px;
        left: 8%;
        right: 8%;
        top: 24%;
      }
      .login::after {
        border: 1px solid rgba(148, 163, 184, .14);
        height: 360px;
        right: 9%;
        top: 18%;
        transform: skewX(-14deg);
        width: 180px;
      }
      .login-shell {
        background: rgba(8, 17, 31, .72);
        border: 1px solid rgba(186, 230, 253, .18);
        border-radius: 8px;
        box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
        display: grid;
        grid-template-columns: minmax(0, 1fr) 430px;
        max-width: 1040px;
        overflow: hidden;
        position: relative;
        width: 100%;
        z-index: 1;
      }
      .login-shell::before {
        background: linear-gradient(90deg, #155eef, #12b76a);
        content: "";
        height: 3px;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
      }
      .login-hero {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 0;
        padding: 42px;
      }
      .login h1 {
        color: #fff;
        font-size: 42px;
        font-weight: 900;
        line-height: 1.12;
        margin: 0 0 16px;
        max-width: 520px;
      }
      .login p {
        color: #aabed4;
        font-size: 15px;
        line-height: 1.75;
        margin: 0;
        max-width: 520px;
      }
      .login-card {
        align-self: stretch;
        background: #fff;
        border: 0;
        border-left: 1px solid rgba(186, 230, 253, .16);
        border-radius: 0;
        box-shadow: none;
        color: var(--text);
      }
      .login-card-inner { padding: 44px 38px; }
      .login-card-head {
        display: block;
        margin-bottom: 28px;
        text-align: center;
      }
      .login-card-head h2 {
        font-size: 26px;
        line-height: 1.2;
        margin: 0 0 8px;
      }
      .login-card-head .muted {
        margin: 0 auto;
        max-width: 320px;
      }
      .login-field { margin-top: 16px; }
      .login-field input {
        background: #f8fbff;
        border-color: #d6e3f4;
        font-size: 14px;
        min-height: 46px;
        padding: 11px 12px;
      }
      .login-field input:focus { background: #fff; }
      .login-submit {
        font-size: 14px;
        height: 46px;
        margin-top: 22px;
        width: 100%;
      }
      .login-error {
        background: var(--red-soft);
        border: 1px solid #fecdca;
        border-radius: 8px;
        color: var(--red);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.5;
        margin: 0 0 16px;
        padding: 10px 12px;
      }
      .captcha-row {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) 128px;
      }
      .captcha-image-button {
        background: #fff;
        border-color: #d6e3f4;
        height: 46px;
        overflow: hidden;
        padding: 0;
      }
      .captcha-image {
        display: block;
        height: 46px;
        width: 128px;
      }
      .brand {
        align-items: center;
        color: #f8fbff;
        display: flex;
        gap: 12px;
        margin-bottom: 58px;
      }
      .logo {
        align-items: center;
        background: linear-gradient(135deg, #155eef, #0ea5e9);
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 8px;
        box-shadow: 0 12px 30px rgba(21,94,239,.24);
        color: #fff;
        display: inline-flex;
        font-weight: 900;
        height: 36px;
        justify-content: center;
        width: 36px;
      }
      .login-kicker {
        align-items: center;
        color: #7dd3fc;
        display: inline-flex;
        font-size: 12px;
        font-weight: 900;
        gap: 8px;
        margin-bottom: 18px;
      }
      .login-kicker::before {
        background: #7dd3fc;
        content: "";
        height: 2px;
        width: 36px;
      }
      .login-copy { margin-bottom: 28px; }
      .login-meta {
        align-items: center;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 28px;
      }
      .login-meta span {
        align-items: center;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(186,230,253,.16);
        border-radius: 999px;
        color: #d9e8f7;
        display: flex;
        font-size: 12px;
        font-weight: 800;
        min-height: 30px;
        padding: 0 11px;
      }
      .login-footnote {
        color: #7f94ac;
        font-size: 12px;
        line-height: 1.7;
        margin-top: 44px;
      }
      .login-footnote strong {
        color: #d9e8f7;
        display: block;
        margin-bottom: 6px;
      }

      .topbar {
        align-items: center;
        background: #f5f6f8;
        border-bottom: 1px solid var(--line);
        display: grid;
        grid-template-columns: minmax(360px, 1fr) auto minmax(360px, 1fr);
        height: 56px;
        padding: 0 14px 0 18px;
      }
      .top-left, .top-right { align-items: center; display: flex; }
      .top-left { gap: 10px; min-width: 0; }
      .top-right { gap: 8px; justify-content: flex-end; position: relative; }
      .workspace-switch {
        background: transparent;
        color: var(--text-2);
        font-size: 14px;
        font-weight: 850;
        min-height: 34px;
        padding: 0;
      }
      .workspace-switch:hover { background: transparent; color: var(--text); }
      .workspace-name {
        color: var(--text-2);
        font-size: 14px;
        font-weight: 800;
      }
      .platform-mark {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--text-2);
        display: inline-flex;
        font-size: 13px;
        font-weight: 850;
        min-height: 30px;
        padding: 0 10px;
      }
      .top-nav { align-items: center; display: flex; justify-content: center; gap: 6px; }
      .top-nav > button,
      .top-nav-group > button {
        border-radius: 13px;
        color: var(--text-2);
        font-size: 14px;
        min-height: 36px;
        padding: 0 18px;
      }
      .top-nav-group {
        align-items: center;
        display: inline-flex;
        position: relative;
      }
      .top-nav-group > button {
        align-items: center;
        display: inline-flex;
        gap: 6px;
      }
      .nav-caret {
        align-items: center;
        color: var(--weak);
        display: inline-flex;
        height: 14px;
        justify-content: center;
        margin-left: 2px;
        transition: transform .16s ease;
        width: 14px;
      }
      .nav-caret svg {
        display: block;
        height: 14px;
        width: 14px;
      }
      .top-nav-group > button[aria-expanded="true"] .nav-caret {
        transform: rotate(180deg);
      }
      .top-nav-menu {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 18px 40px rgba(16, 24, 40, .14);
        display: flex;
        flex-direction: column;
        gap: 4px;
        left: 50%;
        min-width: 172px;
        padding: 6px;
        position: absolute;
        top: calc(100% + 8px);
        transform: translateX(-50%);
        z-index: 30;
      }
      .top-nav-menu button {
        align-items: center;
        background: transparent;
        border-radius: 8px;
        box-shadow: none;
        color: var(--text-2);
        display: flex;
        font-size: 14px;
        gap: 8px;
        justify-content: flex-start;
        min-height: 34px;
        padding: 0 10px;
        text-align: left;
        width: 100%;
      }
      .top-nav-menu button:hover {
        background: #f5f8ff;
        color: var(--blue);
      }
      .top-nav > .active,
      .top-nav-group > .active {
        background: #fff;
        color: var(--blue);
        box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
      }
      .top-nav-menu .active {
        background: #eef4ff;
        box-shadow: none;
      }
      .avatar {
        align-items: center;
        background: var(--blue);
        border-radius: 50%;
        color: #fff;
        display: inline-flex;
        font-weight: 900;
        height: 38px;
        justify-content: center;
        width: 38px;
      }
      .avatar-button {
        background: transparent;
        border-radius: 999px;
        min-height: 42px;
        padding: 0;
        width: 42px;
      }
      .avatar-button:hover { background: rgba(21, 94, 239, .08); }
      .profile-menu {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: 0 18px 48px rgba(16, 24, 40, .18);
        overflow: hidden;
        padding: 14px 0 10px;
        position: absolute;
        right: 0;
        top: 48px;
        width: 330px;
        z-index: 80;
      }
      .profile-head {
        align-items: center;
        display: flex;
        gap: 12px;
        padding: 2px 18px 14px;
      }
      .profile-head .avatar { height: 52px; width: 52px; }
      .profile-head strong {
        color: var(--text);
        display: block;
        font-size: 16px;
        margin-bottom: 2px;
      }
      .profile-head span { color: var(--muted); font-size: 13px; }
      .profile-sep {
        background: var(--line);
        height: 1px;
        margin: 0 0 8px;
      }
      .profile-row {
        align-items: center;
        background: #fff;
        border-radius: 0;
        color: var(--text-2);
        display: grid;
        font-size: 15px;
        font-weight: 750;
        gap: 12px;
        grid-template-columns: 22px 1fr auto;
        justify-content: stretch;
        min-height: 46px;
        padding: 0 20px;
        text-align: left;
        width: 100%;
      }
      .profile-row:hover { background: var(--soft); color: var(--text); }
      .profile-row .icon { color: var(--muted); height: 19px; width: 19px; }
      .profile-row .arrow { color: var(--weak); font-size: 18px; }
      .profile-theme {
        align-items: center;
        background: var(--soft);
        border-radius: 14px;
        display: flex;
        gap: 4px;
        justify-content: flex-end;
        padding: 4px;
      }
      .theme-chip {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--blue);
        display: inline-flex;
        height: 32px;
        justify-content: center;
        width: 44px;
      }

      .page { height: calc(100% - 56px); overflow: hidden; }
      .studio {
        height: 100%;
        overflow: auto;
        padding: 22px 42px 26px;
      }
      .models-page {
        height: 100%;
        overflow: auto;
        padding: 22px 42px 26px;
      }
      .usage-ranking-page {
        height: 100%;
        overflow: auto;
        padding: 22px 42px 34px;
      }
      .usage-ranking-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        overflow: hidden;
      }
      .usage-ranking-head {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 12px;
        grid-template-columns: 54px minmax(220px, 300px) minmax(560px, 1fr);
        padding: 12px 18px;
      }
      .usage-ranking-head span {
        color: var(--weak);
        font-size: 12px;
        font-weight: 850;
      }
      .usage-ranking-list {
        display: grid;
      }
      .usage-ranking-row {
        align-items: center;
        display: grid;
        gap: 12px;
        grid-template-columns: 54px minmax(220px, 300px) minmax(560px, 1fr);
        min-height: 96px;
        padding: 14px 18px;
      }
      .usage-ranking-row + .usage-ranking-row { border-top: 1px solid var(--line); }
      .rank-index {
        align-items: center;
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 11px;
        color: var(--text-2);
        display: inline-flex;
        font-size: 14px;
        font-weight: 900;
        height: 36px;
        justify-content: center;
        width: 36px;
      }
      .usage-ranking-row:nth-child(1) .rank-index {
        background: #fff7ed;
        border-color: #fedf89;
        color: #b54708;
      }
      .usage-ranking-row:nth-child(2) .rank-index {
        background: #f8fafc;
        border-color: #d0d5dd;
        color: #475467;
      }
      .usage-ranking-row:nth-child(3) .rank-index {
        background: #fffaeb;
        border-color: #fedf89;
        color: #93370d;
      }
      .usage-employee {
        align-items: center;
        display: flex;
        gap: 12px;
        min-width: 0;
      }
      .usage-employee .app-icon {
        border-radius: 12px;
        flex: 0 0 auto;
        height: 48px;
        width: 48px;
      }
      .usage-employee-main {
        min-width: 0;
        max-width: 300px;
      }
      .usage-employee-main strong {
        color: var(--text);
        display: block;
        font-size: 14px;
        line-height: 1.35;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .usage-employee-main p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
        margin: 3px 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .usage-tags {
        align-items: center;
        display: flex;
        gap: 6px;
        margin-top: 6px;
        min-width: 0;
        overflow: hidden;
      }
      .usage-bar-wrap {
        display: grid;
        gap: 8px;
      }
      .usage-bar-line {
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: 44px minmax(0, 1fr) 300px;
      }
      .usage-bar-label {
        color: var(--muted);
        font-size: 11px;
        font-weight: 850;
        text-align: right;
      }
      .usage-bar-track {
        background: linear-gradient(180deg, #f5f7fb, #e9eef6);
        border: 1px solid #e4eaf2;
        border-radius: 999px;
        box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.08);
        height: 14px;
        overflow: hidden;
        width: 100%;
      }
      .usage-bar-fill {
        background: linear-gradient(90deg, #2563eb, var(--usage-bar-end, #12b76a));
        border-radius: inherit;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 4px 10px rgba(37, 99, 235, 0.14);
        height: 100%;
      }
      .usage-bar-fill.token {
        background: linear-gradient(90deg, #0ea5e9, #14b8a6);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 4px 10px rgba(20, 184, 166, 0.12);
      }
      .usage-bar-metric {
        align-items: baseline;
        color: var(--text);
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        min-width: 0;
        text-align: left;
        white-space: nowrap;
      }
      .usage-bar-metric strong {
        color: var(--text);
        font-size: 14px;
        font-weight: 900;
      }
      .usage-bar-metric.call strong {
        font-size: 16px;
      }
      .usage-bar-metric span {
        color: var(--muted);
        font-size: 11px;
        font-weight: 750;
        line-height: 1.35;
      }
      .usage-empty {
        align-items: center;
        color: var(--muted);
        display: flex;
        font-weight: 800;
        justify-content: center;
        min-height: 300px;
      }
      .usage-hourly-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        margin-top: 18px;
        padding: 18px 20px 22px;
      }
      .usage-hourly-card + .usage-hourly-card { margin-top: 24px; }
      .usage-hourly-head {
        align-items: flex-start;
        display: flex;
        gap: 16px;
        justify-content: space-between;
        margin-bottom: 14px;
      }
      .usage-hourly-head h2 {
        color: var(--text);
        font-size: 18px;
        line-height: 1.2;
        margin: 0 0 5px;
      }
      .usage-hourly-chart {
        display: grid;
        gap: 10px;
        grid-template-columns: 44px minmax(0, 1fr);
      }
      .usage-hourly-yaxis {
        color: var(--weak);
        display: grid;
        font-size: 11px;
        font-weight: 800;
        grid-template-rows: repeat(3, 1fr);
        height: 260px;
        padding: 0 0 19px;
        text-align: right;
      }
      .usage-hourly-plot {
        background:
          linear-gradient(to bottom, rgba(148, 163, 184, 0.2) 1px, transparent 1px) 0 0 / 100% 33.333%,
          linear-gradient(#f8fafc, #ffffff);
        border: 1px solid #edf1f7;
        border-radius: 12px;
        display: grid;
        gap: 4px;
        grid-template-columns: repeat(24, minmax(0, 1fr));
        height: 260px;
        padding: 10px 10px 28px;
      }
      .usage-hourly-column {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        position: relative;
      }
      .usage-hourly-stack {
        align-items: stretch;
        background: rgba(226, 232, 240, 0.62);
        border-radius: 7px 7px 3px 3px;
        display: flex;
        flex: 1;
        flex-direction: column-reverse;
        justify-content: flex-start;
        min-height: 0;
        overflow: hidden;
      }
      .usage-hourly-stack.empty {
        background: repeating-linear-gradient(
          -45deg,
          #f1f5f9,
          #f1f5f9 5px,
          #e9eef6 5px,
          #e9eef6 10px
        );
        flex: 0 0 4px;
        height: 4px;
        margin-top: auto;
        min-height: 4px;
      }
      .usage-hourly-segment {
        min-height: 1px;
      }
      .usage-hourly-hour {
        color: var(--weak);
        font-size: 10px;
        font-weight: 800;
        height: 13px;
        line-height: 13px;
        text-align: center;
      }
      .usage-daily-plot {
        grid-template-columns: repeat(30, minmax(0, 1fr));
        height: 300px;
      }
      .usage-daily-column {
        gap: 7px;
      }
      .usage-daily-bar-space {
        align-items: flex-end;
        display: flex;
        flex: 1;
        min-height: 0;
        width: 100%;
      }
      .usage-daily-stack {
        background: transparent;
        border-radius: 7px 7px 3px 3px;
        flex: 0 0 auto;
        min-height: 0;
        width: 100%;
      }
      .usage-daily-stack.empty {
        background: repeating-linear-gradient(
          -45deg,
          #f1f5f9,
          #f1f5f9 5px,
          #e9eef6 5px,
          #e9eef6 10px
        );
        height: 4px !important;
        min-height: 4px;
        opacity: 0.72;
      }
      .usage-daily-empty-bar {
        background: repeating-linear-gradient(
          -45deg,
          #f1f5f9,
          #f1f5f9 5px,
          #e9eef6 5px,
          #e9eef6 10px
        );
        border-radius: 7px 7px 3px 3px;
        flex: 0 0 auto;
        height: 4px;
        opacity: 0.72;
        width: 100%;
      }
      .usage-daily-label {
        height: 16px;
        line-height: 1.15;
      }
      .usage-hourly-tooltip {
        bottom: 24px;
        display: none;
        filter: drop-shadow(0 18px 32px rgba(15, 23, 42, 0.16));
        left: 50%;
        min-width: 278px;
        pointer-events: none;
        position: absolute;
        transform: translateX(-50%);
        width: max-content;
        z-index: 30;
      }
      .usage-hourly-column:hover .usage-hourly-tooltip,
      .usage-hourly-column.is-hovered .usage-hourly-tooltip {
        display: block;
      }
      .usage-hourly-column:nth-child(-n+3) .usage-hourly-tooltip {
        left: -4px;
        transform: none;
      }
      .usage-hourly-column:nth-last-child(-n+3) .usage-hourly-tooltip {
        left: auto;
        right: -4px;
        transform: none;
      }
      .usage-hourly-tooltip-time {
        background: #111827;
        border-radius: 8px;
        color: #fff;
        display: inline-flex;
        font-size: 13px;
        font-weight: 850;
        line-height: 1;
        margin: 0 0 8px;
        padding: 8px 10px;
      }
      .usage-hourly-tooltip-panel {
        background: #fff;
        border: 1px solid #e4e7ec;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
        color: var(--text);
        overflow: hidden;
      }
      .usage-hourly-tooltip-row,
      .usage-hourly-tooltip-total {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: 7px minmax(150px, 1fr) auto;
        padding: 8px 10px;
      }
      .usage-hourly-tooltip-row i {
        border-radius: 999px;
        height: 18px;
        width: 5px;
      }
      .usage-hourly-tooltip-name {
        font-size: 12px;
        font-weight: 750;
        line-height: 1.35;
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .usage-hourly-tooltip-count {
        color: #111827;
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
      }
      .usage-hourly-tooltip-empty {
        color: var(--muted);
        font-size: 12px;
        font-weight: 750;
        padding: 12px 14px;
      }
      .usage-hourly-tooltip-total {
        border-top: 1px solid #eef2f7;
        grid-template-columns: minmax(150px, 1fr) auto;
        margin-top: 2px;
        padding: 10px 12px;
      }
      .usage-hourly-tooltip-total span {
        color: var(--text-2);
        font-size: 12px;
        font-weight: 750;
      }
      .dataset-page {
        --kb-text-2xs: 10px;
        --kb-text-xs: 12px;
        --kb-text-sm: 13px;
        --kb-text-md: 14px;
        --kb-title: 16px;
        background: #fff;
        height: 100%;
        overflow: hidden;
      }
      .dataset-list-page {
        background: #f3f5f9;
      }
      .dataset-head {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: grid;
        grid-template-columns: 260px 1fr 260px;
        height: 64px;
        padding: 0 24px;
      }
      .dataset-back {
        background: transparent;
        color: var(--text);
        font-size: var(--kb-text-md);
        font-weight: 600;
        justify-content: flex-start;
        padding: 0;
      }
      .dataset-steps {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: center;
      }
      .dataset-step {
        align-items: center;
        color: var(--weak);
        display: inline-flex;
        font-size: var(--kb-text-sm);
        font-weight: 600;
        gap: 8px;
      }
      .dataset-step .step-index {
        align-items: center;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        display: inline-flex;
        height: 26px;
        justify-content: center;
        min-width: 26px;
        padding: 0 8px;
      }
      .dataset-step.active { color: var(--blue); }
      .dataset-step.active .step-index {
        background: var(--blue-2);
        border-color: var(--blue-2);
        color: #fff;
      }
      .dataset-step.done { color: var(--text-2); }
      .dataset-step-line { background: var(--line); height: 1px; width: 42px; }
      .dataset-main {
        height: calc(100% - 64px);
        overflow: auto;
        padding: 54px 72px 40px;
      }
      .dataset-list-main {
        background: #f3f5f9;
        height: 100%;
        padding: 0 42px 44px;
      }
      .dataset-main h2 {
        color: var(--text-2);
        font-size: var(--kb-title);
        margin: 0 0 18px;
      }
      .dataset-list-shell {
        display: flex;
        flex-direction: column;
        min-height: 100%;
      }
      .dataset-list-toolbar {
        align-items: center;
        background: linear-gradient(180deg, #f3f5f9 0%, rgba(243,245,249,.96) 100%);
        display: flex;
        justify-content: flex-end;
        padding: 14px 0 16px;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      .dataset-list-toolbar-inner {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
      }
      .dataset-list-body {
        min-width: 0;
      }
      .dataset-create-panel {
        background: #e9edf5;
        border: 1px solid #e1e6ef;
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        min-height: 132px;
        overflow: hidden;
      }
      .dataset-create-group {
        align-items: center;
        display: flex;
        flex: 1 1 0;
        gap: 10px;
        padding: 0 36px;
      }
      .dataset-create-group.bottom {
        border-top: 1px solid #dde3ed;
      }
      .dataset-create-option {
        background: transparent;
        color: var(--muted);
        font-size: var(--kb-text-sm);
        font-weight: 500;
        gap: 12px;
        justify-content: flex-start;
        min-height: 34px;
        padding: 0;
      }
      .dataset-create-group:first-child .dataset-create-option {
        color: var(--blue);
      }
      .dataset-create-option:hover {
        background: transparent;
        color: var(--blue);
      }
      .dataset-create-option .icon {
        height: 16px;
        width: 16px;
      }
      .dataset-card-grid {
        align-items: stretch;
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        min-width: 0;
      }
      .dataset-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(16,24,40,.06);
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: 210px;
        padding: 20px;
      }
      .dataset-card-head {
        align-items: flex-start;
        display: grid;
        gap: 14px;
        grid-template-columns: 46px minmax(0, 1fr) auto;
        min-width: 0;
      }
      .dataset-card-icon {
        align-items: center;
        background: #fff6ed;
        border: 1px solid #fedf89;
        border-radius: 12px;
        color: var(--orange);
        display: inline-flex;
        height: 46px;
        justify-content: center;
        position: relative;
        width: 46px;
      }
      .dataset-card-icon .icon {
        height: 22px;
        width: 22px;
      }
      .dataset-card-icon-badge {
        align-items: center;
        background: #6172f3;
        border: 2px solid #fff;
        border-radius: 7px;
        bottom: -5px;
        color: #fff;
        display: inline-flex;
        height: 18px;
        justify-content: center;
        position: absolute;
        right: -5px;
        width: 18px;
      }
      .dataset-card-icon-badge .icon {
        height: 11px;
        width: 11px;
      }
      .dataset-card-main {
        min-width: 0;
        overflow: visible;
      }
      .dataset-card-title-row {
        display: block;
        min-width: 0;
      }
      .dataset-card-title-button {
        background: transparent;
        color: var(--text-2);
        display: inline-block;
        font-size: var(--kb-text-md);
        font-weight: 600;
        justify-content: flex-start;
        line-height: 20px;
        max-width: 100%;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
        padding: 0;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dataset-card-title-button:hover {
        background: transparent;
        color: var(--blue);
      }
      .dataset-card-status {
        align-self: start;
        display: inline-flex;
        justify-content: flex-end;
      }
      .dataset-card-status .badge {
        min-height: 30px;
        min-width: 58px;
        padding: 0 10px;
        justify-content: center;
      }
      .dataset-card-owner {
        color: var(--muted);
        font-size: var(--kb-text-2xs);
        font-weight: 500;
        line-height: 1.5;
        margin-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dataset-card-meta {
        align-items: center;
        color: var(--muted);
        display: flex;
        flex-wrap: nowrap;
        font-size: var(--kb-text-xs);
        font-weight: 500;
        gap: 6px 10px;
        margin-top: 7px;
      }
      .dataset-card-meta span {
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 7px;
        color: var(--muted);
        line-height: 22px;
        padding: 0 8px;
        white-space: nowrap;
      }
      .dataset-card-desc {
        color: var(--muted);
        display: -webkit-box;
        font-size: var(--kb-text-xs);
        font-weight: 400;
        line-height: 1.55;
        min-height: 40px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .dataset-card-footer {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        margin-top: auto;
        min-height: 30px;
        min-width: 0;
      }
      .dataset-card-counts {
        align-items: center;
        color: var(--muted);
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        font-size: var(--kb-text-xs);
        font-weight: 500;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
      }
      .dataset-card-counts span {
        align-items: center;
        display: inline-flex;
        flex: 0 0 auto;
        gap: 4px;
        min-width: 0;
        white-space: nowrap;
      }
      .dataset-card-counts span:last-child {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dataset-card-counts .icon {
        color: var(--weak);
        height: 13px;
        width: 13px;
      }
      .dataset-card-actions {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: flex-end;
      }
      .dataset-card-actions button {
        font-size: 12px;
        min-height: 28px;
        padding: 0 8px;
        white-space: nowrap;
      }
      .dataset-card-actions .btn-danger {
        border: 1px solid #fee4e2;
      }
      .dataset-empty-card {
        background: #fff;
        border: 1px dashed var(--line-2);
        border-radius: 14px;
        color: var(--muted);
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 196px;
        padding: 22px;
      }
      .dataset-empty-card h3 {
        color: var(--text-2);
        font-size: var(--kb-text-md);
        margin: 0 0 8px;
      }
      .dataset-empty-card p {
        font-size: var(--kb-text-sm);
        font-weight: 400;
        line-height: 1.6;
        margin: 0;
      }
      .source-cards {
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(3, minmax(210px, 280px));
        margin-bottom: 48px;
      }
      .source-card {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--text-2);
        display: flex;
        gap: 12px;
        min-height: 76px;
        padding: 0 18px;
      }
      .source-card.active {
        border: 2px solid var(--blue-2);
        box-shadow: 0 0 0 3px rgba(41,112,255,.08);
      }
      .source-card.disabled { color: var(--muted); opacity: .68; }
      .source-icon {
        align-items: center;
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--blue);
        display: inline-flex;
        height: 40px;
        justify-content: center;
        width: 40px;
      }
      .source-card strong { font-size: var(--kb-text-sm); }
      .dataset-name-field {
        display: grid;
        gap: 8px;
        margin-bottom: 34px;
        max-width: 720px;
      }
      .dataset-name-field input {
        font-size: var(--kb-text-sm);
        font-weight: 600;
        height: 48px;
      }
      .dataset-upload {
        background: #fbfcff;
        border: 1px dashed var(--line-2);
        border-radius: 13px;
        color: var(--muted);
        max-width: 720px;
        min-height: 104px;
        padding: 22px 26px;
      }
      .dataset-background-task-notice {
        align-items: flex-start;
        background: #fff8e8;
        border: 1px solid #f3d38b;
        border-radius: 8px;
        color: #755100;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        gap: 3px;
        margin-bottom: 12px;
        max-width: 720px;
        padding: 10px 12px;
      }
      .dataset-background-task-notice strong {
        color: #5f4300;
        font-size: 13px;
      }
      .dataset-document-summary-config {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 14px;
        margin-top: 16px;
        max-width: 720px;
        padding: 16px 18px;
      }
      .dataset-document-summary-row {
        align-items: center;
        display: flex;
        gap: 18px;
        justify-content: space-between;
      }
      .dataset-document-summary-row strong {
        color: var(--text-2);
        display: block;
        font-size: 13px;
        margin-bottom: 4px;
      }
      .dataset-document-summary-config > label {
        margin-bottom: -6px;
      }
      .dataset-document-summary-config textarea {
        min-height: 104px;
      }
      .dataset-inline-settings-content .dataset-document-summary-config {
        margin-top: 0;
        max-width: none;
      }
      .dataset-binary-choice {
        align-items: center;
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        display: inline-flex;
        flex: 0 0 auto;
        padding: 3px;
      }
      .dataset-binary-choice button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 6px;
        color: var(--muted);
        cursor: pointer;
        display: inline-flex;
        font-size: 12px;
        font-weight: 700;
        justify-content: center;
        margin: 0;
        min-height: 30px;
        min-width: 48px;
        padding: 0 12px;
      }
      .dataset-binary-choice button.active {
        background: #fff;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
        color: var(--blue);
      }
      .dataset-upload-top {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        font-size: var(--kb-text-sm);
        font-weight: 600;
        gap: 8px;
        line-height: 1.35;
        margin-bottom: 8px;
      }
      .file-button {
        align-items: center;
        color: var(--blue);
        cursor: pointer;
        display: inline-flex;
        font-size: inherit;
        font-weight: 850;
        line-height: inherit;
        position: relative;
      }
      .dataset-upload-top .file-button {
        transform: translateY(1px);
      }
      .dataset-add-file-button {
        align-items: center;
        background: var(--blue);
        border: 1px solid var(--blue);
        border-radius: 9px;
        box-shadow: 0 8px 18px rgba(21,94,239,.18);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        font-size: 13px;
        gap: 6px;
        height: 36px;
        justify-content: center;
        margin: 0;
        padding: 0 12px;
        transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
        white-space: nowrap;
      }
      .dataset-add-file-button:hover {
        background: #004eeb;
        border-color: #004eeb;
        color: #fff;
      }
      .dataset-add-file-button:focus-within {
        border-color: var(--blue-2);
        box-shadow: 0 0 0 3px rgba(41, 112, 255, .14);
      }
      .file-button input {
        cursor: pointer;
        height: 100%;
        inset: 0;
        opacity: 0;
        position: absolute;
        width: 100%;
      }
      .dataset-file-name {
        background: var(--blue-soft);
        border-radius: 8px;
        color: var(--blue);
        display: inline-flex;
        font-size: 12px;
        font-weight: 850;
        margin-top: 10px;
        padding: 5px 8px;
      }
      .dataset-footer {
        align-items: center;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        margin-top: 56px;
        max-width: 720px;
        padding-top: 28px;
      }
      .dataset-existing-meta {
        align-items: center;
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        font-size: var(--kb-text-xs);
        font-weight: 500;
        gap: 8px;
      }
      .dataset-row-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
      }
      .dataset-detail-summary {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 12px;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: 16px;
        padding: 12px;
      }
      .dataset-detail-summary span {
        color: var(--muted);
        display: block;
        font-size: 12px;
        margin-bottom: 3px;
      }
      .dataset-detail-summary strong {
        color: var(--text-2);
        display: block;
        overflow-wrap: anywhere;
      }
      .dataset-chunk-list {
        display: grid;
        gap: 12px;
      }
      .dataset-chunk-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 14px;
      }
      .dataset-chunk-card-head {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .dataset-chunk-card h3 {
        color: var(--text-2);
        font-size: var(--kb-text-md);
        font-weight: 600;
        margin: 0;
      }
      .dataset-chunk-card .code {
        margin-top: 10px;
        max-height: 240px;
      }
      .dataset-media-toolbar {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 6px;
      }
      .dataset-media-list {
        border: 1px solid var(--line);
        border-radius: 10px;
        display: grid;
        margin-top: 10px;
        overflow: hidden;
      }
      .dataset-media-empty {
        color: var(--weak);
        font-size: 12px;
        padding: 12px;
      }
      .dataset-media-row {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 8px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 10px;
      }
      .dataset-media-row:last-child { border-bottom: 0; }
      .dataset-media-badge {
        background: var(--blue-soft);
        border-radius: 999px;
        color: var(--blue);
        font-size: 11px;
        font-weight: 900;
        padding: 4px 7px;
      }
      .dataset-media-main {
        min-width: 0;
      }
      .dataset-media-main strong {
        color: var(--text-2);
        display: block;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dataset-media-main span {
        color: var(--muted);
        display: block;
        font-size: 12px;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dataset-media-actions {
        align-items: center;
        display: flex;
        gap: 6px;
      }
      .dataset-media-preview {
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text-2);
        display: inline-flex;
        font-size: 12px;
        font-weight: 850;
        height: 30px;
        padding: 0 10px;
        text-decoration: none;
        white-space: nowrap;
      }
      .dataset-media-preview:hover {
        background: var(--soft);
        color: var(--blue);
      }
      .dataset-media-remove {
        align-items: center;
        background: var(--blue-soft);
        border: 1px solid transparent;
        border-radius: 8px;
        color: var(--blue);
        display: inline-flex;
        height: 30px;
        justify-content: center;
        padding: 0;
        width: 30px;
      }
      .dataset-media-remove:hover {
        background: #dbe8ff;
        color: #004eeb;
      }
      .dataset-hit-form {
        display: grid;
        gap: 10px;
      }
      .dataset-hit-form textarea {
        min-height: 110px;
      }
      .dataset-hit-meta {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 12px;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 12px;
      }
      .dataset-hit-meta span {
        color: var(--muted);
        display: block;
        font-size: 12px;
        margin-bottom: 3px;
      }
      .dataset-hit-meta strong {
        color: var(--text-2);
        overflow-wrap: anywhere;
      }
      .dataset-hit-results {
        display: grid;
        gap: 12px;
      }
      .dataset-hit-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 14px;
      }
      .dataset-hit-card-head {
        align-items: flex-start;
        display: flex;
        gap: 10px;
        justify-content: space-between;
      }
      .dataset-hit-card h3 {
        color: var(--text-2);
        font-size: var(--kb-text-md);
        font-weight: 600;
        margin: 0 0 8px;
      }
      .dataset-hit-score {
        background: var(--blue-soft);
        border-radius: 999px;
        color: var(--blue);
        flex: 0 0 auto;
        font-size: var(--kb-text-xs);
        font-weight: 650;
        padding: 4px 8px;
      }
      .dataset-document-list {
        display: grid;
        gap: 10px;
        margin-bottom: 18px;
      }
      .dataset-document-row {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 12px;
      }
      .dataset-document-row strong {
        color: var(--text-2);
        display: block;
        font-size: var(--kb-text-md);
        font-weight: 600;
      }
      .dataset-file-list {
        display: grid;
        gap: 6px;
        margin-top: 10px;
      }
      .dataset-file-item {
        align-items: center;
        background: var(--blue-soft);
        border-radius: 8px;
        color: var(--blue);
        display: grid;
        font-size: var(--kb-text-xs);
        font-weight: 500;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 6px 8px;
      }
      .dataset-file-main {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dataset-file-actions {
        align-items: center;
        display: inline-flex;
        gap: 6px;
      }
      .dataset-file-type {
        align-items: center;
        background: #fff;
        border-radius: 6px;
        display: inline-flex;
        height: 22px;
        justify-content: center;
        min-width: 34px;
        padding: 0 6px;
      }
      .dataset-file-remove {
        align-items: center;
        background: transparent;
        border: 0;
        color: var(--blue);
        cursor: pointer;
        display: inline-flex;
        height: 24px;
        justify-content: center;
        padding: 0;
        width: 24px;
      }
      .dataset-file-remove:hover {
        background: rgba(41,112,255,.1);
        border-radius: 999px;
      }
      .dataset-edit-content {
        min-height: 180px;
        white-space: pre-wrap;
      }
      .dataset-preview-panel .dataset-edit-content,
      .dataset-document-settings-preview .dataset-edit-content {
        min-height: 150px;
      }
      .dataset-edit-fields {
        display: grid;
        gap: 10px;
      }
      .dataset-layout {
        display: grid;
        gap: 34px;
        grid-template-columns: minmax(650px, 760px) minmax(360px, 1fr);
      }
      .dataset-form-scroll { display: grid; gap: 16px; }
      .dataset-panel {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
      }
      .dataset-panel.help-overflow { overflow: visible; }
      .dataset-panel.active { border: 2px solid var(--blue-2); }
      .dataset-panel-head {
        align-items: center;
        background: linear-gradient(90deg, #f7f8ff 0%, #fff 62%);
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 12px;
        min-height: 72px;
        padding: 14px 18px;
      }
      .dataset-panel-head h3 {
        color: var(--text-2);
        font-size: var(--kb-text-md);
        margin: 0 0 2px;
      }
      .dataset-panel-body { padding: 18px; }
      .dataset-input-row {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 20px;
      }
      .number-affix {
        align-items: center;
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 10px;
        display: grid;
        grid-template-columns: 1fr auto;
        overflow: hidden;
      }
      .number-affix input { background: transparent; border: 0; box-shadow: none; }
      .number-affix span {
        border-left: 1px solid var(--line);
        color: var(--muted);
        font-size: var(--kb-text-xs);
        font-weight: 500;
        padding: 0 12px;
      }
      .dataset-option-list { display: grid; gap: 10px; }
      .dataset-option {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        cursor: pointer;
        display: flex;
        gap: 12px;
        min-height: 74px;
        padding: 15px;
      }
      .dataset-option.active { border: 2px solid var(--blue-2); box-shadow: 0 0 0 3px rgba(41,112,255,.07); }
      .dataset-option strong { color: var(--text-2); display: block; font-size: var(--kb-text-md); margin-bottom: 4px; }
      .dataset-option-title {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 4px;
      }
      .dataset-option-title strong {
        display: inline-flex;
        margin-bottom: 0;
      }
      .label-with-help {
        align-items: center;
        display: inline-flex;
        gap: 6px;
      }
      .help-tip {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        color: var(--muted);
        cursor: help;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 900;
        height: 18px;
        justify-content: center;
        line-height: 1;
        position: relative;
        width: 18px;
      }
      .help-tip:focus-visible {
        border-color: var(--blue-2);
        box-shadow: 0 0 0 3px rgba(41,112,255,.12);
        outline: none;
      }
      .help-tip::after {
        background: #111827;
        border-radius: 8px;
        bottom: calc(100% + 9px);
        box-shadow: 0 16px 36px rgba(15,23,42,.2);
        color: #fff;
        content: attr(data-tip);
        font-size: 12px;
        font-weight: 700;
        left: 50%;
        line-height: 1.55;
        max-width: min(340px, 72vw);
        opacity: 0;
        padding: 10px 12px;
        pointer-events: none;
        position: absolute;
        text-align: left;
        transform: translate(-50%, 4px);
        transition: opacity .14s ease, transform .14s ease;
        visibility: hidden;
        white-space: normal;
        width: max-content;
        z-index: 30;
      }
      .help-tip::before {
        border: 6px solid transparent;
        border-top-color: #111827;
        bottom: calc(100% - 2px);
        content: "";
        left: 50%;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transform: translate(-50%, 4px);
        transition: opacity .14s ease, transform .14s ease;
        visibility: hidden;
        z-index: 31;
      }
      .help-tip:hover::after,
      .help-tip:focus-visible::after,
      .help-tip:hover::before,
      .help-tip:focus-visible::before {
        opacity: 1;
        transform: translate(-50%, 0);
        visibility: visible;
      }
      .dataset-preview-panel {
        background: #fff;
        border-left: 1px solid var(--line);
        min-height: 640px;
        overflow: hidden;
      }
      .dataset-preview-card {
        border-bottom: 1px solid var(--line);
        min-height: 74px;
        padding: 18px 20px;
      }
      .preview-file-row { align-items: center; display: flex; gap: 10px; margin-top: 8px; }
      .file-chip {
        align-items: center;
        background: #ecfdf3;
        border-radius: 6px;
        color: var(--green);
        display: inline-flex;
        font-size: var(--kb-text-xs);
        font-weight: 650;
        height: 24px;
        justify-content: center;
        width: 24px;
      }
      .dataset-preview-empty {
        align-items: center;
        color: var(--weak);
        display: flex;
        font-size: var(--kb-text-sm);
        font-weight: 600;
        justify-content: center;
        min-height: 420px;
        text-align: center;
      }
      .retrieval-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr 1fr;
      }
      .retrieval-grid .dataset-option:nth-child(3) { grid-column: 1 / -1; }
      .range-row {
        align-items: center;
        display: grid;
        gap: 12px;
        grid-template-columns: 130px 1fr;
      }
      .range-row input[type="range"] { padding: 0; }
      .dataset-weight-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: 1fr 1fr;
      }
      .dataset-weight-control {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
      }
      .dataset-weight-control input[type="range"] { padding: 0; width: 100%; }
      .dataset-settings-grid {
        display: grid;
        gap: 16px;
      }
      .dataset-settings-section {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 18px;
      }
      .dataset-settings-section h3 {
        color: var(--text-2);
        font-size: var(--kb-text-md);
        margin: 0 0 14px;
      }
      .dataset-settings-modal .modal-body { max-height: calc(100vh - 178px); }
      .dataset-workspace {
        background: #f7f8fb;
        display: grid;
        grid-template-columns: 292px minmax(0, 1fr);
        height: 100%;
        overflow: hidden;
      }
      .dataset-workspace-sidebar {
        background: #fff;
        border-right: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 24px 16px 18px;
      }
      .dataset-workspace-back {
        background: transparent;
        color: var(--muted);
        flex: 0 0 auto;
        font-size: var(--kb-text-sm);
        font-weight: 600;
        justify-content: flex-start;
        margin-bottom: 20px;
        min-height: 32px;
        padding: 0 6px;
      }
      .dataset-workspace-back:hover { background: var(--soft); color: var(--text-2); }
      .dataset-workspace-brand {
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 12px;
        padding: 0 6px 24px;
      }
      .dataset-workspace-brand-top {
        align-items: flex-start;
        display: grid;
        gap: 12px;
        grid-template-columns: 54px minmax(0, 1fr);
      }
      .dataset-workspace-brand h2 {
        color: var(--text-2);
        font-size: var(--kb-text-md);
        font-weight: 600;
        line-height: 1.35;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dataset-workspace-brand p {
        color: var(--muted);
        font-size: var(--kb-text-xs);
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
      }
      .dataset-workspace-nav {
        display: grid;
        gap: 6px;
        padding: 18px 0;
      }
      .dataset-workspace-nav button {
        background: transparent;
        color: var(--text-2);
        font-size: var(--kb-text-sm);
        font-weight: 600;
        gap: 12px;
        justify-content: flex-start;
        min-height: 42px;
        padding: 0 14px;
        width: 100%;
      }
      .dataset-workspace-nav button:hover,
      .dataset-workspace-nav button.active {
        background: #eef3ff;
        color: var(--blue);
      }
      .dataset-workspace-nav .icon {
        color: currentColor;
        height: 18px;
        width: 18px;
      }
      .dataset-workspace-stats {
        color: var(--muted);
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
        margin-top: auto;
        padding: 18px 4px 0;
      }
      .dataset-workspace-stats strong {
        color: var(--text-2);
        display: block;
        font-size: var(--kb-title);
        line-height: 1.1;
      }
      .dataset-workspace-stats span {
        display: block;
        font-size: var(--kb-text-xs);
        font-weight: 500;
        margin-top: 3px;
      }
      .dataset-workspace-main {
        min-width: 0;
        overflow: auto;
        padding: 28px 32px 44px;
      }
      .dataset-section-head {
        align-items: flex-start;
        display: flex;
        gap: 20px;
        justify-content: space-between;
        margin-bottom: 22px;
      }
      .dataset-section-head h1 {
        color: var(--text);
        font-size: var(--kb-title);
        font-weight: 600;
        margin: 0 0 6px;
      }
      .dataset-section-head p {
        color: var(--muted);
        font-size: var(--kb-text-sm);
        font-weight: 400;
        line-height: 1.45;
        margin: 0;
      }
      .dataset-toolbar {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 18px;
      }
      .dataset-toolbar-left,
      .dataset-toolbar-right {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .dataset-summary-refresh-status {
        align-items: center;
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 7px;
        color: var(--text-2);
        display: flex;
        flex-wrap: wrap;
        font-size: var(--kb-text-sm);
        gap: 8px 14px;
        margin: -8px 0 18px;
        padding: 10px 12px;
      }
      .dataset-summary-refresh-status.running {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
      }
      .dataset-summary-refresh-status.completed {
        background: #f0fdf4;
        border-color: #bbf7d0;
        color: #15803d;
      }
      .dataset-summary-refresh-status.failed {
        background: #fff7ed;
        border-color: #fed7aa;
        color: #c2410c;
      }
      .dataset-filter-pill,
      .dataset-sort-pill,
      .dataset-search-pill {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text-2);
        display: inline-flex;
        font-size: var(--kb-text-sm);
        font-weight: 500;
        gap: 8px;
        min-height: 38px;
        padding: 0 12px;
      }
      .dataset-search-pill {
        background: #f0f2f7;
        color: var(--weak);
        min-width: 240px;
      }
      .dataset-search-pill input {
        background: transparent;
        border: 0;
        color: var(--text);
        font: inherit;
        min-width: 0;
        outline: 0;
        width: 210px;
      }
      .dataset-search-pill input::placeholder {
        color: var(--weak);
      }
      .dataset-search-action {
        font-size: var(--kb-text-sm);
        min-height: 38px;
        padding: 0 14px;
      }
      .dataset-doc-table {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: visible;
      }
      .dataset-pagination {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: space-between;
        margin-top: 12px;
        padding: 10px 12px;
      }
      .dataset-pagination-info {
        color: var(--text-2);
        font-size: 13px;
        font-weight: 800;
      }
      .dataset-pagination-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .dataset-pagination-pages {
        align-items: center;
        display: flex;
        gap: 6px;
      }
      .dataset-pagination-page {
        align-items: center;
        border-radius: 7px;
        display: inline-flex;
        height: 34px;
        justify-content: center;
        min-width: 34px;
        padding: 0 10px;
      }
      .dataset-pagination-page.active {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
      }
      .dataset-pagination-ellipsis {
        color: var(--muted);
        font-size: 13px;
        padding: 0 2px;
      }
      .dataset-pagination-jump {
        align-items: center;
        color: var(--muted);
        display: inline-flex;
        font-size: 13px;
        gap: 6px;
        margin-left: 4px;
      }
      .dataset-pagination-jump input {
        border: 1px solid var(--line);
        border-radius: 7px;
        height: 34px;
        padding: 0 8px;
        text-align: center;
        width: 70px;
      }
      .dataset-doc-row {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 12px;
        grid-template-columns: 28px 32px minmax(180px, 1.7fr) 92px 78px 82px 112px 86px 132px;
        min-height: 54px;
        min-width: 980px;
        padding: 0 14px;
      }
      .dataset-doc-row:last-child { border-bottom: 0; }
      .dataset-doc-row.header {
        background: #f6f7fb;
        color: var(--muted);
        font-size: var(--kb-text-xs);
        font-weight: 500;
        min-height: 42px;
      }
      .dataset-doc-row:not(.header) {
        color: var(--text-2);
        font-size: var(--kb-text-sm);
        font-weight: 400;
      }
      .dataset-doc-row > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dataset-doc-name {
        align-items: center;
        display: flex;
        gap: 9px;
        min-width: 0;
      }
      .dataset-doc-name strong {
        display: block;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dataset-doc-icon {
        align-items: center;
        background: #eaf1ff;
        border-radius: 5px;
        color: var(--blue);
        display: inline-flex;
        height: 22px;
        justify-content: center;
        width: 22px;
      }
      .dataset-doc-icon .icon {
        height: 14px;
        width: 14px;
      }
      .dataset-status-dot {
        background: var(--green);
        border-radius: 999px;
        display: inline-block;
        height: 8px;
        margin-right: 7px;
        width: 8px;
      }
      .dataset-status-dot.processing { background: var(--orange); }
      .dataset-status-dot.failed { background: var(--red); }
      .dataset-status-cell {
        align-items: center;
        display: flex;
        gap: 8px;
        min-width: 0;
      }
      .dataset-error-button {
        background: rgba(220, 38, 38, .08);
        border: 1px solid rgba(220, 38, 38, .22);
        border-radius: 999px;
        color: var(--red);
        cursor: pointer;
        font-size: 12px;
        line-height: 1;
        padding: 4px 8px;
      }
      .dataset-error-button:hover { background: rgba(220, 38, 38, .14); }
      .dataset-upload-log-table {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
      }
      .dataset-upload-log-row {
        align-items: start;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 14px;
        grid-template-columns: 48px minmax(220px, 1.4fr) 120px 150px minmax(240px, 2fr);
        min-height: 58px;
        min-width: 980px;
        padding: 14px 18px;
      }
      .dataset-upload-log-row:last-child { border-bottom: 0; }
      .dataset-upload-log-row.header {
        align-items: center;
        background: #f6f7fb;
        color: var(--muted);
        font-size: var(--kb-text-xs);
        font-weight: 500;
        min-height: 42px;
        padding-bottom: 0;
        padding-top: 0;
      }
      .dataset-upload-log-row:not(.header) {
        color: var(--text-2);
        font-size: var(--kb-text-sm);
        font-weight: 400;
      }
      .dataset-upload-log-reason {
        color: var(--muted);
        line-height: 1.5;
        overflow-wrap: anywhere;
        white-space: normal;
      }
      .dataset-upload-log-reason.failed {
        color: var(--red);
      }
      .dataset-row-actions {
        align-items: center;
        display: flex;
        gap: 7px;
        justify-content: flex-end;
      }
      .dataset-row-actions .btn-secondary,
      .dataset-row-actions .btn-danger {
        min-height: 30px;
        padding: 0 8px;
      }
      .dataset-doc-actions-inline {
        align-items: center;
        display: inline-flex;
        gap: 10px;
        justify-content: flex-end;
        position: relative;
        white-space: nowrap;
      }
      .dataset-document-switch {
        background: transparent;
        border: 0;
        min-height: 26px;
        padding: 0;
      }
      .dataset-document-switch .switch-track {
        align-items: center;
        background: #d0d5dd;
        border-radius: 999px;
        display: inline-flex;
        height: 22px;
        padding: 2px;
        transition: background .15s;
        width: 40px;
      }
      .dataset-document-switch .switch-thumb {
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(16,24,40,.22);
        height: 18px;
        transform: translateX(0);
        transition: transform .15s;
        width: 18px;
      }
      .dataset-document-switch.on .switch-track { background: var(--blue); }
      .dataset-document-switch.on .switch-thumb { transform: translateX(18px); }
      .dataset-doc-action-icon {
        background: transparent;
        color: var(--muted);
        min-height: 30px;
        padding: 0;
        width: 30px;
      }
      .dataset-doc-action-icon:hover {
        background: var(--soft);
        color: var(--blue);
      }
      .dataset-document-divider {
        background: var(--line);
        height: 20px;
        width: 1px;
      }
      .dataset-document-more-wrap { position: relative; }
      .dataset-document-menu {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 18px 36px rgba(16,24,40,.14);
        display: grid;
        min-width: 150px;
        padding: 8px;
        position: absolute;
        right: 0;
        top: 36px;
        z-index: 30;
      }
      .dataset-document-menu button {
        background: transparent;
        color: var(--text-2);
        font-size: var(--kb-text-sm);
        font-weight: 400;
        gap: 10px;
        justify-content: flex-start;
        min-height: 38px;
        padding: 0 10px;
      }
      .dataset-document-menu button:hover { background: var(--soft); }
      .dataset-document-menu button.danger { color: var(--red); }
      .dataset-doc-rename-input {
        font-size: var(--kb-text-sm);
        font-weight: 500;
        height: 34px;
        min-width: 0;
        width: 100%;
      }
      .dataset-document-settings-page {
        display: grid;
        gap: 28px;
        grid-template-columns: minmax(420px, .92fr) minmax(360px, .78fr);
      }
      .dataset-document-settings-main { min-width: 0; }
      .dataset-document-settings-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
      }
      .dataset-document-settings-card-head {
        align-items: center;
        background: #f8fafc;
        display: grid;
        gap: 12px;
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 18px;
      }
      .dataset-document-settings-card-head strong {
        color: var(--text-2);
        display: block;
        font-size: var(--kb-text-md);
      }
      .dataset-document-settings-card-head span {
        color: var(--muted);
        display: block;
        font-size: var(--kb-text-xs);
        font-weight: 400;
        margin-top: 4px;
      }
      .dataset-document-settings-body {
        display: grid;
        gap: 18px;
        padding: 22px 24px;
      }
      .dataset-document-settings-preview {
        background: #fff;
        border-left: 1px solid var(--line);
        margin: -28px -32px -44px 0;
        min-height: calc(100vh - 120px);
        padding: 28px 24px 44px;
      }
      .dataset-document-preview-head {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 20px;
      }
      .dataset-document-preview-head h2 {
        color: var(--blue);
        font-size: var(--kb-text-md);
        font-weight: 650;
        margin: 0 0 6px;
      }
      .dataset-document-preview-file {
        align-items: center;
        color: var(--text);
        display: flex;
        font-size: var(--kb-text-md);
        font-weight: 600;
        gap: 8px;
      }
      .dataset-document-preview-count {
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 7px;
        color: var(--muted);
        font-size: var(--kb-text-xs);
        font-weight: 500;
        padding: 5px 8px;
      }
      .dataset-document-preview-list {
        display: grid;
        gap: 12px;
      }
      .dataset-hit-layout {
        display: grid;
        gap: 28px;
        grid-template-columns: minmax(420px, .95fr) minmax(360px, .8fr);
      }
      .dataset-hit-left {
        min-width: 0;
      }
      .dataset-hit-query {
        background: #fff;
        border: 2px solid #1689ff;
        border-radius: 10px;
        min-height: 300px;
        padding: 0;
      }
      .dataset-hit-query-head {
        align-items: center;
        background: #f5f7fb;
        border-radius: 8px 8px 0 0;
        display: flex;
        justify-content: space-between;
        min-height: 46px;
        padding: 0 16px;
      }
      .dataset-hit-query-head strong {
        color: var(--text-2);
        font-size: var(--kb-text-md);
        font-weight: 650;
      }
      .dataset-retrieval-pill {
        background: #fff;
        color: var(--text-2);
        font-size: var(--kb-text-sm);
        font-weight: 500;
        gap: 6px;
        min-height: 32px;
        padding: 0 10px;
      }
      .dataset-retrieval-pill:hover { color: var(--blue); }
      .dataset-hit-query textarea {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 226px;
        padding: 18px;
        resize: vertical;
      }
      .dataset-hit-query textarea:focus { box-shadow: none; }
      .dataset-hit-query-footer {
        align-items: center;
        display: flex;
        justify-content: flex-end;
        padding: 0 14px 12px;
      }
      .dataset-history-table {
        margin-top: 28px;
      }
      .dataset-history-table h2 {
        color: var(--text);
        font-size: var(--kb-title);
        font-weight: 600;
        margin: 0 0 12px;
      }
      .dataset-history-toolbar {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(180px, 1fr) 150px 150px auto auto;
        margin: 0 0 12px;
      }
      .dataset-history-toolbar input {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text);
        height: 36px;
        min-width: 0;
        padding: 0 12px;
      }
      .dataset-history-row {
        display: grid;
        gap: 14px;
        grid-template-columns: minmax(0, 1fr) 110px 90px 90px 170px;
        padding: 12px 16px;
      }
      .dataset-history-row.header {
        background: #f2f4f8;
        border-radius: 8px;
        color: var(--muted);
        font-size: var(--kb-text-xs);
        font-weight: 500;
      }
      .dataset-history-row:not(.header) {
        background: transparent;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-bottom: 1px solid var(--line);
        color: var(--text-2);
        cursor: pointer;
        font-size: var(--kb-text-sm);
        font-weight: 400;
        text-align: left;
        width: 100%;
      }
      .dataset-history-row:not(.header):hover,
      .dataset-history-row.selected { background: #f7f9fd; }
      .dataset-history-query { min-width: 0; }
      .dataset-history-query strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dataset-history-error {
        color: var(--danger);
        display: block;
        font-size: var(--kb-text-xs);
        margin-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dataset-history-pagination {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding-top: 14px;
      }
      .dataset-history-pagination .muted { margin-right: auto; }
      @media (max-width: 980px) {
        .dataset-history-toolbar {
          grid-template-columns: 1fr 1fr;
        }
      }
      .dataset-hit-results-pane {
        background: #f0f2f7;
        border-left: 1px solid var(--line);
        margin: -28px -32px -44px 0;
        min-height: calc(100vh - 120px);
        padding: 28px 24px 44px;
      }
      .dataset-hit-results-pane h2 {
        color: var(--text);
        font-size: var(--kb-title);
        font-weight: 600;
        margin: 0 0 14px;
      }
      .dataset-hit-result-list {
        display: grid;
        gap: 12px;
      }
      .dataset-hit-result-card {
        background: #fff;
        border: 1px solid #eaedf3;
        border-radius: 12px;
        overflow: hidden;
      }
      .dataset-hit-result-main {
        padding: 16px 18px;
      }
      .dataset-hit-result-main h3 {
        color: var(--text);
        font-size: var(--kb-text-md);
        font-weight: 650;
        margin: 0 0 8px;
      }
      .dataset-hit-result-main p {
        color: var(--text-2);
        font-size: var(--kb-text-sm);
        font-weight: 400;
        line-height: 1.6;
        margin: 0;
        white-space: pre-wrap;
      }
      .dataset-hit-result-footer {
        align-items: center;
        border-top: 1px solid var(--line);
        color: var(--muted);
        display: flex;
        font-size: var(--kb-text-xs);
        font-weight: 500;
        justify-content: space-between;
        padding: 10px 18px;
      }
      .dataset-hit-score {
        background: #eff6ff;
        border-radius: 6px;
        color: var(--blue);
        font-size: 11px;
        font-weight: 950;
        padding: 3px 6px;
        white-space: nowrap;
      }
      .dataset-inline-settings {
        background: #fff;
        margin: -28px -32px -44px;
        min-height: calc(100vh - 120px);
        padding: 36px 64px 52px;
      }
      .dataset-inline-settings-inner {
        display: grid;
        gap: 28px;
        grid-template-columns: 220px minmax(0, 920px);
        max-width: 1180px;
      }
      .dataset-inline-settings-label h2 {
        color: var(--text-2);
        font-size: var(--kb-text-md);
        font-weight: 600;
        margin: 0 0 5px;
      }
      .dataset-inline-settings-label p {
        color: var(--muted);
        font-size: var(--kb-text-sm);
        font-weight: 400;
        line-height: 1.45;
        margin: 0;
      }
      .dataset-inline-settings-content {
        display: grid;
        gap: 14px;
        min-width: 0;
      }
      .dataset-inline-actions {
        align-items: center;
        border-top: 1px solid var(--line);
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        margin-top: 28px;
        padding-top: 24px;
      }
      .dataset-pipeline-empty {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        color: var(--muted);
        display: flex;
        font-size: var(--kb-text-sm);
        font-weight: 500;
        justify-content: center;
        min-height: 260px;
        text-align: center;
      }
      .complete-card {
        border: 1px solid var(--line);
        border-radius: 16px;
        max-width: 780px;
        padding: 26px;
      }
      .complete-card h2 { margin-bottom: 8px; }
      .page-title {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
      }
      .page-title h1 { font-size: 22px; margin: 0 0 4px; }
      .model-table-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        overflow: hidden;
      }
      .monitor-log-filters {
        align-items: flex-end;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0 0 14px;
        padding: 12px;
      }
      .monitor-filter-field {
        color: var(--text-2);
        display: grid;
        flex: 0 1 260px;
        gap: 6px;
        min-width: 190px;
      }
      .monitor-filter-field span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }
      .monitor-filter-field input {
        height: 34px;
        width: 100%;
      }
      .monitor-filter-actions {
        display: flex;
        gap: 8px;
        margin-left: auto;
      }
      .model-name { color: var(--text); font-weight: 850; }
      .model-url { color: var(--weak); font-size: 12px; margin-top: 4px; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .model-actions { display: flex; gap: 7px; justify-content: flex-end; }
      .status-switch {
        background: transparent;
        border: 0;
        color: var(--muted);
        gap: 8px;
        min-height: 28px;
        padding: 0;
      }
      .status-switch:hover { color: var(--text-2); }
      .status-track {
        align-items: center;
        background: #f2f4f7;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        display: inline-flex;
        height: 22px;
        padding: 2px;
        transition: background .15s, border-color .15s;
        width: 40px;
      }
      .status-thumb {
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
        display: inline-block;
        height: 16px;
        transform: translateX(0);
        transition: transform .15s;
        width: 16px;
      }
      .status-switch.on .status-track {
        background: var(--green);
        border-color: var(--green);
      }
      .status-switch.on .status-thumb { transform: translateX(18px); }
      .status-text {
        color: var(--muted);
        font-size: 12px;
        font-weight: 850;
        min-width: 26px;
      }
      .status-switch.on .status-text { color: var(--green); }
      .studio-toolbar {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
      }
      .tabs { align-items: center; display: flex; gap: 8px; }
      .tab {
        background: transparent;
        color: var(--muted);
        font-size: 14px;
        font-weight: 800;
        min-height: 38px;
        padding: 0 13px;
      }
      .tab.active { background: #fff; color: var(--blue); box-shadow: 0 4px 14px rgba(16, 24, 40, .07); }
      .actions { align-items: center; display: flex; gap: 10px; }
      .check {
        align-items: center;
        color: var(--text-2);
        display: flex;
        font-size: 13px;
        font-weight: 700;
        gap: 7px;
      }
      .check input { height: 16px; width: 16px; }
      .search { position: relative; width: 250px; }
      .search input { background: #eaedf3; border: 0; padding-left: 34px; }
      .search .search-icon {
        color: var(--weak);
        height: 15px;
        left: 12px;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
      }

      .app-grid {
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(4, minmax(220px, 1fr));
      }
      .card {
        background: #fff;
        border: 1px solid rgba(234, 236, 240, .78);
        border-radius: 13px;
      }
      .new-card { min-height: 158px; padding: 18px; }
      .new-card-title { color: var(--weak); font-size: 12px; font-weight: 800; margin-bottom: 8px; }
      .new-card button {
        background: transparent;
        color: var(--muted);
        justify-content: flex-start;
        margin-bottom: 2px;
        min-height: 36px;
        width: 100%;
      }
      .new-card button:hover { background: var(--hover); color: var(--text-2); }
      .app-card {
        cursor: pointer;
        min-height: 158px;
        padding: 17px;
        position: relative;
      }
      .app-card:hover { border-color: #b2ccff; box-shadow: 0 8px 22px rgba(16,24,40,.07); }
      .app-card.loading {
        border-color: #b2ccff;
        box-shadow: 0 8px 22px rgba(16,24,40,.07);
        cursor: wait;
      }
      .app-card.loading::after {
        background: rgba(255, 255, 255, .78);
        border-radius: 13px;
        content: "正在进入";
        color: var(--blue);
        font-size: 13px;
        font-weight: 900;
        inset: 0;
        align-items: center;
        display: flex;
        justify-content: center;
        position: absolute;
        z-index: 3;
      }
      .app-head {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: flex-start;
        margin-bottom: 12px;
        padding-right: 36px;
      }
      .app-head .app-icon {
        border-radius: 12px;
        flex: 0 0 auto;
        height: 46px;
        width: 46px;
      }
      .app-card-menu-trigger {
        background: transparent;
        border-radius: 8px;
        color: var(--weak);
        height: 30px;
        min-height: 30px;
        padding: 0;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        z-index: 20;
      }
      .app-card-menu-trigger:hover,
      .app-card-menu-trigger.active {
        background: var(--hover);
        color: var(--text-2);
      }
      .app-card-menu-trigger .card-more { color: currentColor; }
      .app-card-menu {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
        padding: 6px;
        position: absolute;
        right: 10px;
        top: 44px;
        width: 176px;
        z-index: 50;
      }
      .app-card-menu button {
        background: #fff;
        border-radius: 8px;
        color: var(--text-2);
        justify-content: flex-start;
        min-height: 38px;
        padding: 0 12px;
        width: 100%;
      }
      .app-card-menu button:hover { background: var(--hover); color: var(--text); }
      .app-card-menu button.danger { color: var(--red); }
      .app-card-menu button.danger:hover { background: var(--red-soft); color: var(--red); }
      .app-card-menu button.ranking-on { color: #067647; }
      .app-card-menu button.ranking-on:hover { background: #ecfdf3; color: #067647; }
      .app-card-menu button.ranking-off { color: var(--red); }
      .app-card-menu button.ranking-off:hover { background: var(--red-soft); color: var(--red); }
      .app-ranking-mark {
        display: inline-flex;
        font-size: 13px;
        font-weight: 900;
        justify-content: center;
        width: 16px;
      }
      .app-card-menu-sep {
        background: var(--line);
        height: 1px;
        margin: 6px -6px;
      }
      .app-id-chip {
        align-items: center;
        background: #ecfdf3;
        border: 1px solid #abefc6;
        border-radius: 7px;
        color: #067647;
        display: inline-flex;
        flex: 0 1 auto;
        font-size: 12px;
        font-weight: 900;
        gap: 5px;
        line-height: 24px;
        max-width: 100%;
        min-height: 24px;
        min-width: 0;
        overflow: hidden;
        padding: 0 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .app-id-chip:hover {
        background: #dcfae6;
        color: #05603a;
      }
      .app-id-chip span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .app-id-row {
        display: flex;
        margin-top: 8px;
        min-width: 0;
        width: 100%;
      }
      .app-id-row .app-id-chip {
        width: 100%;
      }
      .app-icon {
        align-items: center;
        border-radius: 11px;
        color: #fff;
        display: inline-flex;
        font-weight: 900;
        height: 40px;
        justify-content: center;
        width: 40px;
      }
      .app-icon.has-image {
        background: #fff;
        border: 1px solid var(--line);
        color: transparent;
        overflow: hidden;
      }
      .app-icon img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }
      .app-title { color: var(--text); font-size: 15px; font-weight: 850; margin: 0; }
      .app-desc {
        color: var(--muted);
        display: -webkit-box;
        font-size: 13px;
        line-height: 1.55;
        min-height: 40px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .meta {
        align-items: center;
        display: flex;
        gap: 7px;
        margin-top: 13px;
        min-width: 0;
      }
      .meta .tiny { flex: 0 0 auto; }
      .badge {
        align-items: center;
        border-radius: 7px;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 800;
        gap: 5px;
        min-height: 22px;
        padding: 0 8px;
        white-space: nowrap;
      }
      .blue { background: var(--blue-soft); color: var(--blue); }
      .violet { background: #f4f3ff; color: var(--violet); }
      .green { background: var(--green-soft); color: var(--green); }
      .orange { background: var(--orange-soft); color: var(--orange); }
      .red { background: var(--red-soft); color: var(--red); }
      .tag-editor {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
        min-height: 30px;
      }
      .tag-chip {
        align-items: center;
        background: var(--blue-soft);
        border: 1px solid #d1e0ff;
        border-radius: 7px;
        color: var(--blue);
        display: inline-flex;
        font-size: 12px;
        font-weight: 800;
        gap: 5px;
        min-height: 26px;
        padding: 0 7px 0 9px;
      }
      .tag-chip button {
        background: transparent;
        color: currentColor;
        min-height: 20px;
        opacity: .7;
        padding: 0;
        width: 20px;
      }
      .tag-chip button:hover { background: rgba(21, 94, 239, .1); opacity: 1; }
      .tag-input-row {
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
      }
      .muted { color: var(--muted); font-size: 13px; line-height: 1.6; }
      .tiny { color: var(--weak); font-size: 12px; }
      .empty { align-items: center; color: var(--muted); display: flex; font-weight: 800; grid-column: 1 / -1; justify-content: center; min-height: 280px; }
      .detail {
        display: grid;
        grid-template-columns: 208px minmax(0, 1fr);
        height: 100%;
      }
      .side {
        background: #fff;
        border-right: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        padding: 14px 8px;
      }
      .back { justify-content: flex-start; margin-bottom: 10px; width: 100%; }
      .side-app {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 9px;
        margin-bottom: 14px;
        padding: 8px 7px 15px;
      }
      .side-app h3 { font-size: 14px; margin: 0; }
      .side-app p { color: var(--weak); font-size: 12px; margin: 2px 0 0; }
      .side-nav { display: flex; flex-direction: column; gap: 4px; }
      .side-nav button {
        background: transparent;
        color: var(--muted);
        justify-content: flex-start;
        min-height: 36px;
        padding: 0 12px;
        width: 100%;
      }
      .side-nav .active { background: #eef4ff; color: var(--blue); }
      .main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
      .main-head {
        align-items: center;
        background: #fff;
        border-bottom: 1px solid var(--line);
        display: flex;
        height: 56px;
        justify-content: space-between;
        padding: 0 20px;
      }
      .main-head h2 { font-size: 18px; margin: 0; }
      .head-actions { align-items: center; display: flex; gap: 9px; }
      .unsaved-pill {
        background: #fff7ed;
        border: 1px solid #fed7aa;
        border-radius: 999px;
        color: #c2410c;
        font-size: 12px;
        font-weight: 900;
        min-height: 28px;
        padding: 6px 10px;
      }
      .unsaved-pill[hidden] { display: none; }
      .btn-primary.dirty { box-shadow: 0 0 0 3px rgba(245, 158, 11, .22), 0 8px 18px rgba(21,94,239,.18); }
      .model-pill {
        align-items: center;
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 12px;
        display: flex;
        gap: 8px;
        min-width: 360px;
        padding: 4px 7px;
      }
      .model-dot {
        align-items: center;
        background: #12b76a;
        border-radius: 8px;
        color: #fff;
        display: inline-flex;
        font-size: 11px;
        font-weight: 900;
        height: 23px;
        justify-content: center;
        width: 23px;
      }
      .model-pill select {
        background-color: transparent;
        background-image: var(--select-arrow);
        background-position: right 10px center;
        background-repeat: no-repeat;
        background-size: 16px 16px;
        border: 0;
        box-shadow: none;
        font-weight: 800;
        padding: 4px 32px 4px 4px;
      }
      .agent-layout {
        display: grid;
        flex: 1;
        grid-template-columns: minmax(480px, .9fr) minmax(430px, 1fr);
        overflow: hidden;
      }
      .config {
        border-right: 1px solid var(--line);
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 18px 20px 72px;
      }
      .preview { background: #fff; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
      .section { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
      .section-head {
        align-items: center;
        background: var(--soft);
        border-bottom: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        min-height: 42px;
        padding: 0 14px;
      }
      .section-head.collapsible { cursor: pointer; }
      .section-head h3 { color: var(--text-2); font-size: 14px; margin: 0; }
      .section-body { padding: 14px; }
      .section.collapsed .section-body { display: none; }
      .section.collapsed .section-head { border-bottom: 0; }
      .chevron { color: var(--weak); height: 14px; transform: rotate(90deg); transition: transform .15s; width: 14px; }
      .section.collapsed .chevron { transform: rotate(0deg); }
      .prompt textarea { border: 2px solid var(--blue-2); font-size: 14px; min-height: 248px; }
      .instruction-pair {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      }
      .instruction-panel label { margin-top: 0; }
      .instruction-label-row {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        margin-bottom: 6px;
      }
      .instruction-label-row label { margin: 0; }
      .textarea-expand-button {
        color: var(--blue);
        font-size: 12px;
        font-weight: 850;
        min-height: 28px;
        padding: 0 9px;
      }
      .instruction-panel textarea { min-height: 180px; }
      .instruction-panel .system-instruction-preview {
        background: #f8fafc;
        border-color: #d0d5dd;
        color: var(--muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
        line-height: 1.55;
        white-space: pre-wrap;
      }
      .instruction-panel .system-instruction-preview:focus {
        border-color: #d0d5dd;
        box-shadow: none;
      }
      .instruction-panel .agent-user-append-preview {
        min-height: 260px;
      }
      .count { background: #eef2f7; border-radius: 7px; color: var(--weak); display: inline-flex; font-size: 12px; font-weight: 900; margin-top: 8px; padding: 3px 8px; }
      .grid-2 { display: grid; gap: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid-3 { display: grid; gap: 11px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .row { align-items: center; display: flex; gap: 9px; }
      .row.space { justify-content: space-between; }
      .var-row {
        background: var(--soft);
        border-radius: 10px;
        display: grid;
        gap: 8px;
        margin-bottom: 8px;
        padding: 8px;
      }
      .var-row-main {
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(120px, 0.72fr) minmax(112px, 1fr) minmax(112px, 1fr) 36px;
      }
      .var-note {
        line-height: 1.5;
        min-height: 58px;
        resize: vertical;
      }
      .feature-row {
        align-items: center;
        background: var(--soft);
        border-radius: 10px;
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr 110px 72px 36px;
        margin-bottom: 8px;
        padding: 8px;
      }
      .param-details {
        border: 1px solid var(--line);
        border-radius: 10px;
        margin-top: 12px;
        overflow: hidden;
      }
      .param-details summary {
        align-items: center;
        background: var(--soft);
        color: var(--text-2);
        cursor: pointer;
        display: flex;
        font-size: 13px;
        font-weight: 800;
        justify-content: space-between;
        list-style: none;
        min-height: 38px;
        padding: 0 12px;
      }
      .param-details summary::-webkit-details-marker { display: none; }
      .param-body { display: grid; gap: 12px; padding: 12px; }
      .param-row {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(96px, .58fr) minmax(0, 1fr) auto;
      }
      .param-row label { margin: 0; }
      .param-row input[type="range"] { padding: 0; }
      .model-note {
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
        margin-top: 10px;
        padding: 10px 12px;
      }
      .knowledge-upload {
        align-items: center;
        background: var(--soft);
        border: 1px dashed var(--line-2);
        border-radius: 10px;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        padding: 12px;
      }
      .knowledge-upload input { max-width: 260px; }
      .knowledge-list { display: grid; gap: 8px; margin-top: 10px; }
      .knowledge-doc {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 12px;
      }
      .knowledge-doc strong { color: var(--text-2); display: block; font-size: 13px; margin-bottom: 4px; }
      .feature-row { display: flex; justify-content: space-between; min-height: 40px; }
      .toggle {
        background: #d0d5dd;
        border-radius: 999px;
        height: 22px;
        padding: 2px;
        width: 40px;
      }
      .toggle::after {
        background: #fff;
        border-radius: 50%;
        content: "";
        display: block;
        height: 18px;
        transform: translateX(0);
        transition: transform .15s;
        width: 18px;
      }
      .toggle.on { background: var(--blue); }
      .toggle.on::after { transform: translateX(18px); }
      .deep-switch {
        align-items: center;
        display: flex;
        gap: 10px;
      }
      .deep-switch input {
        height: 1px;
        opacity: 0;
        position: absolute;
        width: 1px;
      }
      .switch-control {
        background: #d0d5dd;
        border-radius: 999px;
        flex: 0 0 auto;
        height: 28px;
        padding: 3px;
        transition: background .15s;
        width: 50px;
      }
      .switch-control::after {
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .18);
        content: "";
        display: block;
        height: 22px;
        transform: translateX(0);
        transition: transform .15s;
        width: 22px;
      }
      .deep-switch input:checked + .switch-control { background: var(--blue); }
      .deep-switch input:checked + .switch-control::after { transform: translateX(22px); }
      .switch-copy strong { color: var(--text-2); display: block; font-size: 13px; }
      .switch-copy span { color: var(--muted); display: block; font-size: 12px; line-height: 1.5; margin-top: 3px; }
      .preview-head {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: flex;
        height: 50px;
        justify-content: space-between;
        padding: 0 18px;
      }
      .messages {
        background: #f7f8fa;
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 24px 12px;
      }
      .chat-stream {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0 auto;
        max-width: 860px;
        width: 100%;
      }
      .message-row {
        align-items: flex-start;
        display: flex;
        width: 100%;
      }
      .message-row.user-row { justify-content: flex-end; padding-left: 56px; }
      .message-row.bot-row { justify-content: flex-start; padding-right: 56px; }
      .message-row.system-row {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        justify-content: center;
        padding: 2px 44px;
        text-align: center;
      }
      .workflow-system-note {
        max-width: min(620px, 100%);
      }
      .chat-avatar {
        align-items: center;
        border: 1px solid rgba(16, 24, 40, .06);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
        color: #fff;
        display: inline-flex;
        flex: 0 0 36px;
        font-size: 12px;
        font-weight: 900;
        height: 36px;
        justify-content: center;
        line-height: 1;
        overflow: hidden;
        width: 36px;
      }
      .bot-avatar { background: #12b76a; border-radius: 10px; }
      .user-avatar { background: var(--blue); border-radius: 999px; margin-left: 12px; }
      .chat-avatar.has-image {
        background: #fff;
        padding: 0;
      }
      .chat-avatar img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }
      .message-body {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        margin-left: 12px;
        max-width: min(680px, 100%);
      }
      .message-meta {
        align-items: center;
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 6px;
        line-height: 1.3;
        margin: 0 0 6px;
      }
      .message-meta strong {
        color: var(--text-2);
        font-size: 13px;
        font-weight: 800;
      }
      .msg {
        border-radius: 16px;
        font-size: 14px;
        line-height: 1.7;
        max-width: min(680px, 100%);
        overflow-wrap: anywhere;
        padding: 12px 16px;
        white-space: pre-wrap;
        word-break: break-word;
      }
      .msg.has-media {
        width: min(680px, 100%);
      }
      .msg.bot {
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
        color: var(--text-2);
      }
      .msg.user {
        background: linear-gradient(135deg, #eef4ff 0%, #f7f9ff 100%);
        border: 1px solid #dbe7ff;
        color: var(--text);
      }
      .msg.is-thinking {
        align-items: center;
        color: var(--muted);
        border-radius: 14px;
        display: inline-flex;
        line-height: 1.35;
        min-height: 0;
        min-width: 0;
        padding: 7px 12px;
        width: fit-content;
      }
      .thinking-inline {
        align-items: center;
        display: inline-flex;
        font-weight: 800;
        gap: 8px;
        white-space: nowrap;
      }
      .thinking-dots {
        align-items: center;
        display: inline-flex;
        gap: 4px;
      }
      .thinking-dots span {
        animation: chatThinkingPulse 1.1s ease-in-out infinite;
        background: currentColor;
        border-radius: 999px;
        height: 5px;
        opacity: .35;
        width: 5px;
      }
      .thinking-dots span:nth-child(2) { animation-delay: .16s; }
      .thinking-dots span:nth-child(3) { animation-delay: .32s; }
      @keyframes chatThinkingPulse {
        0%, 80%, 100% { opacity: .28; transform: translateY(0); }
        40% { opacity: .9; transform: translateY(-3px); }
      }
      .msg p { margin: 0 0 8px; }
      .msg p:last-child { margin-bottom: 0; }
      .msg-usage {
        border-top: 1px solid rgba(102,112,133,.18);
        color: var(--weak);
        font-size: 12px;
        font-weight: 700;
        margin-top: 10px;
        padding-top: 8px;
      }
      .msg-media-list {
        display: grid;
        gap: 10px;
        margin-top: 10px;
      }
      .msg-media-grid {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 10px;
        width: min(420px, 100%);
      }
      .msg-media-image-link,
      .msg-media-video {
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: block;
        max-width: 100%;
        overflow: hidden;
        width: 100%;
      }
      .msg-media-grid .msg-media-image-link {
        aspect-ratio: 1 / 1;
      }
      .msg-media-image {
        display: block;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        width: 100%;
      }
      .msg-media-video {
        max-height: 360px;
        width: 100%;
      }
      .msg-media-file {
        align-items: center;
        background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
        border: 1px solid #dbe4f0;
        border-radius: 14px;
        box-sizing: border-box;
        color: var(--text-2);
        display: grid;
        gap: 10px 12px;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        min-height: 72px;
        padding: 14px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
        text-decoration: none;
        white-space: normal;
        width: 100%;
      }
      .msg-media-file:hover {
        border-color: rgba(41,112,255,.35);
      }
      .msg-media-file-icon {
        align-items: center;
        background: #eef4ff;
        border: 1px solid #d9e6ff;
        border-radius: 12px;
        color: var(--blue);
        display: inline-flex;
        height: 42px;
        justify-content: center;
        width: 42px;
      }
      .msg-media-file-main {
        display: grid;
        gap: 4px;
        min-width: 0;
      }
      .msg-media-file-meta {
        color: var(--weak);
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        font-weight: 700;
        gap: 8px;
      }
      .msg-media-file strong {
        color: var(--text);
        display: -webkit-box;
        font-size: 14px;
        font-weight: 900;
        line-height: 1.35;
        min-width: 0;
        overflow: hidden;
        overflow-wrap: anywhere;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .msg-media-file span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .msg-media-file-download {
        align-items: center;
        background: var(--blue);
        border-radius: 10px;
        color: #fff;
        display: inline-flex;
        font-size: 13px;
        font-weight: 900;
        gap: 6px;
        padding: 8px 12px;
        text-decoration: none;
        white-space: nowrap;
      }
      .msg-media-file-download:hover {
        background: #175cd3;
        color: #fff;
      }
      .preview-input { background: #fff; border-top: 1px solid var(--line); padding: 14px 16px 12px; }
      .preview-empty-state {
        align-items: center;
        color: var(--weak);
        display: flex;
        font-size: 13px;
        font-weight: 800;
        justify-content: center;
        min-height: 220px;
        text-align: center;
      }
      .debug-inputs {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 12px;
        display: grid;
        gap: 10px;
        margin-bottom: 10px;
        padding: 12px;
      }
      .debug-inputs h4 {
        color: var(--text-2);
        font-size: 13px;
        margin: 0;
      }
      .debug-input-grid {
        display: grid;
        gap: 9px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .debug-input-grid label { margin-bottom: 4px; }
      .chat-attachment-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 10px;
      }
      .chat-attachment-chip {
        align-items: center;
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text-2);
        display: inline-flex;
        font-size: 12px;
        font-weight: 800;
        gap: 6px;
        max-width: 100%;
        min-height: 30px;
        padding: 4px 6px 4px 9px;
      }
      .chat-attachment-chip.image-chip { padding-left: 4px; }
      .chat-attachment-chip.audio-chip {
        background: #fff7ed;
        border-color: #fed7aa;
        color: #9a3412;
      }
      .chat-attachment-thumb {
        background: #fff;
        border: 1px solid rgba(208, 213, 221, .9);
        border-radius: 6px;
        flex: 0 0 26px;
        height: 26px;
        object-fit: cover;
        width: 26px;
      }
      .chat-attachment-chip span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .chat-attachment-chip small {
        color: var(--weak);
        flex: 0 0 auto;
        font-size: 11px;
      }
      .chat-attachment-chip button {
        border-radius: 7px;
        height: 22px;
        min-height: 22px;
        padding: 0;
        width: 22px;
      }
      .chat-record-button {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--text-3);
        display: inline-flex;
        flex: 0 0 auto;
        height: 34px;
        justify-content: center;
        min-height: 34px;
        padding: 0;
        transition: border-color .15s ease, color .15s ease, background .15s ease;
        width: 34px;
      }
      .chat-record-button:hover:not(:disabled) {
        border-color: rgba(41,112,255,.35);
        color: var(--blue);
      }
      .chat-record-button.recording {
        animation: recordPulse 1.2s ease-in-out infinite;
        background: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
      }
      .chat-record-button:disabled {
        cursor: not-allowed;
        opacity: .55;
      }
      @keyframes recordPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.2); }
        50% { box-shadow: 0 0 0 5px rgba(220,38,38,.08); }
      }
      .input-shell {
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
        display: flex;
        gap: 8px;
        min-height: 46px;
        padding: 6px;
      }
      .input-shell:focus-within {
        border-color: var(--blue-2);
        box-shadow: 0 0 0 3px rgba(41, 112, 255, .12);
      }
      .input-shell input,
      .input-shell textarea {
        border: 0;
        box-shadow: none;
        padding: 8px 10px;
      }
      .input-shell input:focus,
      .input-shell textarea:focus { box-shadow: none; }
      .input-shell textarea {
        line-height: 1.5;
        max-height: 116px;
        min-height: 34px;
        overflow-y: auto;
        resize: none;
      }
      .chat-file-picker {
        align-items: center;
        border: 1px solid transparent;
        border-radius: 9px;
        color: var(--muted);
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 34px;
        height: 34px;
        justify-content: center;
        min-height: 34px;
        width: 34px;
      }
      .chat-file-picker:hover { background: var(--soft); color: var(--blue); }
      .chat-file-picker.disabled { cursor: not-allowed; opacity: .5; pointer-events: none; }
      .chat-file-picker input { display: none; }
      .input-shell .btn-primary {
        border-radius: 10px;
        flex: 0 0 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        width: 34px;
      }

      .content { flex: 1; overflow: auto; padding: 22px; }
      .api-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
      .settings-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 620px); }
      .settings-field { margin-top: 18px; }
      .section-body > .settings-field:first-child { margin-top: 0; }
      .avatar-setting {
        align-items: center;
        display: flex;
        gap: 14px;
        min-width: 0;
      }
      .avatar-preview {
        border-radius: 16px;
        flex: 0 0 72px;
        font-size: 22px;
      }
      .avatar-upload-actions {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
      }
      .avatar-upload-row {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .avatar-upload-button {
        align-items: center;
        background: var(--blue);
        border: 1px solid var(--blue);
        border-radius: 9px;
        box-shadow: 0 8px 18px rgba(21,94,239,.16);
        color: #fff;
        display: inline-flex;
        font-size: 13px;
        font-weight: 850;
        gap: 6px;
        height: 34px;
        line-height: 1;
        padding: 0 12px;
        transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
      }
      .avatar-upload-button:hover {
        background: #004eeb;
        border-color: #004eeb;
        color: #fff;
      }
      .avatar-upload-button:focus-within {
        box-shadow: 0 0 0 3px rgba(41,112,255,.14);
      }
      .avatar-upload-button.is-disabled {
        cursor: not-allowed;
        opacity: .62;
        pointer-events: none;
      }
      .system-settings-page .page-title {
        align-items: flex-start;
        gap: 18px;
      }
      .system-settings-page .page-title > div {
        max-width: 720px;
        min-width: 0;
      }
      .system-settings-grid {
        align-items: start;
        display: grid;
        gap: 14px;
        grid-template-columns: minmax(440px, 1.18fr) minmax(300px, .91fr) minmax(300px, .91fr);
      }
      .system-model-switch-row {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) auto;
      }
      .system-model-switch-row select {
        min-width: 0;
        width: 100%;
      }
      .system-inline-switch {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 12px;
        min-height: 52px;
        padding: 0 12px;
        white-space: nowrap;
      }
      .system-inline-switch .switch-copy strong { font-size: 12px; }
      .system-inline-switch .switch-copy span { font-size: 11px; }
      @media (max-width: 760px) {
        .system-model-switch-row {
          grid-template-columns: 1fr;
        }
        .system-inline-switch {
          justify-content: flex-start;
          min-height: 44px;
        }
      }
      .system-settings-aside { margin-bottom: 0; }
      .knowledge-link-options {
        display: grid;
        gap: 8px;
      }
      .knowledge-link-option-row {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: none;
        display: grid;
        grid-template-columns: 190px 190px minmax(240px, 1fr) 150px minmax(280px, 1.2fr) 150px 32px;
        gap: 10px;
        align-items: end;
        padding: 12px;
        transition: border-color .15s, box-shadow .15s;
      }
      .knowledge-link-option-row:hover {
        border-color: var(--line-2);
        box-shadow: 0 4px 12px rgba(16, 24, 40, .04);
      }
      .knowledge-link-option-row label:not(.deep-switch) {
        color: #475467;
        font-size: 11px;
        letter-spacing: 0;
        margin-bottom: 7px;
      }
      .knowledge-link-option-row input {
        background: #fff;
        border-color: #d9e2ef;
        min-height: 34px;
        padding: 7px 10px;
      }
      .knowledge-link-color-field {
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: 34px minmax(0, 1fr);
      }
      .knowledge-link-color-field .knowledge-link-color-picker {
        height: 34px;
        min-height: 34px;
        padding: 2px;
      }
      .knowledge-link-option-row .tiny {
        color: #8492a6;
        font-size: 11px;
        margin-top: 7px;
      }
      .knowledge-link-option-row .deep-switch {
        background: #f7f9fc;
        border: 1px solid #e4eaf3;
        border-radius: 8px;
        justify-content: center;
        margin: 0;
        min-height: 34px;
        padding: 8px 10px;
      }
      .knowledge-link-option-row .switch-copy strong {
        font-size: 12px;
      }
      .knowledge-link-option-row .switch-copy span {
        font-size: 11px;
        margin-top: 1px;
      }
      .knowledge-link-option-row .btn-icon {
        align-self: center;
        color: #667085;
        height: 32px;
        width: 32px;
      }
      .knowledge-link-option-row .btn-icon:hover {
        background: var(--red-soft);
        color: var(--red);
      }
      .no-knowledge-wecom-robot-row {
        grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(300px, 2fr) 150px 150px 32px;
        align-items: end;
      }
      .no-knowledge-wecom-robot-row .knowledge-link-option-wide {
        grid-column: 1 / -2;
      }
      .no-knowledge-wecom-robot-row > .btn-icon {
        grid-column: -2 / -1;
        grid-row: 1;
      }
      .no-knowledge-wecom-robot-row textarea {
        min-height: 92px;
        resize: vertical;
      }
      .no-knowledge-wecom-robot-row .deep-switch {
        min-width: 0;
        padding: 8px 12px;
      }
      .no-knowledge-wecom-robot-row .switch-copy strong {
        white-space: nowrap;
      }
      @media (max-width: 900px) {
        .knowledge-link-option-row {
          grid-template-columns: 1fr;
          align-items: stretch;
        }
        .no-knowledge-wecom-robot-row .knowledge-link-option-wide {
          grid-column: auto;
        }
      }
      .system-settings-summary {
        display: grid;
        gap: 10px;
      }
      .system-settings-summary-item {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 10px;
        display: grid;
        gap: 5px;
        padding: 11px 12px;
      }
      .system-settings-summary-item strong {
        color: var(--text-2);
        font-size: 12px;
      }
      .system-settings-summary-item span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .system-service-block {
        margin: 0;
      }
      .system-service-head {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .system-service-head h3 {
        color: var(--text-2);
        font-size: 14px;
        margin: 0;
      }
      .service-list {
        display: grid;
        gap: 10px;
      }
      .service-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        display: grid;
        gap: 9px;
        padding: 11px 12px;
      }
      .service-head {
        align-items: flex-start;
        display: flex;
        gap: 10px;
        justify-content: space-between;
      }
      .service-head strong {
        color: var(--text-2);
        display: block;
        font-size: 12px;
      }
      .service-meta {
        color: var(--muted);
        display: grid;
        font-size: 12px;
        gap: 3px;
        line-height: 1.45;
        overflow-wrap: anywhere;
      }
      .service-actions {
        display: flex;
        gap: 8px;
      }
      .code {
        background: #0f1728;
        border-radius: 11px;
        color: #d8e5ff;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 12px;
        line-height: 1.65;
        overflow: auto;
        padding: 14px;
        white-space: pre-wrap;
      }
      table { border-collapse: collapse; width: 100%; }
      th, td { border-bottom: 1px solid var(--line); font-size: 13px; padding: 12px 9px; text-align: left; }
      th { color: var(--muted); font-weight: 800; }
      .log-page-toolbar { align-items: center; display: flex; justify-content: flex-end; margin-bottom: 10px; min-height: 34px; }
      .log-view-head { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
      .log-view-tabs { align-items: center; display: flex; gap: 8px; }
      .log-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; min-width: 0; }
      .log-filter-bar {
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: 160px 150px 150px auto auto;
      }
      .log-filter-bar input { background: #fff; height: 32px; max-width: none; padding: 6px 10px; width: 100%; }
      .log-filter-bar button { height: 32px; white-space: nowrap; }
      .log-id { color: var(--text); font-weight: 800; white-space: nowrap; }
      .log-user-id { color: var(--text); font-weight: 800; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .log-message { color: var(--text-2); line-height: 1.45; max-width: 360px; }
      .token-cell { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 800; }
      .log-content { overflow: hidden; }
      .log-section-body { height: calc(100vh - 292px); overflow: hidden; padding: 12px; }
      .log-conversation-table th,
      .log-conversation-table td {
        vertical-align: top;
      }
      .log-pagination {
        align-items: center;
        background: #fff;
        border-top: 1px solid var(--line);
        color: var(--muted);
        display: flex;
        gap: 12px;
        justify-content: space-between;
        margin-top: 0;
        padding: 10px 12px;
      }
      .log-page-number {
        color: var(--text-2);
        font-size: 13px;
        font-weight: 850;
        padding: 0 4px;
      }
      .log-conversation-layout {
        border: 1px solid var(--line);
        border-radius: 14px;
        display: grid;
        grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }
      .log-conversation-list {
        background: #f8fafc;
        border-right: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
      }
      .log-conversation-list-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
      }
      .log-conversation-list-item {
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--line);
        color: var(--text);
        cursor: pointer;
        display: grid;
        gap: 6px;
        padding: 14px 16px;
        text-align: left;
        width: 100%;
      }
      .log-conversation-list-item:hover {
        background: #eef5ff;
      }
      .log-conversation-list-item.active {
        background: #eaf2ff;
        box-shadow: inset 3px 0 0 var(--primary);
      }
      .log-conversation-list-title {
        display: -webkit-box;
        font-size: 14px;
        font-weight: 900;
        line-height: 1.45;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .log-conversation-list-output {
        color: var(--muted);
        display: -webkit-box;
        font-size: 12px;
        line-height: 1.45;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .log-conversation-list-meta {
        align-items: center;
        color: var(--weak);
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 8px;
      }
      .log-conversation-preview {
        background: #f5f7fb;
        display: flex;
        align-items: stretch;
        justify-content: center;
        min-width: 0;
        overflow: hidden;
        padding: 14px;
      }
      .log-dialog-shell {
        background: #fff;
        border: 1px solid #dce5f2;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(16, 24, 40, .1);
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        height: 100%;
        min-width: 0;
        overflow: hidden;
        width: min(100%, 920px);
      }
      .log-dialog-head {
        align-items: center;
        background: #fff;
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 10px;
        justify-content: space-between;
        padding: 12px 14px;
      }
      .log-dialog-head strong {
        color: var(--text);
        display: block;
        font-size: 15px;
        line-height: 1.3;
      }
      .log-dialog-head span {
        color: var(--muted);
        display: block;
        font-size: 12px;
        margin-top: 2px;
      }
      .log-dialog-meta {
        background: #f8fafc;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        display: flex;
        flex-wrap: wrap;
        font-size: 11px;
        gap: 5px 9px;
        line-height: 1.35;
        padding: 8px 14px;
      }
      .log-time-cell {
        color: var(--text-2);
        white-space: nowrap;
      }
      .log-conversation-meta {
        color: var(--text-2);
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        line-height: 1.45;
        min-width: 0;
      }
      .log-conversation-meta span {
        overflow-wrap: anywhere;
      }
      .log-conversation-meta strong {
        color: var(--muted);
        display: inline-block;
        margin-right: 6px;
      }
      .log-dialog-block {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        max-width: 520px;
        min-width: 220px;
        padding: 12px 14px;
      }
      .log-dialog-block.user { background: #f7fbff; border-color: #dbe9ff; }
      .log-dialog-block.assistant { background: #fff; }
      .log-chat-preview {
        background: #f4f7fb;
        display: grid;
        gap: 12px;
        min-height: 0;
        overflow: auto;
        padding: 14px 12px 16px;
      }
      .log-context-loading,
      .log-context-time {
        color: var(--weak);
        font-size: 11px;
        font-weight: 800;
        text-align: center;
      }
      .log-context-round {
        display: grid;
        gap: 10px;
        padding: 4px 0 8px;
      }
      .log-context-round.selected {
        border-bottom: 1px dashed #8ddab4;
        border-top: 1px dashed #8ddab4;
        padding-bottom: 12px;
        padding-top: 12px;
      }
      .log-chat-message {
        align-items: flex-start;
        display: flex;
        gap: 8px;
        min-width: 0;
      }
      .log-chat-message.user {
        flex-direction: row-reverse;
      }
      .log-chat-avatar {
        align-items: center;
        background: var(--primary);
        border-radius: 999px;
        color: #fff;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 900;
        height: 32px;
        justify-content: center;
        width: 32px;
      }
      .log-chat-message.assistant .log-chat-avatar {
        background: #12b76a;
      }
      .log-chat-bubble {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: 0 8px 18px rgba(16, 24, 40, .06);
        max-width: min(76%, 680px);
        min-width: 0;
        padding: 10px 12px;
      }
      .log-chat-bubble.has-media {
        width: min(76%, 680px);
      }
      .log-chat-message.user .log-chat-bubble {
        background: #eef5ff;
        border-color: #cfe0ff;
      }
      .log-dialog-foot {
        background: #fff;
        border-top: 1px solid var(--line);
        color: var(--weak);
        font-size: 11px;
        font-weight: 800;
        padding: 9px 12px;
        text-align: center;
      }
      .log-dialog-role {
        color: var(--muted);
        font-size: 11px;
        font-weight: 900;
        margin-bottom: 5px;
      }
      .log-dialog-text {
        color: var(--text);
        font-size: 13px;
        line-height: 1.58;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
      }
      .log-attachment-empty {
        color: var(--muted);
        font-size: 12px;
        margin-top: 8px;
      }
      .log-attachment-list {
        display: grid;
        gap: 8px;
        margin-top: 10px;
        width: 100%;
      }
      .log-attachment-item {
        display: grid;
        gap: 8px;
        width: 100%;
      }
      .log-attachment-chip {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--text-2);
        display: inline-flex;
        flex-wrap: wrap;
        gap: 6px;
        line-height: 1.3;
        max-width: 100%;
        padding: 6px 10px;
      }
      .log-attachment-chip strong { color: var(--primary); }
      .log-attachment-chip span { overflow-wrap: anywhere; }
      .log-attachment-chip em { color: var(--muted); font-style: normal; }
      .log-attachment-image {
        border: 1px solid var(--line);
        border-radius: 10px;
        display: block;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        width: 100%;
      }
      .log-attachment-audio { max-width: 260px; width: 100%; }
      .log-detail-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
      }
      .log-detail-grid > section {
        min-width: 0;
        overflow: hidden;
      }
      .log-detail-grid .code {
        box-sizing: border-box;
        max-height: min(420px, 42vh);
        max-width: 100%;
        min-width: 0;
        overflow: auto;
        white-space: pre;
      }
      .log-payload-head {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 8px;
      }
      .log-payload-head h3 { margin: 0; }
      .log-payload-actions {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
      }
      .log-payload-expand { flex: 0 0 auto; }
      .log-detail-meta { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
      .log-detail-meta div { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
      .log-detail-meta span { color: var(--muted); display: block; font-size: 12px; margin-bottom: 4px; }
      .log-detail-meta strong { display: block; overflow-wrap: anywhere; }
      .log-records { display: grid; gap: 12px; }
      .log-record-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
      .log-record-head h3 { margin: 0; }
      .log-record {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
      }
      .log-record[open] { border-color: #bfd3ff; box-shadow: 0 10px 24px rgba(16, 24, 40, .08); }
      .log-record-summary {
        align-items: center;
        cursor: pointer;
        display: grid;
        gap: 10px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        list-style: none;
        padding: 14px 16px;
      }
      .log-record-summary::-webkit-details-marker { display: none; }
      .log-record-title { min-width: 0; }
      .log-record-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .log-record-title span { color: var(--muted); display: block; font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
      .log-record-index {
        align-items: center;
        background: #edf4ff;
        border-radius: 999px;
        color: var(--primary);
        display: inline-flex;
        font-size: 12px;
        font-weight: 900;
        height: 28px;
        justify-content: center;
        width: 38px;
      }
      .log-record-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
      .log-record-body { border-top: 1px solid var(--line); min-width: 0; padding: 14px 16px 16px; }
      .log-record-body .log-detail-grid .code { max-height: min(360px, 36vh); }

      .workflow {
        display: grid;
        flex: 1;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) minmax(360px, 440px);
        min-height: 0;
        overflow: hidden;
      }
      .workflow.run-collapsed {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) 52px;
      }
      .canvas {
        background: radial-gradient(circle, rgba(16,24,40,.12) 1px, transparent 1px);
        background-size: 22px 22px;
        min-width: 0;
        overflow: hidden;
        position: relative;
      }
      .canvas-tools { display: flex; flex-wrap: wrap; gap: 8px; left: 18px; position: absolute; top: 16px; z-index: 5; }
      .workflow-zoom-controls {
        align-items: center;
        background: rgba(255,255,255,.86);
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: 0 10px 28px rgba(15,23,42,.08);
        display: flex;
        gap: 4px;
        padding: 4px;
      }
      .workflow-zoom-controls button {
        min-height: 30px;
      }
      .workflow-zoom-button {
        font-size: 16px;
        font-weight: 900;
        padding: 0;
        width: 32px;
      }
      .workflow-zoom-label {
        color: var(--muted);
        min-width: 58px;
        padding: 0 10px;
      }
      .workflow-zoom-fit {
        padding: 0 10px;
      }
      .workflow-add-node {
        position: relative;
      }
      .workflow-add-node-toggle {
        min-width: 92px;
      }
      .workflow-node-menu {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: 0 18px 42px rgba(15,23,42,.16);
        display: grid;
        gap: 4px;
        left: 0;
        min-width: 238px;
        padding: 6px;
        position: absolute;
        top: calc(100% + 8px);
        z-index: 8;
      }
      .workflow-node-menu button {
        align-items: flex-start;
        background: transparent;
        border-radius: 8px;
        display: grid;
        gap: 2px;
        grid-template-columns: 28px minmax(0, 1fr);
        justify-content: stretch;
        min-height: 48px;
        padding: 8px 10px;
        text-align: left;
        white-space: normal;
        width: 100%;
      }
      .workflow-node-menu button:hover {
        background: var(--blue-soft);
      }
      .workflow-node-menu .icon {
        align-items: center;
        background: #edf4ff;
        border-radius: 8px;
        color: var(--blue);
        height: 26px;
        justify-content: center;
        width: 26px;
      }
      .workflow-node-menu strong {
        color: var(--text-2);
        display: block;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.25;
      }
      .workflow-node-menu span:last-child {
        color: var(--muted);
        display: block;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.35;
        margin-top: 2px;
      }
      .canvas-scroll {
        cursor: grab;
        inset: 0;
        overflow: auto;
        overscroll-behavior: contain;
        position: absolute;
      }
      .canvas-scroll.panning { cursor: grabbing; }
      .canvas-stage {
        min-height: 720px;
        min-width: 980px;
        position: relative;
        transform-origin: 0 0;
      }
      .canvas-stage-frame {
        min-height: 240px;
        min-width: 320px;
        position: relative;
      }
      .edge-layer { inset: 0; pointer-events: none; position: absolute; }
      .node {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        box-shadow: var(--shadow);
        cursor: grab;
        box-sizing: border-box;
        min-height: 104px;
        padding: 13px;
        position: absolute;
        user-select: none;
        width: 190px;
        z-index: 1;
      }
      .node.has-output-ports {
        width: 250px;
      }
      .node.connecting { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(41,112,255,.12); }
      .node.active { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(41,112,255,.13); }
      .node.workflow-route-hit {
        border-color: #12b76a;
        box-shadow: 0 0 0 4px rgba(18,183,106,.16), var(--shadow);
      }
      .node.dragging { cursor: grabbing; z-index: 4; }
      .node-delete-button {
        align-items: center;
        background: rgba(248, 250, 252, .92);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--weak);
        height: 24px;
        justify-content: center;
        min-height: 24px;
        padding: 0;
        position: absolute;
        right: 9px;
        top: 9px;
        width: 24px;
        z-index: 2;
      }
      .node-delete-button:hover {
        background: var(--red-soft);
        border-color: rgba(217, 45, 32, .28);
        color: var(--red);
      }
      .node h4 { margin: 7px 0 5px; }
      .node p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
      .node-head {
        align-items: center;
        display: flex;
        gap: 9px;
        min-height: 34px;
        padding-right: 24px;
      }
      .node-head h4 {
        line-height: 1.25;
        margin: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .node-output-list {
        display: grid;
        gap: 6px;
        margin-top: 12px;
      }
      .node-output-row {
        align-items: center;
        background: #f4f6fa;
        border-radius: 8px;
        color: var(--text);
        display: grid;
        font-size: 13px;
        font-weight: 850;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 32px;
        padding: 0 10px;
        position: relative;
      }
      .node-output-row span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .node-output-row strong {
        color: var(--text-2);
        font-size: 12px;
      }
      .node-output-row.condition-row {
        background: transparent;
        color: var(--text-2);
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 36px;
        padding: 0 0 0 2px;
      }
      .node-output-row.condition-row span {
        color: var(--muted);
        display: block;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0;
        line-height: 1.2;
      }
      .node-output-row.condition-row em {
        background: #f4f6fa;
        border-radius: 7px;
        color: var(--text-2);
        display: block;
        font-style: normal;
        font-weight: 800;
        line-height: 28px;
        margin-top: 5px;
        overflow: hidden;
        padding: 0 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .node-port {
        appearance: none;
        background: #fff;
        border: 2px solid #cbd5e1;
        border-radius: 999px;
        box-sizing: border-box;
        box-shadow: 0 4px 12px rgba(16,24,40,.12);
        cursor: crosshair;
        height: 14px;
        line-height: 0;
        min-height: 14px;
        min-width: 14px;
        padding: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        z-index: 3;
      }
      .node-port.in { left: -8px; }
      .node-port.out {
        background: var(--blue);
        border-color: var(--blue);
        display: inline-flex;
        height: 24px;
        justify-content: center;
        min-height: 24px;
        min-width: 24px;
        opacity: 0;
        pointer-events: none;
        right: -13px;
        transition: opacity .14s ease, transform .14s ease, box-shadow .14s ease;
        width: 24px;
      }
      .node:hover .node-port.out,
      .node.active .node-port.out,
      .node.connecting .node-port.out {
        opacity: 1;
        pointer-events: auto;
      }
      .node-output-row .node-port.out {
        right: -25px;
        top: 50%;
      }
      .node-port.out::before,
      .node-port.out::after {
        background: #fff;
        border-radius: 999px;
        content: "";
        height: 2px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 9px;
      }
      .node-port.out::after {
        transform: translate(-50%, -50%) rotate(90deg);
      }
      .node-port:hover { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(41,112,255,.14); }
      .node-port.out:hover { box-shadow: 0 0 0 5px rgba(41,112,255,.16); }
      .edge {
        background: #cbd5e1;
        height: 2px;
        position: absolute;
        transform-origin: left center;
      }
      .edge::after {
        border-bottom: 5px solid transparent;
        border-left: 7px solid #cbd5e1;
        border-top: 5px solid transparent;
        content: "";
        position: absolute;
        right: -1px;
        top: -4px;
      }
      .edge-preview { background: var(--blue); height: 3px; }
      .edge-preview::after { border-left-color: var(--blue); }
      .node-panel {
        background: #fff;
        border-left: 1px solid var(--line);
        box-shadow: -10px 0 24px rgba(16,24,40,.03);
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 17px;
        position: relative;
        z-index: 3;
      }
      .node-panel-block {
        border-bottom: 1px solid var(--line);
        margin-bottom: 18px;
        padding-bottom: 18px;
      }
      .workflow-run {
        background: #fff;
        border-left: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
        position: relative;
        z-index: 3;
      }
      .workflow-run.collapsed {
        align-items: stretch;
        justify-content: stretch;
      }
      .workflow-run-collapsed-button {
        align-items: center;
        background: #fff;
        border: 0;
        color: var(--text);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        font-weight: 900;
        gap: 10px;
        height: 100%;
        justify-content: flex-start;
        padding: 18px 0;
        width: 100%;
      }
      .workflow-run-collapsed-button span:last-child {
        writing-mode: vertical-rl;
      }
      .agent-select-list {
        border: 1px solid var(--line);
        border-radius: 10px;
        display: grid;
        gap: 0;
        max-height: 220px;
        overflow: auto;
      }
      .agent-select-row {
        align-items: center;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        display: grid;
        gap: 8px;
        grid-template-columns: 18px minmax(0, 1fr);
        padding: 9px 10px;
      }
      .agent-select-row:last-child { border-bottom: 0; }
      .agent-select-row input { width: auto; }
      .agent-select-row strong { color: var(--text-2); display: block; font-size: 13px; }
      .agent-select-row span { color: var(--weak); display: block; font-size: 12px; margin-top: 2px; }
      .customer-output-options {
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        gap: 10px;
        padding: 12px;
      }
      .customer-output-options-title {
        color: var(--text);
        font-size: 13px;
        font-weight: 800;
      }
      .multi-select {
        position: relative;
      }
      .multi-select-trigger {
        align-items: center;
        background: #fff;
        background-image: var(--select-arrow);
        background-position: right 14px center;
        background-repeat: no-repeat;
        background-size: 16px 16px;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--text);
        cursor: pointer;
        display: flex;
        font-size: 13px;
        min-height: 38px;
        padding: 8px 38px 8px 10px;
        text-align: left;
        width: 100%;
      }
      .multi-select.open .multi-select-trigger,
      .multi-select-trigger:focus {
        border-color: var(--blue-2);
        box-shadow: 0 0 0 3px rgba(41, 112, 255, .14);
      }
      .multi-select-trigger span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .multi-select-menu {
        background: #fff;
        border: 1px solid var(--blue-2);
        border-radius: 8px;
        box-shadow: 0 12px 24px rgba(16, 24, 40, .14);
        left: 0;
        margin-top: 4px;
        max-height: 190px;
        overflow: auto;
        padding: 4px;
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 20;
      }
      .multi-select-option {
        align-items: center;
        border-radius: 6px;
        cursor: pointer;
        display: grid;
        gap: 8px;
        grid-template-columns: 16px minmax(0, 1fr);
        padding: 8px 9px;
      }
      .multi-select-option:hover {
        background: #f2f6ff;
      }
      .multi-select-option input {
        height: 16px;
        margin: 0;
        width: 16px;
      }
      .multi-select-option span {
        color: var(--text-2);
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .multi-select-empty {
        color: var(--weak);
        font-size: 13px;
        padding: 10px;
      }
      .workflow-config-section {
        border-top: 1px solid var(--line);
        margin-top: 16px;
        padding-top: 16px;
      }
      .workflow-settings-group {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        margin-top: 14px;
        padding: 14px;
      }
      .workflow-settings-group:first-child { margin-top: 0; }
      .workflow-settings-group-title {
        align-items: baseline;
        color: var(--text);
        display: flex;
        font-size: 15px;
        font-weight: 900;
        gap: 8px;
        margin-bottom: 10px;
      }
      .workflow-settings-group-title span {
        color: var(--weak);
        font-size: 12px;
        font-weight: 700;
      }
      .workflow-config-list {
        border: 1px solid var(--line);
        border-radius: 10px;
        display: grid;
        gap: 0;
        overflow: hidden;
      }
      .workflow-config-row {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 9px 10px;
      }
      .workflow-config-row:last-child { border-bottom: 0; }
      .workflow-config-row input[type="checkbox"] { width: auto; }
      .workflow-config-row input,
      .workflow-config-row select {
        min-width: 0;
      }
      .workflow-media-toolbar {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 6px;
      }
      .workflow-media-upload-button {
        align-items: center;
        background: var(--blue);
        border: 1px solid var(--blue);
        border-radius: 9px;
        box-shadow: 0 8px 18px rgba(21,94,239,.16);
        color: #fff;
        display: inline-flex;
        font-size: 13px;
        font-weight: 850;
        gap: 6px;
        height: 34px;
        line-height: 1;
        padding: 0 12px;
        transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
      }
      .workflow-media-upload-button:hover {
        background: #004eeb;
        border-color: #004eeb;
        color: #fff;
      }
      .workflow-media-upload-button:focus-within {
        box-shadow: 0 0 0 3px rgba(41,112,255,.14);
      }
      .workflow-media-upload-button.is-disabled {
        cursor: not-allowed;
        opacity: .62;
        pointer-events: none;
      }
      .workflow-media-list {
        border: 1px solid var(--line);
        border-radius: 10px;
        display: grid;
        margin-top: 10px;
        overflow: hidden;
      }
      .workflow-media-empty {
        color: var(--weak);
        font-size: 12px;
        padding: 12px;
      }
      .workflow-media-row {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 8px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 10px;
      }
      .workflow-media-row:last-child { border-bottom: 0; }
      .workflow-media-badge {
        background: var(--blue-soft);
        border-radius: 999px;
        color: var(--blue);
        font-size: 11px;
        font-weight: 900;
        padding: 4px 7px;
      }
      .workflow-media-main {
        min-width: 0;
      }
      .workflow-media-main strong {
        color: var(--text-2);
        display: block;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .workflow-media-main a {
        color: var(--muted);
        display: block;
        font-size: 12px;
        margin-top: 2px;
        overflow: hidden;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .workflow-condition-editor {
        display: grid;
        gap: 12px;
      }
      .workflow-condition-case {
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 12px;
        grid-template-columns: 74px minmax(0, 1fr);
        padding: 14px 0;
      }
      .workflow-condition-case:first-child { padding-top: 0; }
      .workflow-condition-case:last-child { border-bottom: 0; }
      .workflow-condition-case-title strong {
        color: var(--text-2);
        display: block;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.2;
      }
      .workflow-condition-case-title span {
        color: var(--muted);
        display: block;
        font-size: 12px;
        font-weight: 850;
        margin-top: 3px;
      }
      .workflow-condition-case-main {
        display: grid;
        gap: 9px;
        min-width: 0;
      }
      .workflow-condition-rule {
        background: #f4f6fa;
        border: 1px solid #edf1f7;
        border-radius: 10px;
        display: grid;
        gap: 0;
        overflow: hidden;
      }
      .workflow-condition-rule-top,
      .workflow-condition-rule-bottom {
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) minmax(102px, .48fr) 30px;
        padding: 8px;
      }
      .workflow-condition-rule-bottom {
        border-top: 1px solid #e7ebf2;
        grid-template-columns: minmax(88px, .45fr) minmax(0, 1fr);
      }
      .workflow-condition-rule select,
      .workflow-condition-rule input {
        background-color: #fff;
        border-color: transparent;
        box-shadow: none;
        min-width: 0;
      }
      .workflow-condition-rule input {
        font-weight: 800;
      }
      .workflow-condition-logic {
        align-items: center;
        display: flex;
        gap: 8px;
        margin-left: -28px;
      }
      .workflow-condition-logic::before,
      .workflow-condition-logic::after {
        background: #d8dee8;
        content: "";
        flex: 0 0 20px;
        height: 1px;
      }
      .workflow-condition-logic select {
        background-color: #fff;
        border-color: var(--line);
        color: var(--blue);
        font-weight: 900;
        min-height: 28px;
        padding-bottom: 4px;
        padding-top: 4px;
        width: 86px;
      }
      .workflow-condition-case-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .workflow-condition-next {
        display: grid;
        gap: 6px;
      }
      .workflow-condition-else {
        background: var(--soft);
        border-radius: 12px;
        margin-top: 4px;
        padding: 12px;
      }
      .workflow-condition-else-head {
        color: var(--text-2);
        font-size: 14px;
        font-weight: 900;
        margin-bottom: 8px;
      }

      .modal-mask, .drawer-mask { background: rgba(16,24,40,.28); inset: 0; position: fixed; z-index: 40; }
      .modal {
        background: #fff;
        border-radius: 17px;
        box-shadow: var(--shadow);
        left: 50%;
        max-height: calc(100vh - 50px);
        max-width: calc(100vw - 32px);
        overflow: hidden;
        position: fixed;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 980px;
        z-index: 50;
      }
      .modal-head, .drawer-head {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: flex;
        height: 58px;
        justify-content: space-between;
        padding: 0 20px;
      }
      .modal-head h2, .drawer-head h2 { font-size: 18px; margin: 0; }
      .modal-body {
        display: grid;
        grid-template-columns: 1fr 380px;
        max-height: calc(100vh - 108px);
        overflow: auto;
      }
      .modal-body.single { display: block; }
      .modal-form { padding: 24px 30px 28px; }
      .log-detail-modal {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 32px);
        width: calc(100vw - 24px);
      }
      .log-detail-modal .modal-body.single {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .log-detail-modal .modal-form {
        box-sizing: border-box;
        min-width: 0;
        padding: 24px 30px 32px;
      }
      .large-text-modal { width: min(1160px, calc(100vw - 32px)); }
      .large-text-body { padding: 16px 20px; }
      .large-textarea {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 13px;
        line-height: 1.65;
        min-height: min(68vh, 680px);
        resize: vertical;
      }
      .large-textarea[readonly] {
        background: #f8fafc;
        border-color: #d0d5dd;
        color: var(--muted);
      }
      .modal-footer {
        align-items: center;
        border-top: 1px solid var(--line);
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        padding: 14px 20px;
      }
      .dataset-edit-modal .modal-body { max-height: calc(100vh - 178px); }
      .modal-preview {
        background: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(16,24,40,.04) 5px, transparent 8px);
        border-left: 1px solid var(--line);
        padding: 24px;
      }
      .type-cards { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 15px; }
      .type-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        cursor: pointer;
        padding: 13px;
      }
      .type-card.active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(41,112,255,.12); }
      .drawer {
        background: #fff;
        border-radius: 15px;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        height: calc(100% - 16px);
        overflow: hidden;
        position: fixed;
        right: 8px;
        top: 8px;
        width: 620px;
        z-index: 55;
      }
      .drawer-body { flex: 1; overflow: auto; padding: 20px; }
      .drawer-foot {
        align-items: center;
        background: var(--soft);
        border-top: 1px solid var(--line);
        display: flex;
        gap: 9px;
        justify-content: flex-end;
        padding: 13px 18px;
      }
      .version-history-mask { inset: 112px 0 0 0; }
      .version-history-drawer {
        height: calc(100vh - 120px);
        top: 112px;
        width: 420px;
      }
      .version-history-list { display: grid; gap: 10px; }
      .version-history-current,
      .version-history-item {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 12px;
      }
      .version-history-current { background: var(--blue-soft); border-color: #c7d7fe; }
      .version-history-draft { background: #fff7ed; border-color: #fed7aa; }
      .version-history-item { background: #fff; }
      .version-history-item:hover { border-color: var(--line-2); }
      .version-history-title {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        margin-bottom: 6px;
      }
      .version-history-title strong { font-size: 14px; }
      .version-history-title .row { flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
      .version-history-meta { color: var(--muted); font-size: 12px; line-height: 1.7; }
      .version-history-empty {
        border: 1px dashed var(--line-2);
        border-radius: 8px;
        color: var(--muted);
        padding: 18px;
        text-align: center;
      }
      .toast {
        background: #101828;
        border-radius: 11px;
        bottom: 20px;
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        left: 50%;
        padding: 11px 15px;
        position: fixed;
        transform: translateX(-50%);
        z-index: 90;
      }
      @media (max-width: 900px) {
        .login {
          align-items: flex-start;
          min-height: 100dvh;
          padding: 22px;
        }
        .login::after { display: none; }
        .login-shell {
          grid-template-columns: 1fr;
          max-width: 520px;
        }
        .login-hero {
          padding: 28px 26px 10px;
        }
        .brand {
          margin-bottom: 28px;
        }
        .login h1 {
          font-size: 32px;
          max-width: none;
        }
        .login p {
          font-size: 14px;
          max-width: none;
        }
        .login-card {
          border-left: 0;
        }
        .login-card-inner {
          padding: 26px;
        }
        .login-card-head {
          margin-bottom: 20px;
        }
        .login-footnote {
          display: none;
        }
        .log-detail-grid {
          grid-template-columns: 1fr;
        }
        .log-record-summary {
          grid-template-columns: auto minmax(0, 1fr);
        }
        .log-record-meta {
          grid-column: 2;
          justify-content: flex-start;
        }
        .dataset-list-body {
          grid-template-columns: 1fr;
        }
        .dataset-workspace {
          grid-template-columns: 1fr;
          overflow: auto;
        }
        .dataset-workspace-sidebar {
          border-bottom: 1px solid var(--line);
          border-right: 0;
          min-height: auto;
        }
        .dataset-workspace-nav {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .dataset-workspace-main {
          overflow: visible;
        }
        .dataset-hit-layout,
        .dataset-inline-settings-inner,
        .dataset-document-settings-page {
          grid-template-columns: 1fr;
        }
        .dataset-hit-results-pane,
        .dataset-inline-settings,
        .dataset-document-settings-preview {
          margin: 0;
          min-height: auto;
        }
        .dataset-list-toolbar {
          justify-content: flex-start;
        }
        .dataset-list-toolbar-inner {
          justify-content: flex-start;
        }
        .dataset-hit-meta {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 640px) {
        .login {
          padding: 14px;
        }
        .login-shell {
          border-radius: 8px;
        }
        .login-hero {
          padding: 24px 20px 4px;
        }
        .logo {
          height: 32px;
          width: 32px;
        }
        .brand {
          font-size: 14px;
          margin-bottom: 22px;
        }
        .login-kicker {
          font-size: 11px;
          margin-bottom: 12px;
        }
        .login h1 {
          font-size: 27px;
        }
        .login-meta {
          gap: 8px;
          margin-top: 20px;
        }
        .login-meta span {
          font-size: 11px;
          min-height: 28px;
          padding: 0 9px;
        }
        .login-card-inner {
          padding: 22px 20px 24px;
        }
        .login-card-head {
          display: block;
        }
        .login-card-head h2 {
          font-size: 22px;
        }
        .captcha-row {
          grid-template-columns: minmax(0, 1fr) 118px;
        }
        .captcha-image,
        .captcha-image-button {
          width: 118px;
        }
        .dataset-list-main {
          padding: 0 18px 28px;
        }
        .dataset-workspace-main {
          padding: 22px 18px 30px;
        }
        .dataset-workspace-nav {
          grid-template-columns: 1fr;
        }
        .dataset-section-head,
        .dataset-toolbar {
          display: grid;
        }
        .dataset-inline-settings {
          padding: 24px 18px 32px;
        }
        .dataset-card-grid {
          grid-template-columns: 1fr;
        }
        .dataset-card-footer {
          align-items: flex-start;
          flex-direction: column;
        }
        .dataset-detail-summary,
        .dataset-document-row,
        .dataset-hit-meta {
          grid-template-columns: 1fr;
        }
      }
      .mt { margin-top: 12px; }
      .mb { margin-bottom: 12px; }
      .hidden { display: none; }