:root {
      --font-cn: "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
      --font-en: Arial, sans-serif;
      --font-system: Arial, "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
      --font-body-weight: 400;
      --font-title-medium-weight: 500;
      --font-title-weight: 600;
      --font-strong-weight: 700;
      --bg: #ffffff;
      --bg-soft: #ffffff;
      --nav-bg: #f3f3f3;
      --content-bg: #ffffff;
      --nav-content-transition:
        linear-gradient(90deg, rgba(0,0,0,.075) 0, rgba(0,0,0,.034) 1px, rgba(0,0,0,.014) 5px, rgba(0,0,0,0) 14px);
      --site-bg-image: url("site-background-hd.jpg");
      --login-bg-image: url("login-tech-bg.png");
      --panel: rgba(255, 255, 255, .78);
      --panel-strong: rgba(255, 255, 255, .9);
      --surface-raised: rgba(255, 255, 255, .82);
      --surface-muted: rgba(118, 118, 128, .08);
      --surface-tint: rgba(14, 165, 233, .08);
      --separator: rgba(60, 60, 67, .18);
      --separator-soft: rgba(60, 60, 67, .10);
      --separator-strong: rgba(60, 60, 67, .28);
      --line: var(--separator);
      --line-soft: var(--separator-soft);
      --line-strong: var(--separator-strong);
      --text: #1d1d1f;
      --muted: rgba(60, 60, 67, .74);
      --muted-2: rgba(60, 60, 67, .48);
      --primary: #0877ff;
      --secondary: #19b8d6;
      --accent: #0877ff;
      --accent-hover: #0a84ff;
      --accent-soft: rgba(8, 119, 255, .10);
      --accent-line: rgba(8, 119, 255, .22);
      --accent-fill: #0877ff;
      --accent-shadow: none;
      --control-bg: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.46)), rgba(255,255,255,.62);
      --control-bg-hover: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.58)), rgba(255,255,255,.78);
      --control-active: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.44)), rgba(0,122,255,.12);
      --control-border: rgba(255,255,255,.66);
      --control-shadow: 0 10px 24px rgba(31, 62, 96, .07), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(255,255,255,.24);
      --logo-green: #2fb344;
      --logo-green-bright: #6ee77d;
      --logo-green-soft: rgba(47, 179, 68, .12);
      --logo-green-line: rgba(47, 179, 68, .24);
      --liquid-green: var(--accent-fill);
      --liquid-green-soft: var(--control-bg);
      --liquid-green-hover: var(--control-bg-hover);
      --liquid-white: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.56)), rgba(255,255,255,.76);
      --cyan: #0ea5e9;
      --green: #23b14d;
      --amber: #ff9f0a;
      --rose: #ff375f;
      --purple: #7c3aed;
      --mint: #14b8a6;
      --radius-card: 17px;
      --radius-inner: 17px;
      --radius-button: 17px;
      --shadow-card-soft: 0 7px 28px rgba(62, 95, 138, .08);
      --shadow-card: 0 8px 32px rgba(48, 104, 156, .10);
      --shadow-card-strong: 0 10px 36px rgba(48, 104, 156, .12);
      --shadow-card-hover: 0 10px 38px rgba(48, 104, 156, .14);
      --shadow-1: var(--shadow-card-soft);
      --shadow-2: var(--shadow-card);
      --shadow-3: var(--shadow-card-strong);
      --material-blur: blur(30px) saturate(190%);
      --frost-card:
        linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(246,252,255,.58) 48%, rgba(218,239,255,.46) 100%),
        radial-gradient(circle at 16% 0%, rgba(255,255,255,.86), rgba(255,255,255,0) 36%),
        radial-gradient(circle at 72% 100%, rgba(0,122,255,.12), rgba(0,122,255,0) 44%),
        rgba(255,255,255,.46);
      --frost-card-strong:
        linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(248,252,255,.66) 48%, rgba(220,240,255,.54) 100%),
        radial-gradient(circle at 16% 0%, rgba(255,255,255,.92), rgba(255,255,255,0) 38%),
        radial-gradient(circle at 72% 100%, rgba(0,122,255,.14), rgba(0,122,255,0) 46%),
        rgba(255,255,255,.56);
      --frost-border: rgba(255,255,255,.76);
      --frost-border-soft: rgba(255,255,255,.58);
      --frost-shadow: var(--shadow-card-soft);
      --frost-shadow-strong: var(--shadow-card);
      --frost-blur: blur(36px) saturate(185%);
      --sidebar-speed: .34s;
      --sidebar-ease: cubic-bezier(.22, 1, .36, 1);
	      --page-pad-x: clamp(12px, 1.7vw, 32px);
	      --page-pad-y: clamp(12px, 1.2vw, 22px);
		      --layout-gap: 13.6px;
			      --card-padding: 24.5px;
			      --step-padding: 20.4px;
			      --result-padding: 18.4px;
			      --inner-card-padding: 16.3px;
	      --sidebar-main-gap: calc(var(--layout-gap) * .8);
		      --sidebar-width: 250px;
	      --app-max-width: 2000px;
	      --home-chat-width: 1280px;
	      --luxury-home-bg:
	        linear-gradient(180deg, #ffffff 0%, #fbfaf7 46%, #f7f6f2 100%),
	        repeating-linear-gradient(116deg, rgba(198,161,95,.045) 0 1px, transparent 1px 18px);
	    }

    :root[data-font-platform="ios"] {
      --font-cn: "PingFang SC", "PingFang HK", "PingFang TC", sans-serif;
      --font-en: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "San Francisco", sans-serif;
      --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "San Francisco", "PingFang SC", "PingFang HK", "PingFang TC", sans-serif;
    }

    :root[data-font-platform="android"] {
      --font-cn: "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC", sans-serif;
      --font-en: Roboto, "Roboto Flex", sans-serif;
      --font-system: Roboto, "Roboto Flex", "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC", sans-serif;
    }

    :root[data-font-platform="macos"] {
      --font-cn: "PingFang SC", "PingFang HK", "PingFang TC", sans-serif;
      --font-en: Helvetica, "Helvetica Neue", sans-serif;
      --font-system: Helvetica, "Helvetica Neue", "PingFang SC", "PingFang HK", "PingFang TC", sans-serif;
    }

    :root[data-font-platform="windows"] {
      --font-cn: "Microsoft YaHei", "Microsoft YaHei UI", sans-serif;
      --font-en: Arial, sans-serif;
      --font-system: Arial, "Microsoft YaHei", "Microsoft YaHei UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html {
      min-height: 100%;
      background: var(--bg);
      font-family: var(--font-system);
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: var(--font-system);
      font-weight: var(--font-body-weight);
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0;
      background: var(--content-bg);
      transition: background .24s ease, color .24s ease;
      overflow-x: hidden;
    }

    button, input, select, textarea {
      font: inherit;
      font-family: var(--font-system);
    }
    button { border: 0; cursor: pointer; }

    body.login-active {
      overflow: hidden;
      background: #fffaf8;
    }

	    body:not(.login-active) {
	      background: var(--luxury-home-bg);
	    }

    body.login-active .app,
    body.login-active .modal {
      display: none;
    }

    body.login-active .mobile-tabbar,
    body.login-active .mobile-more-menu {
      display: none !important;
    }

    .login-screen {
      min-height: 100vh;
      display: none;
      position: relative;
      overflow: hidden;
      padding: clamp(28px, 5vw, 72px);
      background:
        radial-gradient(ellipse 62% 54% at -4% -5%, rgba(255, 220, 236, .82), rgba(255, 220, 236, 0) 58%),
        radial-gradient(ellipse 58% 48% at 92% 2%, rgba(255, 237, 214, .86), rgba(255, 237, 214, 0) 62%),
        radial-gradient(ellipse 48% 58% at 94% 46%, rgba(255, 213, 233, .72), rgba(255, 213, 233, 0) 64%),
        radial-gradient(ellipse 52% 44% at 47% 104%, rgba(255, 239, 222, .70), rgba(255, 239, 222, 0) 62%),
        linear-gradient(112deg, #ffffff 0%, #fffefe 34%, #fff9f2 70%, #ffffff 100%);
    }

    @supports (background-image: image-set(url("site-background-1920.webp") type("image/webp"))) {
      :root {
        --site-bg-image: image-set(
          url("site-background-1920.webp") type("image/webp"),
          url("site-background-hd.jpg") type("image/jpeg")
        );
        --login-bg-image: image-set(
          url("login-tech-bg-1440.webp") type("image/webp"),
          url("login-tech-bg.png") type("image/png")
        );
      }
    }

    @supports (background-image: image-set(url("site-background-1280.webp") type("image/webp"))) {
      @media (max-width: 760px) {
        :root {
          --site-bg-image: image-set(
            url("site-background-1280.webp") type("image/webp"),
            url("site-background-hd.jpg") type("image/jpeg")
          );
          --login-bg-image: image-set(
            url("login-tech-bg-900.webp") type("image/webp"),
            url("login-tech-bg.png") type("image/png")
          );
        }
      }

      @media (min-width: 1800px) {
        :root {
          --site-bg-image: image-set(
            url("site-background-2560.webp") type("image/webp"),
            url("site-background-hd.jpg") type("image/jpeg")
          );
        }
      }
    }

    @media (max-width: 900px), (pointer: coarse) {
      body {
        background-attachment: scroll;
      }
    }

    body.login-active .login-screen {
      display: grid;
      align-items: center;
    }

    html.auth-session-restored body.login-active {
      overflow-x: hidden;
      overflow-y: auto;
      background: var(--content-bg);
    }

    html.auth-session-restored body.login-active .login-screen {
      display: none;
    }

    .login-screen::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 72% 66% at 38% 43%, rgba(255,255,255,.92), rgba(255,255,255,.22) 52%, rgba(255,255,255,0) 76%),
        linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.14));
    }

    .login-layout {
      width: min(1400px, calc(100% - clamp(80px, 10vw, 220px)));
      margin: 0 auto;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 640px) minmax(340px, 420px);
      align-items: center;
      justify-content: space-between;
      gap: clamp(80px, 11vw, 220px);
      transform: translateY(2vh);
    }

    .login-hero {
      min-width: 0;
      display: grid;
      gap: 16px;
      color: #111827;
      justify-items: start;
    }

    .login-hero-wordmark {
      width: 200px;
      max-width: min(200px, 58vw);
      height: auto;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 18px 26px rgba(47, 179, 68, .10));
    }

    .login-hero h1 {
      margin: 0;
      max-width: none;
      font-size: clamp(40px, 4.7vw, 64px);
      line-height: 1.08;
      letter-spacing: .055em;
      font-weight: 700;
      color: #111827;
      white-space: nowrap;
    }

    .login-hero-art {
      position: relative;
      width: min(520px, 100%);
      min-height: 178px;
      margin-top: 6px;
      pointer-events: none;
    }

    .login-hero-art::before {
      content: "";
      position: absolute;
      left: -16%;
      right: 8%;
      bottom: -14px;
      height: 108px;
      border-radius: 999px;
      background:
        radial-gradient(ellipse at 36% 58%, rgba(0,122,255,.16), rgba(0,122,255,0) 62%),
        radial-gradient(ellipse at 70% 30%, rgba(52,199,89,.13), rgba(52,199,89,0) 60%);
      filter: blur(8px);
    }

    .login-hero-art svg {
      position: relative;
      z-index: 1;
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
      filter: drop-shadow(0 26px 34px rgba(33, 72, 115, .12));
    }

    .login-hero p {
      margin: 0;
      max-width: 560px;
      color: rgba(60,60,67,.74);
      font-size: clamp(16px, 1.7vw, 22px);
      line-height: 1.55;
      letter-spacing: .045em;
      font-weight: 500;
    }

    .login-card {
      position: relative;
      justify-self: end;
      width: min(420px, 100%);
      transform: translateY(-2vh);
      padding: 30px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.82);
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,253,255,.66)),
        rgba(255,255,255,.72);
      box-shadow:
        0 34px 86px rgba(48,85,120,.16),
        0 10px 28px rgba(29,29,31,.055),
        inset 0 1px 0 rgba(255,255,255,.96);
      backdrop-filter: blur(34px) saturate(185%);
      -webkit-backdrop-filter: blur(34px) saturate(185%);
      overflow: hidden;
    }

    .login-card::before {
      content: "";
      position: absolute;
      inset: 1px;
      pointer-events: none;
      border-radius: inherit;
      background:
        radial-gradient(circle at 16% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 38%),
        radial-gradient(circle at 92% 100%, rgba(0,122,255,.12), rgba(0,122,255,0) 48%);
    }

    .login-card > * {
      position: relative;
      z-index: 1;
    }

    .login-card-head {
      display: grid;
      justify-items: center;
      gap: 10px;
      margin-bottom: 24px;
      text-align: center;
    }

    .login-logo {
      width: 62px;
      height: 62px;
      border-radius: 0;
      overflow: visible;
      background: transparent;
      box-shadow: none;
    }

    .login-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 12px 18px rgba(52, 199, 89, .18));
    }

    .login-card h2 {
      margin: 0;
      color: var(--text);
      font-size: 22px;
      line-height: 1.25;
      font-weight: 700;
    }

    .login-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.6;
    }

    .login-form {
      display: grid;
      gap: 14px;
    }

    .login-field {
      display: grid;
      gap: 7px;
    }

    .login-field label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .login-error {
      min-height: 18px;
      color: var(--rose);
      font-size: 12px;
      line-height: 1.5;
    }

    .login-submit-button {
      position: relative;
      overflow: hidden;
    }

    .login-submit-button[disabled] {
      cursor: wait;
      opacity: .86;
      filter: saturate(.95);
    }

    .login-submit-content,
    .login-submit-loading {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .login-submit-loading {
      display: none;
    }

    .login-form.is-submitting .login-submit-content {
      display: none;
    }

    .login-form.is-submitting .login-submit-loading {
      display: inline-flex;
    }

    .login-spinner {
      width: 15px;
      height: 15px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,.48);
      border-top-color: #fff;
      animation: loginSpin .8s linear infinite;
    }

    @keyframes loginSpin {
      to { transform: rotate(360deg); }
    }

	    .app {
      position: relative;
      width: min(100%, var(--app-max-width));
      margin: 0 auto;
      padding: var(--page-pad-y) var(--page-pad-x) 40px;
      display: grid;
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
      column-gap: var(--sidebar-main-gap);
      row-gap: var(--layout-gap);
      transition: grid-template-columns var(--sidebar-speed) var(--sidebar-ease), column-gap var(--sidebar-speed) var(--sidebar-ease), row-gap var(--sidebar-speed) var(--sidebar-ease);
    }

    .app::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: calc(var(--page-pad-y) + 32px);
      z-index: 37;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-8px);
      background:
        linear-gradient(180deg, rgba(251,251,251,1) 0%, rgba(251,251,251,.98) 64%, rgba(251,251,251,0) 100%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,0));
      backdrop-filter: blur(30px) saturate(180%);
      -webkit-backdrop-filter: blur(30px) saturate(180%);
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
      transition: opacity .22s ease, transform .22s ease;
    }

    .app.is-scrolled::before {
      opacity: 1;
      transform: translateY(0);
    }

    .glass {
      position: relative;
      border: 1px solid var(--frost-border);
      border-radius: var(--radius-card);
      background: var(--frost-card);
      box-shadow: var(--frost-shadow);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }

    .glass::before,
    .card::before,
    .side-card::before,
    .step-card::before,
    .result-card::before,
    .file-input::before,
    .table-wrap::before,
    .empty::before,
    .modal-box::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 50% 100%, rgba(179,241,244,.34), rgba(179,241,244,0) 56%);
      opacity: .72;
      z-index: 0;
    }

    .glass > *,
    .card > *,
    .side-card > *,
    .step-card > *,
    .result-card > *,
    .file-input > *,
    .table-wrap > *,
    .empty > *,
    .modal-box > * {
      position: relative;
      z-index: 1;
    }

    .side-card,
    .step-card,
    .result-card,
    .table-wrap,
    .empty,
    .modal-box {
      position: relative;
    }

    .sidebar {
      position: sticky;
      top: var(--page-pad-y);
      height: calc(100dvh - clamp(24px, 4vh, 64px));
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: var(--layout-gap);
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: none;
      background: var(--nav-bg);
      border: 1px solid rgba(60,60,67,.06);
      box-shadow: inset -1px 0 0 rgba(60,60,67,.035);
      transition: padding var(--sidebar-speed) var(--sidebar-ease), gap var(--sidebar-speed) var(--sidebar-ease), width var(--sidebar-speed) var(--sidebar-ease), transform var(--sidebar-speed) var(--sidebar-ease);
    }

    .brand,
    .nav,
    .side-card,
    .sidebar-token-card,
    .sidebar-session,
    .sidebar-footer {
      flex-shrink: 0;
    }

    .sidebar::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
      min-height: 56px;
      padding: 2px 4px 14px;
      border-bottom: 1px solid var(--separator-soft);
      transition: padding var(--sidebar-speed) var(--sidebar-ease), gap var(--sidebar-speed) var(--sidebar-ease);
    }

    .brand-copy {
      min-width: 0;
      flex: 1 1 auto;
      max-width: 180px;
      opacity: 1;
      transform: translateX(0);
      overflow: hidden;
      visibility: visible;
      max-height: 56px;
      white-space: nowrap;
      transition:
        opacity .22s ease .08s,
        transform var(--sidebar-speed) var(--sidebar-ease),
        flex-basis var(--sidebar-speed) var(--sidebar-ease),
        max-width var(--sidebar-speed) var(--sidebar-ease),
        max-height var(--sidebar-speed) var(--sidebar-ease),
        visibility 0s linear 0s;
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #fff;
      background: var(--liquid-white);
      box-shadow: 0 10px 24px rgba(0,122,255,.10), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(0,122,255,.07);
      overflow: hidden;
      transition: width var(--sidebar-speed) var(--sidebar-ease), height var(--sidebar-speed) var(--sidebar-ease), transform var(--sidebar-speed) var(--sidebar-ease);
    }

    .brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .brand h1,
    .page-title h2,
    .card h3,
    .section-title h3,
    .modal-title {
      font-weight: 700;
      letter-spacing: 0;
    }

    .brand h1 {
      margin: 0;
      font-size: 16px;
      line-height: 1.25;
      color: var(--text);
    }

    .brand p,
    .page-title p,
    .hint,
    .muted {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .brand p { font-size: 12px; }

    .sidebar-toggle {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      display: grid;
      place-items: center;
      align-self: flex-end;
      border-radius: 12px;
      color: var(--logo-green);
      background: var(--control-bg);
      border: 1px solid var(--control-border);
      box-shadow: var(--control-shadow);
      transition:
        width var(--sidebar-speed) var(--sidebar-ease),
        height var(--sidebar-speed) var(--sidebar-ease),
        margin var(--sidebar-speed) var(--sidebar-ease),
        transform var(--sidebar-speed) var(--sidebar-ease),
        background .18s ease,
        box-shadow .18s ease;
    }

    .sidebar-toggle:hover {
      background: var(--control-bg-hover);
      box-shadow: 0 10px 22px rgba(0,122,255,.10), inset 0 1px 0 rgba(255,255,255,.92);
    }

    .sidebar-toggle .icon {
      transition: transform var(--sidebar-speed) var(--sidebar-ease);
    }

    @media (min-width: 1121px) {
      .app {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        column-gap: var(--sidebar-main-gap);
      }

      .sidebar {
        position: fixed;
        left: max(var(--page-pad-x), calc((100vw - var(--app-max-width)) / 2 + var(--page-pad-x)));
        top: var(--page-pad-y);
        width: var(--sidebar-width);
        height: calc(100dvh - var(--page-pad-y) - var(--page-pad-y));
        transform: none;
        z-index: 40;
      }

      .main {
        grid-column: 2;
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      .topbar,
      #content,
      .workspace,
      .create-agent-layout,
      .comment-generator-layout,
      .history-layout,
      .settings-grid,
      .library-main-grid,
      .output-stack {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      .app.sidebar-collapsed {
        grid-template-columns: 76px minmax(0, 1fr);
      }

      .app.sidebar-collapsed .sidebar {
        width: 76px;
        padding: 14px 10px;
        align-items: center;
        gap: 0;
      }

      .app.sidebar-collapsed .brand {
        width: 100%;
        justify-content: center;
        gap: 0;
        padding: 2px 0 12px;
      }

      .app.sidebar-collapsed .brand-copy {
        flex: 0 0 0;
        max-width: 0;
        max-height: 0;
        opacity: 0;
        transform: translateX(-8px);
        visibility: hidden;
        transition:
          opacity .16s ease,
          transform var(--sidebar-speed) var(--sidebar-ease),
          flex-basis var(--sidebar-speed) var(--sidebar-ease),
          max-width var(--sidebar-speed) var(--sidebar-ease),
          max-height var(--sidebar-speed) var(--sidebar-ease),
          visibility 0s linear .18s;
      }

      .app.sidebar-collapsed .brand-mark {
        width: 42px;
        height: 42px;
      }

      .app.sidebar-collapsed .sidebar-toggle {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        margin-top: 0;
        align-self: center;
      }

      .app.sidebar-collapsed .sidebar-toggle .icon {
        transform: rotate(180deg);
      }

      .app.sidebar-collapsed .nav {
        width: 100%;
        margin-top: 12px;
        margin-bottom: auto;
      }

      .app.sidebar-collapsed .nav-button {
        min-height: 48px;
        grid-template-columns: minmax(0, 1fr) 0fr;
        justify-items: center;
        gap: 0;
        padding: 0;
      }

      .app.sidebar-collapsed .nav-button .icon {
        width: 21px;
        height: 21px;
      }

      .app.sidebar-collapsed .nav-button span {
        max-width: 0;
        opacity: 0;
        transform: translateX(-8px);
        visibility: hidden;
        transition:
          opacity .16s ease,
          transform var(--sidebar-speed) var(--sidebar-ease),
          max-width var(--sidebar-speed) var(--sidebar-ease),
          visibility 0s linear .18s;
      }

    .app.sidebar-collapsed .side-card {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      margin-top: 0;
        opacity: 0;
        transform: translateY(12px) scale(.97);
        border-color: transparent;
        box-shadow: none;
        pointer-events: none;
      }

      .app.sidebar-collapsed .sidebar-session {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
      }

      .app.sidebar-collapsed .sidebar-version {
        flex-basis: 0;
        max-width: 0;
        max-height: 0;
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
        opacity: 0;
        transform: translateY(8px);
        visibility: hidden;
      }

      .app.sidebar-collapsed .sidebar-footer {
        width: 100%;
        margin-top: auto;
        gap: 0;
        justify-content: center;
      }

    }

    .nav {
      display: grid;
      gap: 4px;
    }

    .nav-button {
      width: 100%;
      min-height: 44px;
      position: relative;
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      border-radius: 12px;
      color: var(--text);
      background: transparent;
      border: 1px solid transparent;
      box-shadow: none;
      overflow: hidden;
      text-align: left;
      isolation: isolate;
      transition:
        color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease,
        grid-template-columns var(--sidebar-speed) var(--sidebar-ease),
        gap var(--sidebar-speed) var(--sidebar-ease),
        padding var(--sidebar-speed) var(--sidebar-ease),
        min-height var(--sidebar-speed) var(--sidebar-ease);
    }

    .nav-button:not(.active) {
      color: var(--text);
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      transform: none;
    }

    .nav-button:hover {
      color: var(--accent);
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }

    .nav-button.active {
      color: var(--text);
      background: rgba(60,60,67,.10);
      border-color: transparent;
      box-shadow: none;
      transform: none;
      z-index: 1;
    }

    .nav-button.active::before {
      display: none;
    }

    .app.sidebar-collapsed .sidebar-token-card {
      max-height: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      margin-top: 0 !important;
      opacity: 0 !important;
      transform: translateY(10px) scale(.97);
      border-color: transparent !important;
      box-shadow: none !important;
      pointer-events: none !important;
    }

    .nav-button.active::after {
      display: none;
    }

    .nav-button span {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 600;
      font-size: 13px;
      position: relative;
      z-index: 1;
      max-width: 180px;
      opacity: 1;
      transform: translateX(0);
      visibility: visible;
      transition:
        opacity .22s ease .08s,
        transform var(--sidebar-speed) var(--sidebar-ease),
        max-width var(--sidebar-speed) var(--sidebar-ease),
        visibility 0s linear 0s;
    }

    .nav-button .icon {
      width: 19px;
      height: 19px;
      position: relative;
      z-index: 1;
      transition: width var(--sidebar-speed) var(--sidebar-ease), height var(--sidebar-speed) var(--sidebar-ease), transform var(--sidebar-speed) var(--sidebar-ease);
    }

    .side-card {
      padding: 14px;
      display: grid;
      margin-top: auto;
      margin-bottom: 0;
      gap: 12px;
      background: var(--frost-card);
      border: 1px solid var(--frost-border-soft);
      border-radius: var(--radius-inner);
      box-shadow: var(--frost-shadow);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
      max-height: 260px;
      opacity: 1;
      transform: translateY(0) scale(1);
      overflow: hidden;
      transition:
        max-height var(--sidebar-speed) var(--sidebar-ease),
        padding var(--sidebar-speed) var(--sidebar-ease),
        margin var(--sidebar-speed) var(--sidebar-ease),
        opacity .22s ease .08s,
        transform var(--sidebar-speed) var(--sidebar-ease),
        border-color .22s ease,
        box-shadow .22s ease;
    }

    .status-line {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .status-line b {
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
    }

    .sidebar-token-card {
      width: 100%;
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--frost-border-soft);
      border-radius: var(--radius-inner);
      background: var(--frost-card);
      box-shadow: var(--frost-shadow);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
      max-height: 220px;
      opacity: 1;
      transform: translateY(0) scale(1);
      overflow: hidden;
      transition:
        max-height var(--sidebar-speed) var(--sidebar-ease),
        padding var(--sidebar-speed) var(--sidebar-ease),
        margin var(--sidebar-speed) var(--sidebar-ease),
        opacity .22s ease .08s,
        transform var(--sidebar-speed) var(--sidebar-ease),
        border-color .22s ease,
        box-shadow .22s ease;
    }

    .token-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.3;
    }

    .token-card-value {
      color: var(--text);
      font-size: 24px;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .token-card-sub {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;
    }

    .token-range-tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
    }

    .token-range-tab {
      min-height: 28px;
      padding: 0;
      border: 0;
      border-radius: 10px;
      color: var(--muted);
      background: rgba(255,255,255,.28);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.60);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      pointer-events: auto;
    }

    .token-range-tab.active {
      color: var(--accent);
      background: rgba(0,122,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
    }

    .app.sidebar-collapsed .sidebar-token-card {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      margin-top: 0;
      opacity: 0;
      transform: translateY(10px) scale(.97);
      border-color: transparent;
      box-shadow: none;
      pointer-events: none;
    }

    .app.sidebar-collapsed .sidebar-token-card * {
      pointer-events: none;
    }

    .app.sidebar-collapsed #tokenUsageCard.sidebar-token-card {
      display: none !important;
    }

    .app:not(.sidebar-collapsed) #tokenUsageCard.sidebar-token-card {
      pointer-events: auto;
    }

    .sidebar-session {
      width: 100%;
      max-height: 52px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      padding: 8px;
      border: 1px solid var(--frost-border-soft);
      border-radius: var(--radius-inner);
      background: rgba(255,255,255,.48);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
      overflow: hidden;
      opacity: 1;
      transform: translateY(0);
      transition:
        max-height var(--sidebar-speed) var(--sidebar-ease),
        padding var(--sidebar-speed) var(--sidebar-ease),
        opacity .2s ease,
        transform var(--sidebar-speed) var(--sidebar-ease);
    }

	    .sidebar-user {
	      min-width: 0;
	      min-height: 34px;
	      width: 100%;
	      display: inline-flex;
	      align-items: center;
	      justify-content: flex-start;
	      gap: 6px;
	      padding: 0 6px;
	      border: 0;
	      border-radius: 12px;
	      appearance: none;
	      -webkit-appearance: none;
	      color: var(--muted);
	      background: transparent;
	      font-size: 11px;
	      font-weight: 600;
	      text-align: left;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	      cursor: pointer;
	      transition: background .16s ease, color .16s ease;
	    }

	    .sidebar-user:hover {
	      color: var(--ink);
	      background: rgba(255,255,255,.62);
	    }

	    .sidebar-user span {
	      min-width: 0;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	    }

	    .sidebar-user .icon {
	      flex: 0 0 auto;
      width: 15px;
      height: 15px;
    }

    .logout-button {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 0 10px;
      border: 0;
      border-radius: 12px;
      color: var(--accent);
      background: var(--control-bg);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 18px rgba(0,122,255,.08);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .logout-button .icon {
      width: 16px;
      height: 16px;
    }

    .sidebar-version {
      min-width: 0;
      max-height: 28px;
      flex: 1 1 auto;
      padding: 0 8px;
      color: var(--muted-2);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0;
      white-space: nowrap;
      opacity: .78;
      transform: translateY(0);
      visibility: visible;
      transition:
        max-height var(--sidebar-speed) var(--sidebar-ease),
        margin var(--sidebar-speed) var(--sidebar-ease),
        opacity .18s ease,
        transform var(--sidebar-speed) var(--sidebar-ease),
        visibility 0s linear 0s;
    }

    .sidebar-version.is-admin-editable {
      cursor: text;
    }

    .sidebar-version.is-admin-editable:hover {
      color: rgba(29, 29, 31, .64);
      opacity: .92;
    }

    .sidebar-version.is-editing {
      max-height: 32px;
      padding: 0 4px;
      opacity: 1;
    }

    .sidebar-version-input {
      width: min(148px, 100%);
      height: 24px;
      padding: 0 7px;
      border: 1px solid rgba(0,122,255,.24);
      border-radius: 8px;
      color: var(--text);
      background: rgba(255,255,255,.92);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      line-height: 24px;
      outline: none;
    }

    .sidebar-footer {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 0;
      padding: 0 0 2px;
      transition:
        margin var(--sidebar-speed) var(--sidebar-ease),
        justify-content var(--sidebar-speed) var(--sidebar-ease);
    }

    .mobile-logout-button,
    .mobile-tabbar,
    .mobile-more-menu {
      display: none;
    }

    .main {
      position: relative;
      min-width: 0;
      display: grid;
      gap: var(--layout-gap);
      background: var(--content-bg);
      isolation: isolate;
    }

	    body:not(.login-active) .main {
	      background: var(--luxury-home-bg);
	    }

	    body:not(.login-active) .workspace {
	      background: transparent;
	    }

	    body:not(.login-active):not(.home-screen) .main::before,
	    body:not(.login-active):not(.home-screen) .main::after {
	      content: "";
	      position: absolute;
	      pointer-events: none;
	      z-index: 0;
	    }

	    body:not(.login-active):not(.home-screen) .main::before {
	      width: 92%;
	      height: clamp(260px, 36vh, 430px);
	      left: 4%;
	      top: clamp(86px, 12vh, 150px);
	      opacity: .72;
	      background:
	        linear-gradient(104deg,
	          rgba(255,255,255,0) 0 18%,
	          rgba(255,255,255,.72) 30%,
	          rgba(226,211,188,.30) 42%,
	          rgba(201,137,139,.12) 53%,
	          rgba(158,184,170,.13) 64%,
	          rgba(255,255,255,0) 82%),
	        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
	      transform: translate3d(0, 0, 0) skewY(-7deg);
	      animation: luxuryPearlVeil 18s cubic-bezier(.32,.72,.18,1) infinite alternate;
	    }

	    body:not(.login-active):not(.home-screen) .main::after {
	      left: clamp(28px, 11vw, 190px);
	      right: clamp(28px, 11vw, 190px);
	      top: clamp(344px, 42vh, 560px);
	      height: 1px;
	      background: linear-gradient(90deg,
	        rgba(22,20,18,0),
	        rgba(22,20,18,.18),
	        rgba(198,161,95,.46),
	        rgba(158,184,170,.28),
	        rgba(22,20,18,0));
	      opacity: .58;
	      transform-origin: center;
	      animation: luxuryHairlinePulse 6.8s cubic-bezier(.32,.72,.18,1) infinite;
	    }

	    body:not(.login-active) .topbar,
	    body:not(.login-active) .workspace {
	      position: relative;
	      z-index: 1;
	    }

    .topbar {
      position: sticky;
      top: var(--page-pad-y);
      z-index: 320;
      min-height: 106px;
      padding: 24px 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      overflow: visible;
      isolation: isolate;
      background:
        linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(248,252,255,.74) 50%, rgba(226,242,255,.66) 100%),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.94), rgba(255,255,255,0) 36%),
        radial-gradient(circle at 74% 100%, rgba(0,122,255,.13), rgba(0,122,255,0) 48%),
        rgba(255,255,255,.66);
      backdrop-filter: blur(42px) saturate(190%);
      -webkit-backdrop-filter: blur(42px) saturate(190%);
      transition: background .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .topbar[hidden] {
      display: none !important;
    }

    .topbar::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: .42;
      background:
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(249,253,255,.82) 52%, rgba(231,245,255,.72) 100%),
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.90), rgba(255,255,255,0) 38%);
      backdrop-filter: blur(32px) saturate(185%);
      -webkit-backdrop-filter: blur(32px) saturate(185%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,122,255,.06);
      transition: opacity .24s ease;
    }

    .topbar::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 100%;
      height: 24px;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-4px);
      border-radius: 0 0 var(--radius-card) var(--radius-card);
      background:
        linear-gradient(180deg, rgba(248,252,255,.42) 0%, rgba(230,244,255,.18) 50%, rgba(230,244,255,0) 100%),
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.52), rgba(255,255,255,0) 76%);
      backdrop-filter: blur(8px) saturate(140%);
      -webkit-backdrop-filter: blur(8px) saturate(140%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.24) 58%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.24) 58%, rgba(0,0,0,0) 100%);
      transition: opacity .24s ease, transform .24s ease;
    }

    .app.is-scrolled .topbar {
      border-color: rgba(255,255,255,.90);
      background:
        linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,253,255,.99) 52%, rgba(241,249,255,.98) 100%),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 38%),
        radial-gradient(circle at 74% 100%, rgba(0,122,255,.10), rgba(0,122,255,0) 50%),
        rgba(255,255,255,.98);
      box-shadow:
        0 28px 70px rgba(48, 85, 120, .13),
        0 10px 26px rgba(29, 29, 31, .055),
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 0 rgba(0,122,255,.08);
    }

    .app.is-scrolled .topbar::before {
      opacity: 1;
    }

    .app.is-scrolled .topbar::after {
      opacity: .72;
      transform: translateY(0);
    }

    .page-heading {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .page-title h2 {
      margin: 0 0 6px;
      font-size: 32px;
      line-height: 1.12;
      color: var(--text);
    }

    .page-title {
      min-width: 0;
    }

    .page-title p {
      max-width: 760px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.62;
    }

    .topbar.has-hero {
      min-height: 106px;
      padding-right: 22px;
      gap: 22px;
    }

    .topbar.has-hero .page-heading {
      flex: 1 1 auto;
    }

    .topbar.has-hero .page-title p {
      max-width: 700px;
    }

    .hero-visual {
      position: relative;
      z-index: 1;
      flex: 0 0 clamp(310px, 28vw, 440px);
      height: 112px;
      display: none;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      overflow: hidden;
      border-radius: 24px;
      background:
        radial-gradient(circle at 12% 20%, rgba(255, 209, 102, .30), rgba(255, 209, 102, 0) 30%),
        radial-gradient(circle at 48% 86%, rgba(52, 199, 89, .22), rgba(52, 199, 89, 0) 34%),
        linear-gradient(135deg, rgba(255,255,255,.60), rgba(237,250,238,.36));
      border: 1px solid rgba(255,255,255,.66);
      box-shadow:
        0 20px 46px rgba(52, 199, 89, .12),
        inset 0 1px 0 rgba(255,255,255,.86);
    }

    .topbar.has-hero .hero-visual {
      display: flex;
    }

    .hero-visual[hidden] {
      display: none !important;
    }

    .hero-visual::before,
    .hero-visual::after {
      content: "";
      position: absolute;
      pointer-events: none;
      border-radius: 999px;
    }

    .hero-visual::before {
      width: 170px;
      height: 170px;
      right: -42px;
      bottom: -92px;
      background: rgba(52, 199, 89, .18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
    }

    .hero-visual::after {
      width: 54px;
      height: 54px;
      left: 104px;
      top: 12px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.22)),
        rgba(0,122,255,.12);
      box-shadow: 0 12px 24px rgba(0,122,255,.10);
    }

    .hero-chip {
      position: absolute;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 8px;
      border-radius: 999px;
      color: #185b27;
      background: rgba(234, 255, 226, .82);
      border: 1px solid rgba(52, 199, 89, .26);
      box-shadow: 0 10px 22px rgba(52, 199, 89, .13), inset 0 1px 0 rgba(255,255,255,.82);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }

    .hero-chip.one {
      left: 24px;
      bottom: 17px;
      transform: rotate(-7deg);
    }

    .hero-chip.two {
      right: 132px;
      top: 15px;
      color: #7a4700;
      background: rgba(255, 246, 218, .88);
      border-color: rgba(255, 159, 10, .24);
      transform: rotate(6deg);
    }

    .hero-dots {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(52,199,89,.26) 0 2px, transparent 2.5px),
        radial-gradient(circle, rgba(0,122,255,.18) 0 1.5px, transparent 2px);
      background-position: 20px 18px, 72px 70px;
      background-size: 58px 46px, 64px 52px;
      mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.76) 56%, transparent 100%);
    }

    .topbar.has-hero {
      position: sticky;
      z-index: 320;
      min-height: 106px;
      padding-right: clamp(240px, 19vw, 344px);
      overflow: hidden;
    }

    .topbar.has-hero .page-heading,
    .topbar.has-hero .top-actions {
      position: relative;
      z-index: 3;
    }

    .topbar.has-hero .page-title p {
      max-width: 1120px;
    }

    .hero-visual {
      position: absolute;
      inset: 6px 12px 6px auto;
      z-index: 2;
      width: clamp(496px, 40vw, 688px);
      height: auto;
      display: none;
      pointer-events: none;
      overflow: visible;
      border-radius: 0;
      border: 0;
      background: none;
      box-shadow: none;
      isolation: isolate;
    }

    .topbar.has-hero .hero-visual {
      display: block;
    }

    .hero-visual::before {
      width: min(608px, 88%);
      height: 102px;
      right: -18px;
      bottom: -26px;
      opacity: .76;
      background:
        radial-gradient(circle at 72% 48%, hsla(var(--hero-hue, 132), 62%, 46%, .22), hsla(var(--hero-hue, 132), 62%, 46%, 0) 64%),
        radial-gradient(circle at 28% 68%, hsla(var(--hero-warm-hue, 42), 96%, 58%, .18), hsla(var(--hero-warm-hue, 42), 96%, 58%, 0) 56%),
        linear-gradient(90deg, hsla(var(--hero-hue, 132), 62%, 46%, 0), hsla(var(--hero-hue, 132), 62%, 46%, .10));
      box-shadow: none;
      filter: blur(.2px);
    }

    .hero-visual::after {
      width: min(256px, 38%);
      height: 99px;
      left: 34px;
      top: -8px;
      opacity: .44;
      background:
        radial-gradient(circle at 46% 44%, rgba(255,255,255,.82), rgba(255,255,255,.18) 54%, rgba(255,255,255,0) 70%),
        hsla(var(--hero-hue, 132), 62%, 46%, .12);
      box-shadow: none;
    }

    .hero-dots {
      inset: 0;
      opacity: .82;
      background-image:
        radial-gradient(circle, rgba(52,199,89,.24) 0 2px, transparent 2.5px),
        radial-gradient(circle, rgba(255,159,10,.20) 0 1.5px, transparent 2px),
        radial-gradient(circle, rgba(0,122,255,.16) 0 1.5px, transparent 2px);
      background-position: 54px 20px, 260px 18px, 118px 76px;
      background-size: 74px 48px, 94px 56px, 86px 52px;
      mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.48) 12%, rgba(0,0,0,.86) 28%, #000 100%);
    }

    .hero-j-mark {
      position: absolute;
      z-index: 1;
      right: 18px;
      top: -4px;
      width: min(176px, 28%);
      height: 101px;
      object-fit: contain;
      opacity: .18;
      mix-blend-mode: multiply;
      filter: hue-rotate(var(--hero-logo-rotate, 0deg)) saturate(1.16) drop-shadow(0 18px 28px rgba(52,199,89,.14));
      transform: rotate(-8deg);
    }

    .hero-chip {
      z-index: 5;
      border-radius: 999px;
      backdrop-filter: blur(18px) saturate(180%);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
    }

    .hero-chip.one {
      left: 18%;
      bottom: 18px;
      transform: rotate(-5deg);
    }

    .hero-chip.two {
      right: 27%;
      top: 14px;
      transform: rotate(5deg);
    }

    .hero-chip.three {
      left: 34%;
      top: 40px;
      color: #1554a8;
      background: rgba(228, 241, 255, .84);
      border-color: rgba(0, 122, 255, .22);
      box-shadow: 0 10px 22px rgba(0, 122, 255, .10), inset 0 1px 0 rgba(255,255,255,.82);
      transform: rotate(3deg);
    }

    .hero-chip.four {
      left: 54%;
      bottom: 14px;
      color: #185b27;
      background: rgba(232, 255, 227, .82);
      border-color: rgba(52, 199, 89, .25);
      transform: translateX(-50%) rotate(-2deg);
    }

    .hero-chip.five {
      right: 9%;
      bottom: 34px;
      color: #7a3f00;
      background: rgba(255, 241, 214, .86);
      border-color: rgba(255, 159, 10, .26);
      box-shadow: 0 10px 22px rgba(255, 159, 10, .10), inset 0 1px 0 rgba(255,255,255,.82);
      transform: rotate(-4deg);
    }

    .topbar[data-hero-theme="rewrite"] .hero-visual {
      --hero-hue: 215;
      --hero-warm-hue: 172;
      --hero-logo-rotate: 86deg;
    }

    .topbar[data-hero-theme="comment"] .hero-visual {
      --hero-hue: 28;
      --hero-warm-hue: 132;
      --hero-logo-rotate: 152deg;
    }

    .topbar[data-hero-theme="history"] .hero-visual {
      --hero-hue: 262;
      --hero-warm-hue: 205;
      --hero-logo-rotate: 128deg;
    }

    .topbar[data-hero-theme="favorites"] .hero-visual {
      --hero-hue: 45;
      --hero-warm-hue: 340;
      --hero-logo-rotate: 184deg;
    }

    .topbar[data-hero-theme="library"] .hero-visual {
      --hero-hue: 172;
      --hero-warm-hue: 132;
      --hero-logo-rotate: 64deg;
    }

    .topbar[data-hero-theme="users"] .hero-visual {
      --hero-hue: 205;
      --hero-warm-hue: 262;
      --hero-logo-rotate: 96deg;
    }

    .topbar[data-hero-theme="settings"] .hero-visual {
      --hero-hue: 248;
      --hero-warm-hue: 28;
      --hero-logo-rotate: 118deg;
    }

    .topbar[data-hero-theme="rewrite"] .hero-chip.three,
    .topbar[data-hero-theme="history"] .hero-chip.three,
    .topbar[data-hero-theme="users"] .hero-chip.three,
    .topbar[data-hero-theme="settings"] .hero-chip.three {
      color: #2f4db4;
      background: rgba(232, 236, 255, .84);
      border-color: rgba(88, 86, 214, .22);
    }

    .topbar[data-hero-theme="comment"] .hero-chip.one,
    .topbar[data-hero-theme="comment"] .hero-chip.five {
      color: #8a3d00;
      background: rgba(255, 238, 218, .86);
      border-color: rgba(255, 149, 0, .24);
    }

    .topbar[data-hero-theme="favorites"] .hero-chip.two,
    .topbar[data-hero-theme="favorites"] .hero-chip.five {
      color: #8a5a00;
      background: rgba(255, 247, 213, .88);
      border-color: rgba(255, 204, 0, .28);
    }

    .topbar[data-hero-theme="library"] .hero-chip.three,
    .topbar[data-hero-theme="library"] .hero-chip.four {
      color: #0f6558;
      background: rgba(221, 251, 246, .84);
      border-color: rgba(48, 176, 199, .24);
    }

    .top-actions,
    .row-actions,
    .chip-row,
    .record-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

	    .top-actions {
	      flex: 1 1 auto;
	      min-width: 280px;
	      justify-content: flex-end;
	    }

	    .create-script-controls {
	      position: relative;
	      display: grid;
	      grid-template-columns: minmax(150px, 1fr) minmax(240px, 1fr) max-content;
	      gap: 14px 16px;
	      align-items: end;
	    }

	    .create-script-controls.select-layer-open {
	      z-index: 180;
	    }

	    .create-script-controls .field {
	      margin-bottom: 0;
	      min-width: 0;
	    }

	    .create-script-action {
	      margin: 0;
	      align-self: end;
	      flex-wrap: nowrap;
	    }

	    .create-script-action .button {
	      height: 44px;
	      min-height: 44px;
	      padding-inline: 18px;
	      white-space: nowrap;
	    }

	    .top-progress-slot:empty {
	      display: none;
	    }

    .top-progress-slot:not(:empty) {
      flex: 1 1 1104px;
      width: min(1336px, calc(100vw - 72px));
      max-width: 1394px;
      margin-left: auto;
    }

    .top-progress-slot .ai-progress-card {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .top-progress-slot .ai-thought-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
    }

    .top-progress-slot .ai-progress-track {
      background: rgba(255,255,255,.42);
    }

    .inline-ai-progress {
      display: none;
    }

    .section-title.with-progress {
      align-items: center;
    }

    .result-progress-slot {
      flex: 0 1 475px;
      min-width: 343px;
      max-width: 554px;
      margin-left: auto;
    }

    .result-progress-slot:has(.ai-progress-slot:empty) {
      display: none;
    }

    .result-progress-slot .ai-progress-slot:not(:empty) {
      margin: 0;
    }

    .result-progress-slot .ai-progress-card {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .result-progress-slot .ai-progress-head {
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      margin-bottom: 7px;
    }

    .result-progress-slot .ai-progress-title {
      font-size: 12px;
      white-space: nowrap;
    }

    .result-progress-slot .ai-progress-track {
      width: 100%;
      height: 5px;
    }

    .comment-result-panel .section-title.with-progress {
      position: relative;
      display: block;
      align-items: flex-start;
      padding-right: 408px;
    }

    .comment-result-panel .section-title.with-progress > div:first-child {
      width: 100%;
      max-width: none;
    }

    .comment-result-panel .section-title.with-progress > div:first-child p {
      width: 100%;
      max-width: none;
    }

    .comment-result-panel .result-progress-slot {
      position: absolute;
      top: 0;
      right: 0;
      width: 466px;
      flex: 0 0 466px;
      min-width: 337px;
      max-width: 466px;
      padding-top: 2px;
    }

    .comment-result-panel .result-progress-slot .ai-progress-card {
      width: 100%;
      margin-left: 0;
    }

    .training-actions {
      margin: 8px 0 22px;
      align-items: center;
    }

    .button {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      border-radius: var(--radius-button);
      color: var(--text);
      background: var(--control-bg);
      border: 1px solid var(--control-border);
      box-shadow: var(--control-shadow);
      font-weight: 600;
      font-size: 13px;
      white-space: nowrap;
      transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .button:hover {
      color: var(--accent);
      background: var(--control-bg-hover);
      border-color: rgba(0,122,255,.20);
      box-shadow: none;
    }

    .button.primary {
      background: var(--accent-fill);
      border-color: transparent;
      box-shadow: var(--accent-shadow);
      color: #fff;
    }

    .button.primary:hover {
      color: #fff;
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      box-shadow: none;
    }

    .button.primary:active {
      background: #066ee8;
      border-color: #066ee8;
      box-shadow: none;
    }

    .button.primary,
    .mini-button.primary,
    .file-input.has-file .file-action {
      border-color: transparent;
    }

    .button.danger { color: var(--rose); border-color: rgba(255,55,95,.22); }
    .button.success { color: var(--green); border-color: rgba(35,177,77,.22); }
    .button.icon-only {
      width: 40px;
      min-width: 40px;
      padding: 0;
      flex: 0 0 40px;
    }

    .button:focus-visible,
    .mini-button:focus-visible,
    .nav-button:focus-visible,
    .file-input:focus-within {
      outline: 2px solid rgba(0,122,255,.16);
      outline-offset: 2px;
    }

    .icon {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      stroke: currentColor;
      stroke-width: 1.9;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .metric {
      padding: 18px;
      min-height: 130px;
      display: grid;
      align-content: space-between;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }

    .metric::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,0) 42%),
        radial-gradient(circle at 50% 100%, rgba(185,241,243,.34), rgba(185,241,243,0) 58%);
    }

    .metric span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    .metric b {
      font-size: 28px;
      line-height: 1;
      letter-spacing: 0;
      color: var(--text);
    }

    .workspace {
      display: grid;
      gap: var(--layout-gap);
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--layout-gap);
      align-items: start;
    }

    .split-1-2 {
      grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
    }

    .comment-generator-layout {
      align-items: start;
      height: auto;
      min-height: 0;
      overflow: visible;
    }

    .comment-generator-layout > .card {
      margin-top: 0;
    }

    .comment-flow-panel {
      position: static;
      align-self: start;
      max-height: none;
      overflow: visible;
      scrollbar-width: thin;
    }

    .comment-result-panel {
      align-self: start;
      min-width: 0;
      max-height: none;
      overflow: visible;
    }

    .library-main-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .library-main-grid > .card:first-child {
      grid-column: span 2;
    }

    .library-main-grid > .card:last-child {
      grid-column: span 1;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .card {
      position: relative;
      container-type: inline-size;
      padding: 22px;
      border: 1px solid var(--frost-border);
      border-radius: var(--radius-card);
      background: var(--frost-card);
      box-shadow: var(--frost-shadow);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }

    .card.strong {
      background: var(--frost-card-strong);
      box-shadow: var(--frost-shadow-strong);
    }

    .glass,
    .card,
    .card.strong,
    .topbar,
    .side-card,
    .step-card,
    .result-card,
    .history-card,
    .favorite-card,
    .learning-card,
    .recent-product-card,
    .ranking-card,
    .product-insight-block,
    .structure-panel,
    .structure-item,
    .learning-result-card,
    .selected-doc-card,
    .upload-file-card,
    .selected-file-card,
    .workbench-entry-card,
    .assistant-message,
    .assistant-empty,
    .split-note,
    .compact-empty,
    .empty,
    .table-wrap,
    .modal-box,
    [class$="-card"],
    [class*="-card "] {
      box-shadow: var(--shadow-card-soft) !important;
    }

    .card.strong,
    .modal-box,
    .topbar,
    .file-input,
    .upload-file-card,
    .selected-file-card,
    .selected-doc-card,
    .assistant-empty,
    .table-wrap {
      box-shadow: var(--shadow-card) !important;
    }

    .card h3,
    .section-title h3 {
      margin: 0;
      font-size: 18px;
      line-height: 1.3;
      color: var(--text);
    }

    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 18px;
      padding-bottom: 0;
      border-bottom: 0;
    }

    .section-title > div:first-child {
      min-width: 0;
    }

    .section-title.flow-title {
      align-items: center;
    }

    .section-title p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 16px;
    }

    .form-grid > .field {
      min-width: 0;
    }

    .form-grid > .button,
    .form-grid > .row-actions {
      align-self: end;
    }

    .form-grid > .button {
      min-height: 44px;
    }

    .filter-grid {
      grid-template-columns: minmax(260px, 1.2fr) minmax(180px, .9fr) minmax(180px, .9fr);
      align-items: start;
    }

    .form-grid.library-filter-grid {
      grid-template-columns: minmax(260px, 1.25fr) minmax(180px, .9fr) minmax(180px, .9fr) max-content;
      align-items: end;
      gap: 8px 14px;
      margin-bottom: 8px;
    }

    .form-grid.library-filter-grid > .field {
      margin-bottom: 0;
    }

	    .library-filter-action {
	      min-height: 44px;
	      padding-inline: 18px;
	      white-space: nowrap;
	    }

	    .creative-kb-form-grid {
	      grid-template-columns: minmax(240px, 1.2fr) minmax(180px, .8fr) minmax(180px, .8fr);
	      margin-bottom: 12px;
	    }

	    .creative-kb-source-grid {
	      grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
	      margin-bottom: 14px;
	    }

	    .creative-kb-form-grid > .field,
	    .creative-kb-source-grid > .field {
	      margin-bottom: 0;
	    }

	    .creative-kb-source-grid + .field {
	      margin-bottom: 14px;
	    }

	    .creative-kb-upload {
	      margin-top: 0;
	      margin-bottom: 12px;
	    }

	    .creative-kb-upload + .row-actions {
	      margin-top: 0;
	    }

	    .creative-kb-upload .file-copy small {
	      max-width: 720px;
	    }

	    .creative-kb-list-head {
	      align-items: flex-end;
	    }

	    .creative-kb-grid {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	      gap: 14px;
	      margin-top: 14px;
	    }

	    .creative-kb-card {
	      display: grid;
	      gap: 12px;
	      padding: 16px;
	      border-radius: var(--radius-inner);
	      border: 1px solid var(--frost-border-soft);
	      background: var(--frost-card);
	    }

	    .creative-kb-card h4 {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	      margin: 0;
	      color: var(--text);
	      font-size: 16px;
	      line-height: 1.35;
	    }

	    .creative-kb-meta,
	    .creative-kb-actions {
	      display: flex;
	      align-items: center;
	      flex-wrap: wrap;
	      gap: 8px;
	    }

	    .creative-kb-content {
	      margin: 0;
	      color: var(--muted);
	      font-size: 13px;
	      line-height: 1.7;
	      white-space: pre-wrap;
	      word-break: break-word;
	    }

	    .creative-kb-file {
	      display: inline-flex;
	      align-items: center;
	      gap: 6px;
	      color: var(--accent);
	      font-size: 12px;
	      font-weight: 700;
	    }

	    .user-form-grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(170px, .7fr) minmax(0, 1.2fr) max-content;
      align-items: end;
    }

    .user-form-grid .field {
      margin-bottom: 0;
    }

    .create-user-action {
      display: flex;
      align-self: end;
      align-items: stretch;
      justify-content: flex-start;
      min-width: max-content;
    }

    .create-user-action .button {
      height: 44px;
      min-height: 44px;
      white-space: nowrap;
    }

    @media (max-width: 900px) {
      .user-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .create-user-action {
        min-width: 0;
      }
    }

    @media (max-width: 560px) {
      .user-form-grid {
        grid-template-columns: 1fr;
      }
    }

	    .training-name-grid {
	      grid-template-columns: minmax(0, 2.7fr) minmax(0, 7.3fr);
	      align-items: start;
	      margin-bottom: 20px;
	    }

	    .training-product-grid {
	      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
	      align-items: start;
	      margin-bottom: 20px;
	    }

	    .create-product-meta-grid {
	      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
	      align-items: start;
	      margin-bottom: 0;
	    }

		    .create-product-meta-grid > .field {
		      margin-bottom: 0;
		    }

    #analyzeCreateProduct {
      margin-top: 2px;
    }

	    .rewrite-product-meta-grid {
	      grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(240px, 2fr) auto;
	      align-items: end;
	      margin-bottom: 0;
	    }

	    .rewrite-product-meta-grid > .field {
	      margin-bottom: 0;
	    }

	    .rewrite-product-action {
	      margin: 0;
	      min-height: 42px;
	      white-space: nowrap;
	    }

	    .rewrite-product-action-field {
	      justify-content: end;
	      margin-bottom: 0;
	    }

	    .rewrite-product-action-field label {
	      visibility: hidden;
	    }

	    @container (max-width: 640px) {
	      .training-name-grid,
	      .training-product-grid,
	      .create-product-meta-grid,
	      .rewrite-product-meta-grid {
	        grid-template-columns: 1fr;
	      }
	    }

    .date-range-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 16px;
    }

    .date-range-grid .field {
      margin-bottom: 0;
    }

    .date-input-shell {
      position: relative;
      display: flex;
      align-items: center;
    }

    .date-input-shell input {
      padding-right: 46px;
      cursor: pointer;
      background:
        linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.54)),
        rgba(255,255,255,.64);
      box-shadow: var(--control-shadow);
    }

    .date-input-shell input[readonly] {
      user-select: none;
    }

    .date-input-shell:hover input,
    .date-input-shell.open input {
      border-color: rgba(0,122,255,.30);
      box-shadow:
        0 14px 30px rgba(0,122,255,.10),
        inset 0 1px 0 rgba(255,255,255,.86);
    }

    .date-input-icon {
      position: absolute;
      right: 14px;
      width: 18px;
      height: 18px;
      color: rgba(29,29,31,.78);
      stroke: currentColor;
      stroke-width: 1.9;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    .date-input-icon * {
      fill: none;
      stroke: currentColor;
    }

    .field.date-layer-open,
    .form-grid.date-layer-open,
    .card.date-layer-open {
      z-index: 130;
    }

    .date-picker-popover {
      position: fixed;
      z-index: 6000;
      width: min(332px, calc(100vw - 32px));
      padding: 14px;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(238,248,255,.62)),
        rgba(255,255,255,.72);
      backdrop-filter: blur(28px) saturate(1.45);
      -webkit-backdrop-filter: blur(28px) saturate(1.45);
      box-shadow:
        0 26px 70px rgba(20,60,110,.20),
        0 8px 24px rgba(0,122,255,.08),
        inset 0 1px 0 rgba(255,255,255,.92);
    }

    .date-picker-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }

    .date-picker-title {
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.3;
    }

    .date-picker-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .date-picker-nav button,
    .date-picker-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      color: var(--accent);
      background: transparent;
      cursor: pointer;
      font-weight: 600;
    }

    .date-picker-nav button {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      color: rgba(29,29,31,.78);
    }

    .date-picker-nav button:hover,
    .date-picker-action:hover {
      background: rgba(0,122,255,.08);
    }

    .date-week-row,
    .date-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
    }

    .date-week-row {
      margin-bottom: 6px;
      color: rgba(60,60,67,.62);
      font-size: 12px;
      font-weight: 600;
      text-align: center;
    }

    .date-day {
      min-width: 0;
      height: 34px;
      border: 0;
      border-radius: 999px;
      color: rgba(29,29,31,.86);
      background: transparent;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .date-day:hover {
      background: rgba(0,122,255,.08);
    }

    .date-day.outside {
      color: rgba(60,60,67,.34);
    }

    .date-day.today {
      box-shadow: inset 0 0 0 1px rgba(0,122,255,.36);
    }

    .date-day.selected {
      color: #fff;
      background: linear-gradient(135deg, #007aff, #35b9ff);
      box-shadow: 0 10px 22px rgba(0,122,255,.24);
    }

    .date-day:disabled {
      color: rgba(60,60,67,.22);
      background: transparent;
      cursor: not-allowed;
      box-shadow: none;
    }

    .date-picker-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.58);
    }

    .date-picker-action {
      min-height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 13px;
    }

    .date-picker-action:disabled {
      color: rgba(60,60,67,.26);
      background: transparent;
      cursor: not-allowed;
    }

    .field {
      position: relative;
      display: grid;
      gap: 7px;
      margin-bottom: 14px;
    }

    .field.full-row {
      grid-column: 1 / -1;
    }

    .form-grid {
      position: relative;
    }

    .field.select-layer-open,
    .form-grid.select-layer-open,
    .step-card.select-layer-open,
    .card.select-layer-open,
    .result-card.select-layer-open {
      z-index: 120;
    }

    .field label {
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--separator);
      border-radius: 12px;
      outline: none;
      background: rgba(255,255,255,.82);
      color: var(--text);
      font-size: 12px;
      min-height: 42px;
      padding: 10px 14.4px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
      transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }

    input::placeholder,
    textarea::placeholder {
      color: #94a3b8;
      font-size: 1em;
      font-weight: 500;
    }

    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #94a3b8;
      font-size: 1em;
      font-weight: 500;
    }

    textarea {
      min-height: 120px;
      resize: vertical;
      line-height: 1.7;
    }

    .link-input {
      --link-input-default-height: 88px;
      --link-input-max-height: calc(var(--link-input-default-height) * 2);
      min-height: var(--link-input-default-height);
      height: var(--link-input-default-height);
      max-height: var(--link-input-max-height);
      padding-block: 14px;
      line-height: 1.45;
      resize: none;
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: hidden;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    select {
      appearance: none;
      -webkit-appearance: none;
      min-height: 44px;
      padding: 10px 44px 10px 13px;
      border-radius: var(--radius-button);
      border-color: var(--control-border);
      cursor: pointer;
      background:
        linear-gradient(45deg, transparent 50%, rgba(60,60,67,.62) 50%) calc(100% - 21px) 50% / 6px 6px no-repeat,
        linear-gradient(135deg, rgba(60,60,67,.62) 50%, transparent 50%) calc(100% - 15px) 50% / 6px 6px no-repeat,
        linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.48)),
        rgba(255,255,255,.62);
      box-shadow: var(--control-shadow);
    }

    select:hover {
      border-color: rgba(0,122,255,.18);
      background:
        linear-gradient(45deg, transparent 50%, rgba(0,122,255,.72) 50%) calc(100% - 21px) 50% / 6px 6px no-repeat,
        linear-gradient(135deg, rgba(0,122,255,.72) 50%, transparent 50%) calc(100% - 15px) 50% / 6px 6px no-repeat,
        var(--control-bg-hover);
      box-shadow: 0 12px 28px rgba(0,122,255,.08), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(0,122,255,.06);
    }

    select option {
      color: var(--text);
      background: #fff;
    }

    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      min-height: 16px;
      padding: 0;
      border-radius: 4px;
      accent-color: var(--accent);
      box-shadow: none;
      vertical-align: middle;
    }

	    .field label:has(input[type="checkbox"]) {
	      display: inline-flex;
	      align-items: center;
	      gap: 8px;
	    }

		    .export-option-panel {
		      display: grid;
		      gap: 12px;
		      margin-bottom: 14px;
		    }

	    .export-option-title {
	      margin: 0;
	      color: var(--muted);
	      font-size: var(--ui-note-size);
	      font-weight: 600;
	    }

			    .export-option-grid {
			      display: grid;
			      grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
			      gap: 12px;
			      align-items: stretch;
			      max-width: 680px;
			    }

		    .export-option-pill {
		      display: inline-flex;
		      align-items: center;
		      justify-content: center;
		      gap: 8px;
		      min-height: 40px;
		      width: 100%;
		      padding: 10px 14px;
	      border: 1px solid rgba(10,132,255,.14);
	      border-radius: var(--radius-button);
	      background: rgba(255,255,255,.66);
	      color: var(--text);
	      font-size: var(--ui-body-size);
	      font-weight: 600;
		      box-shadow: var(--control-shadow);
		      cursor: pointer;
		    }

	    .rewrite-export-toolbar {
	      display: flex;
	      flex-wrap: wrap;
	      align-items: center;
	      justify-content: space-between;
	      gap: 12px 16px;
	      width: 100%;
	    }

	    .rewrite-export-toolbar .export-option-panel {
	      flex: 0 1 auto;
	      min-width: 0;
	      margin: 0;
	      justify-items: start;
	    }

    .rewrite-export-toolbar .export-option-title {
      display: none;
    }

			    .rewrite-export-toolbar .export-option-grid {
			      width: auto;
			      max-width: 760px;
			      display: flex;
			      flex-wrap: wrap;
			      align-items: center;
			      justify-content: flex-start;
			      gap: 10px;
			    }

		    .rewrite-export-toolbar .export-option-pill {
		      flex: 0 0 auto;
		      width: auto;
		      min-width: 116px;
		      max-width: none;
	      min-height: 44px;
		      padding: 0 10px;
		      white-space: nowrap;
		    }

	    .rewrite-export-toolbar .export-option-pill input[type="checkbox"] {
	      appearance: none;
	      -webkit-appearance: none;
	      flex: 0 0 18px;
	      width: 18px;
	      height: 18px;
	      min-height: 18px;
	      margin: 0;
	      display: grid;
	      place-content: center;
	      border: 2px solid rgba(31, 41, 55, .42);
	      border-radius: 5px;
	      background: rgba(255, 255, 255, .82);
	      box-shadow:
	        inset 0 1px 0 rgba(255,255,255,.96),
	        0 2px 6px rgba(15, 23, 42, .08);
	      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
	    }

	    .rewrite-export-toolbar .export-option-pill input[type="checkbox"]::after {
	      content: "";
	      width: 5px;
	      height: 9px;
	      border-right: 2px solid #fff;
	      border-bottom: 2px solid #fff;
	      transform: rotate(45deg) scale(0);
	      transform-origin: center;
	      transition: transform .14s ease;
	    }

	    .rewrite-export-toolbar .export-option-pill input[type="checkbox"]:checked {
	      border-color: var(--accent);
	      background: var(--accent);
	      box-shadow:
	        inset 0 1px 0 rgba(255,255,255,.30),
	        0 5px 12px rgba(0,122,255,.22);
	    }

	    .rewrite-export-toolbar .export-option-pill input[type="checkbox"]:checked::after {
	      transform: rotate(45deg) scale(1);
	    }

	    .rewrite-export-toolbar .export-option-pill input[type="checkbox"]:focus-visible {
	      outline: 2px solid rgba(0,122,255,.14);
	      outline-offset: 2px;
	    }

	    .rewrite-export-toolbar .export-option-pill:hover input[type="checkbox"] {
	      border-color: rgba(0,122,255,.56);
	      box-shadow:
	        inset 0 1px 0 rgba(255,255,255,.96),
	        0 4px 10px rgba(0,122,255,.12);
	    }

	    .rewrite-export-toolbar .export-option-pill span {
	      line-height: 1;
	    }

	    .rewrite-export-toolbar .export-option-pill:has(input:checked) {
	      border-color: rgba(0,122,255,.30);
	      background:
        linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.54)),
        rgba(0,122,255,.08);
    }

    .rewrite-export-actions {
      flex: 0 1 auto;
      display: grid;
      grid-template-columns: 100px 108px 168px 168px;
      justify-content: flex-end;
      margin: 0;
      margin-left: auto;
      gap: 10px;
      width: auto;
      max-width: 100%;
    }

    .rewrite-export-actions .button {
      flex: 0 0 auto;
      width: 100%;
      min-width: 0;
      min-height: 44px;
      justify-content: center;
      padding: 0 16px;
      white-space: nowrap;
    }

    .rewrite-export-actions .button:nth-child(3),
    .rewrite-export-actions .button:nth-child(4) {
      min-width: 0;
    }

    .comment-export-toolbar {
      justify-content: flex-end;
    }

    .comment-export-actions {
      display: grid;
      grid-template-columns: 100px 108px 168px 168px;
      align-items: stretch;
      width: auto;
      max-width: 100%;
      min-width: 0;
      margin-left: auto;
      gap: 10px;
    }

    .comment-export-actions .button,
    .comment-export-actions .button:first-child,
    .comment-export-actions .button:nth-child(2),
    .comment-export-actions .button:nth-child(3),
    .comment-export-actions .button:nth-child(4) {
      width: 100%;
      min-width: 0;
      min-height: 44px;
      padding-inline: 16px;
    }

		    input:focus,
	    textarea:focus {
      border-color: rgba(0,122,255,.48);
      background: rgba(255,255,255,.96);
      box-shadow: 0 0 0 4px rgba(0,122,255,.12);
    }

    select:focus {
      border-color: rgba(0,122,255,.48);
      background:
        linear-gradient(45deg, transparent 50%, rgba(0,122,255,.76) 50%) calc(100% - 21px) 50% / 6px 6px no-repeat,
        linear-gradient(135deg, rgba(0,122,255,.76) 50%, transparent 50%) calc(100% - 15px) 50% / 6px 6px no-repeat,
        var(--control-bg-hover);
      box-shadow: 0 0 0 4px rgba(0,122,255,.12), var(--control-shadow);
    }

    .select-shell {
      position: relative;
      width: 100%;
      isolation: isolate;
    }

    .select-shell.open {
      z-index: 130;
      isolation: auto;
    }

    .select-shell .native-select {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      z-index: -1;
    }

    .select-trigger {
      width: 100%;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 13px;
      border-radius: var(--radius-button);
      border: 1px solid var(--control-border);
      color: var(--text);
      background: var(--control-bg);
      box-shadow: var(--control-shadow);
      font-size: 12px;
      line-height: 1.35;
      text-align: left;
      transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .select-trigger::after {
      content: "";
      width: 8px;
      height: 8px;
      flex: 0 0 8px;
      margin-right: 2px;
      border-right: 1.8px solid rgba(60,60,67,.62);
      border-bottom: 1.8px solid rgba(60,60,67,.62);
      transform: translateY(-2px) rotate(45deg);
      transition: border-color .16s ease, transform .18s ease;
    }

    .select-shell.open .select-trigger,
    .select-trigger:hover {
      color: var(--accent);
      border-color: rgba(0,122,255,.24);
      background: var(--control-bg-hover);
      box-shadow: 0 12px 28px rgba(0,122,255,.10), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(0,122,255,.06);
    }

    .select-shell.open .select-trigger::after,
    .select-trigger:hover::after {
      border-color: rgba(0,122,255,.74);
    }

    .select-shell.open .select-trigger::after {
      transform: translateY(2px) rotate(225deg);
    }

    .select-menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 8px);
      z-index: 140;
      max-height: min(328px, 48vh);
      overflow: auto;
      padding: 7px;
      border-radius: 18px;
      border: 1px solid var(--frost-border);
      background: var(--frost-card-strong);
      box-shadow: var(--frost-shadow-strong);
      backdrop-filter: blur(34px) saturate(190%);
      -webkit-backdrop-filter: blur(34px) saturate(190%);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px) scale(.98);
      transform-origin: top center;
      pointer-events: none;
      transition: opacity .16s ease, visibility .16s ease, transform .18s var(--sidebar-ease);
    }

    .select-shell.open .select-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .select-menu::-webkit-scrollbar {
      width: 8px;
    }

    .select-menu::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: rgba(60,60,67,.24);
      background-clip: content-box;
    }

    .select-option {
      width: 100%;
      min-height: 38px;
      display: flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 12px;
      color: var(--text);
      background: transparent;
      font-size: 13px;
      line-height: 1.35;
      text-align: left;
      transition: color .14s ease, background .14s ease, box-shadow .14s ease;
    }

    .select-option:hover {
      color: var(--accent);
      background: rgba(0,122,255,.08);
    }

    .select-option.active {
      color: var(--accent);
      background:
        linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.38)),
        rgba(0,122,255,.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.74), inset 0 -1px 0 rgba(0,122,255,.08);
      font-weight: 600;
    }

    .upload-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }

    .training-upload-stack {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      min-width: 0;
    }

    .file-input {
      position: relative;
      min-height: 74px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(255,255,255,.86);
      border-radius: var(--radius-inner);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(245,251,255,.60) 54%, rgba(232,246,255,.46) 100%),
        rgba(255,255,255,.58);
      box-shadow:
        0 0 0 1px rgba(8,119,255,.055),
        inset 0 1px 0 rgba(255,255,255,.94);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
      color: var(--muted);
      font-size: 12px;
      cursor: pointer;
      overflow: hidden;
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .file-input:hover {
      border-color: rgba(255,255,255,.96);
      background:
        linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,253,255,.70) 54%, rgba(226,243,255,.58) 100%),
        rgba(255,255,255,.68);
      box-shadow:
        0 0 0 1px rgba(0,122,255,.12),
        inset 0 1px 0 rgba(255,255,255,.98);
    }

    .file-input input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      opacity: 0;
      cursor: pointer;
    }

    .file-copy {
      min-width: 0;
      display: grid;
      gap: 5px;
    }

    .file-copy b {
      color: var(--text);
      font-size: 13px;
      line-height: 1.3;
      font-weight: 700;
    }

    .file-copy small {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file-action {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      border-radius: var(--radius-button);
      color: var(--accent);
      background: var(--control-bg);
      border: 1px solid var(--accent-line);
      box-shadow: 0 8px 18px rgba(0,122,255,.06), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(0,122,255,.08);
      font-size: 12px;
      font-weight: 600;
    }

    .file-input.has-file {
      border-color: rgba(255,255,255,.92);
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(235,248,255,.62)),
        rgba(0,122,255,.08);
    }

    .file-input.has-file .file-action {
      color: var(--accent);
      background: var(--control-bg);
      border-color: var(--accent-line);
    }

    .training-upload-card {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 6px 12px;
    }

    .training-upload-card .file-copy {
      gap: 2px;
      align-content: center;
    }

    .training-upload-card .file-copy small {
      white-space: normal;
    }

    .training-upload-card .local-video-upload-progress {
      grid-column: 1 / -1;
    }

    .product-doc-panel {
      display: grid;
      gap: 10px;
      margin: 16px 0 12px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .product-doc-upload-row {
      display: grid;
      grid-template-columns: 1fr;
      align-items: stretch;
      gap: 0;
    }

    .product-doc-panel .file-input {
      min-height: 71px;
      margin: 0;
    }

    .create-product-step .product-doc-panel {
      margin-top: 8px;
      margin-bottom: 4px;
      gap: 8px;
    }

    .create-product-step #createProductDocSelected:empty,
    .create-product-step #createProductDocResultSlot:empty {
      display: none;
    }

    .product-doc-file-input {
      cursor: default;
    }

    .product-doc-file-input .product-doc-hidden-input {
      position: fixed;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
      inset: auto;
    }

    .product-doc-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    .product-doc-actions .file-action {
      min-width: 104px;
      min-height: 34px;
    }

    .doc-parse-button {
      white-space: nowrap;
      cursor: pointer;
    }

    .product-doc-panel .file-copy small {
      white-space: normal;
    }

    .comment-video-input-grid,
    .rewrite-video-input-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(220px, .92fr);
      gap: 12px;
      align-items: end;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .comment-video-input-grid .field,
    .rewrite-video-input-grid .field {
      margin: 0;
      min-width: 0;
      max-width: 100%;
    }

    .comment-video-input-grid .link-input,
    .rewrite-video-input-grid .link-input,
    .comment-video-upload,
    .rewrite-video-upload {
      min-height: var(--video-input-height, var(--link-input-default-height));
      height: var(--video-input-height, var(--link-input-default-height));
      max-width: 100%;
      min-width: 0;
    }

    .comment-video-input-grid .comment-video-upload,
    .rewrite-video-input-grid .rewrite-video-upload {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 6px 12px;
      padding: var(--control-padding-y, 10px) var(--control-padding-x, 14px);
    }

    .comment-video-upload .file-copy,
    .rewrite-video-upload .file-copy {
      gap: 2px;
      align-content: center;
    }

    .comment-video-upload .file-copy small,
    .rewrite-video-upload .file-copy small {
      white-space: normal;
    }

    .comment-video-upload:not(.has-file),
    .rewrite-video-upload:not(.has-file) {
      align-content: center;
    }

    .local-video-upload-progress {
      grid-column: 1 / -1;
      display: grid;
      gap: 4px;
      margin-top: -2px;
    }

    .local-video-upload-progress[hidden] {
      display: none;
    }

    .local-video-upload-progress-track {
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(0,122,255,.11);
      box-shadow: inset 0 1px 2px rgba(31,78,121,.08);
    }

    .local-video-upload-progress-fill {
      display: block;
      width: var(--upload-progress, 0%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #007aff, #14b8a6 64%, #27c76f);
      box-shadow: 0 0 14px rgba(20,184,166,.22);
      transition: width .22s ease;
    }

    .local-video-upload-progress-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: rgba(60,60,67,.68);
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1.2;
    }

    .local-video-upload-progress-meta b {
      color: var(--accent);
      font-size: 10.5px;
      font-weight: 700;
    }

    .local-video-delete-button {
      position: relative;
      z-index: 3;
      width: 34px;
      height: 34px;
      min-height: 34px;
      flex: 0 0 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: 0;
      color: rgba(60,60,67,.42);
      background: transparent;
      border: 0;
      box-shadow: none;
      cursor: pointer;
      transition: color .18s ease, transform .18s ease;
    }

    .local-video-delete-button.is-uploaded {
      color: #ff375f;
    }

    .local-video-delete-button .icon {
      width: 16px;
      height: 16px;
    }

    .local-video-delete-button:hover {
      color: rgba(60,60,67,.70);
      transform: translateY(-1px);
    }

    .local-video-delete-button.is-uploaded:hover {
      color: #ff2d55;
    }

    .comment-video-input-grid + .button,
    .rewrite-video-input-grid + .button {
      margin-top: 14px;
    }

    .rewrite-insight-panel {
      margin-top: 16px;
      padding: 16px;
      border: 1px solid rgba(10,132,255,.14);
      border-radius: 22px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(229,245,255,.54));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 16px 36px rgba(64,132,190,.12);
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
    }

    .rewrite-insight-section {
      padding: 16px 0;
      border-top: 1px solid rgba(60,60,67,.10);
      max-width: 100%;
      min-width: 0;
    }

    .rewrite-insight-section:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .rewrite-insight-section:last-child {
      padding-bottom: 0;
    }

    .rewrite-insight-section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }

    .rewrite-insight-section-head h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: var(--text);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .rewrite-insight-section-head p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.65;
    }

	    .rewrite-insight-empty {
	      padding: 18px;
	      border: 1px dashed rgba(10,132,255,.22);
	      border-radius: 18px;
	      color: var(--muted);
	      background: rgba(255,255,255,.46);
	      line-height: 1.7;
	    }

	    .rewrite-fusion-grid {
	      display: grid;
	      grid-template-columns: repeat(2, minmax(0, 1fr));
	      gap: 12px;
	    }

	    .rewrite-fusion-card {
	      padding: 14px;
	      border: 1px solid rgba(10,132,255,.12);
	      border-radius: 17px;
	      background: rgba(255,255,255,.58);
	      min-width: 0;
	    }

	    .rewrite-fusion-title {
	      margin: 0 0 8px;
	      color: var(--text);
	      font-size: 14px;
	      font-weight: 800;
	      letter-spacing: 0;
	    }

	    .rewrite-fusion-body {
	      margin: 0;
	      color: var(--muted);
	      font-size: 13px;
	      font-weight: 600;
	      line-height: 1.7;
	      white-space: pre-wrap;
	      overflow-wrap: anywhere;
	    }

	    @media (max-width: 720px) {
	      .rewrite-fusion-grid {
	        grid-template-columns: 1fr;
	      }
	    }

	    .rewrite-insight-table-wrap {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      border: 1px solid rgba(10,132,255,.12);
      border-radius: 18px;
      background: rgba(255,255,255,.55);
    }

    .rewrite-insight-table {
      width: max(100%, 760px);
      min-width: 760px;
      table-layout: fixed;
      border-collapse: collapse;
    }

    .rewrite-insight-table th,
    .rewrite-insight-table td {
      padding: 12px 14px;
      border-bottom: 1px solid rgba(15,23,42,.08);
      text-align: left;
      vertical-align: top;
      line-height: 1.65;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .rewrite-insight-table th {
      color: var(--text);
      font-weight: 700;
      background: rgba(255,255,255,.52);
      white-space: nowrap;
    }

	    .rewrite-insight-table td {
	      color: var(--text);
	      font-weight: 600;
	    }

	    .rewrite-insight-table tr:last-child td {
	      border-bottom: 0;
	    }

		    .keyframe-cell {
		      display: grid;
		      gap: 8px;
		      min-width: 0;
		    }

		    .keyframe-thumb {
		      display: block;
		      width: min(168px, 100%);
		      max-width: 100%;
		      height: auto;
		      max-height: 320px;
		      object-fit: contain;
		      object-position: center;
		      border-radius: 10px;
		      border: 1px solid rgba(10,132,255,.16);
		      background: rgba(255,255,255,.72);
		      box-shadow: 0 8px 20px rgba(64,132,190,.12);
		    }

	    .keyframe-cell small {
	      color: var(--accent-blue);
	      font-size: 11px;
	      font-weight: 600;
	      line-height: 1.25;
	    }

	    .keyframe-cell span {
	      display: block;
	    }

	    .storyboard-action-cell {
	      display: grid;
	      gap: 6px;
	    }

	    .storyboard-action-cell span,
	    .storyboard-action-cell b {
	      display: block;
	    }

	    .rewrite-storyboard-grid {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	      gap: 12px;
    }

    .rewrite-shot-card {
      min-height: 220px;
      padding: 14px;
      border: 1px solid rgba(10,132,255,.12);
      border-radius: 18px;
      background: rgba(255,255,255,.58);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    }

    .rewrite-shot-card .shot-time {
      color: var(--accent-blue);
      font-weight: 700;
      margin-bottom: 8px;
    }

    .rewrite-shot-card h5 {
      margin: 0 0 8px;
      font-size: 16px;
      color: var(--text);
    }

    .rewrite-shot-card p {
      margin: 6px 0;
      color: var(--text);
      line-height: 1.65;
    }

    .rewrite-review-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 12px;
    }

    .rewrite-review-card {
      padding: 14px;
      border-radius: 18px;
      border: 1px solid rgba(10,132,255,.12);
      background: rgba(255,255,255,.56);
    }

    .rewrite-review-card h5 {
      margin: 0 0 10px;
      font-size: 15px;
      color: var(--text);
    }

    .rewrite-review-card ul {
      margin: 0;
      padding-left: 18px;
    }

    .rewrite-review-card li {
      margin: 6px 0;
      line-height: 1.55;
      color: var(--text);
    }

    @media (max-width: 1240px) {
      .rewrite-video-input-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .comment-video-input-grid,
      .rewrite-video-input-grid {
        grid-template-columns: 1fr;
      }

      .rewrite-review-grid {
        grid-template-columns: 1fr;
      }

      .rewrite-insight-table {
        min-width: 620px;
      }
    }

    .selected-doc-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    #createProductDocSelected:empty,
    #createProductDocResultSlot:empty {
      display: none;
    }

    .selected-doc-card {
      position: relative;
      min-width: 0;
      min-height: 72px;
      display: grid;
      gap: 8px;
      padding: 11px 38px 11px 12px;
      border: 1px solid rgba(0,122,255,.14);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(242,249,255,.58)),
        rgba(255,255,255,.54);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 20px rgba(31,78,121,.05);
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
    }

    .selected-doc-remove {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(60,60,67,.10);
      border-radius: 999px;
      background: rgba(255,255,255,.66);
      color: rgba(60,60,67,.62);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 6px 14px rgba(31,78,121,.06);
      cursor: pointer;
      font-size: 18px;
      font-weight: 500;
      line-height: 1;
      transition: background .18s ease, color .18s ease, transform .18s ease;
      z-index: 1;
    }

    .selected-doc-remove:hover {
      background: rgba(255,255,255,.88);
      color: #ff3b30;
      transform: translateY(-1px);
    }

    .selected-doc-main {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .selected-doc-card .icon {
      flex: 0 0 auto;
      width: 17px;
      height: 17px;
      color: var(--accent);
    }

    .selected-doc-card .selected-doc-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .script-doc-status-slot {
      margin-top: 2px;
    }

    .upload-list .script-doc-status-slot {
      display: none;
    }

    .script-doc-status-slot:empty {
      display: none;
    }

    .script-doc-status-card {
      width: min(100%, 430px);
      min-height: 84px;
      padding: 14px 42px 14px 14px;
    }

    .script-doc-status-card .selected-doc-progress {
      height: 7px;
    }

    .script-doc-status-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .script-doc-reupload {
      flex: 0 0 auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--accent);
      cursor: pointer;
      font: inherit;
      font-weight: 700;
    }

    .script-doc-result-panel {
      display: grid;
      gap: 12px;
      margin-top: 16px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(246,252,255,.48)),
        rgba(255,255,255,.42);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 16px 34px rgba(31,78,121,.06);
    }

    .script-doc-result-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .script-doc-result-head h4 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: var(--text);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.35;
    }

    .script-doc-text-view {
      min-height: 168px;
      max-height: 420px;
      overflow: auto;
      padding: 16px 18px;
      border: 1px solid rgba(0,122,255,.15);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62)),
        rgba(255,255,255,.56);
      color: #1d1d1f;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.78;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    }

    .script-doc-text-view:focus {
      border-color: rgba(0,122,255,.32);
      box-shadow: 0 0 0 4px rgba(0,122,255,.10), inset 0 1px 0 rgba(255,255,255,.9);
    }

    .script-doc-text-view:empty::before,
    .script-doc-text-view.is-empty::before {
      content: attr(data-placeholder);
      color: var(--placeholder);
      font-weight: 500;
    }

    .content-analysis-preview-slot {
      margin-top: 0;
    }

    .training-upload-stack .content-analysis-preview-slot {
      margin-top: 2px;
    }

    .content-analysis-preview-slot:empty {
      display: none;
    }

    .content-analysis-panel {
      display: grid;
      gap: 14px;
      padding: 18px;
      border: 1px solid rgba(0,122,255,.12);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(246,252,255,.58)),
        rgba(255,255,255,.48);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 16px 34px rgba(31,78,121,.06);
    }

    .content-analysis-section {
      display: grid;
      gap: 10px;
      padding: 14px 0;
      border-top: 1px solid rgba(0,122,255,.10);
    }

    .content-analysis-section:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .content-analysis-section h5 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: var(--text);
      font-size: 15px;
      font-weight: 800;
      line-height: 1.35;
    }

    .interaction-chart-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(180px, .32fr);
      gap: 14px;
      align-items: stretch;
    }

    .interaction-chart {
      display: grid;
      place-items: center;
      align-self: stretch;
      box-sizing: border-box;
      width: 100%;
      min-height: clamp(300px, 28vw, 390px);
      padding: 18px 22px;
      border: 1px solid rgba(0,122,255,.12);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,251,255,.72)),
        rgba(255,255,255,.62);
      overflow: hidden;
    }

    .interaction-chart svg {
      display: block;
      width: 100%;
      height: 170px;
    }

    .interaction-chart-empty {
      display: grid;
      min-height: 170px;
      place-items: center;
      padding: 18px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      text-align: center;
    }

    .interaction-chart-meta {
      display: grid;
      align-content: center;
      gap: 8px;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255,255,255,.62);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .interaction-chart-meta b {
      color: var(--text);
      font-size: 18px;
      line-height: 1.2;
    }

    .content-analysis-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .content-analysis-copy-button {
      flex: 0 0 auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: #2563ff;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
    }

    .content-formula-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 18px;
      align-items: center;
      margin-top: 4px;
    }

	    .content-formula-legend-item {
	      display: inline-flex;
	      align-items: center;
	      gap: 7px;
	      color: #1d1d1f;
	      font-size: 12px;
	      font-weight: 600;
	      line-height: 1.35;
	    }

    .content-formula-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 1px;
      background: var(--formula-color);
    }

    .content-formula-flow {
      display: inline-grid;
      max-width: 100%;
      margin-top: 4px;
    }

    .content-formula-guide {
      display: grid;
      grid-template-columns: repeat(var(--formula-step-count, 1), minmax(34px, 1fr));
      align-items: center;
      width: 100%;
      height: 20px;
      min-width: min(100%, 380px);
      user-select: none;
    }

    .content-formula-guide span {
      position: relative;
      display: block;
      height: 20px;
    }

    .content-formula-guide span::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(37,99,255,.08), rgba(37,99,255,.20), rgba(37,99,255,.08));
      transform: translateY(-50%);
    }

    .content-formula-guide span::after {
      content: "↔";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(37,99,255,.18);
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
    }

    .content-formula-line {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-top: 2px;
    }

    .content-formula-crop {
      margin-top: 8px;
      overflow: hidden;
      border-radius: 10px;
      background: rgba(255,255,255,.72);
    }

    .content-formula-crop img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 180px;
      object-fit: contain;
      object-position: left center;
    }

		    .content-formula-part {
		      display: inline-flex;
		      align-items: center;
		      min-height: 24px;
	      color: var(--formula-color);
	      font-size: 14px;
	      font-weight: 700;
	      line-height: 1.45;
	    }

	    .content-formula-plus {
	      color: var(--accent);
	      font-size: 14px;
	      font-weight: 700;
	    }

    .content-analysis-script {
      max-height: 320px;
      overflow: auto;
      padding: 18px;
      border: 0;
      border-radius: 10px;
      background: rgba(246,247,249,.86);
      color: #1d1d1f;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.76;
      white-space: normal;
      overflow-wrap: anywhere;
      cursor: text;
      outline: none;
      transition: box-shadow .18s ease, background .18s ease;
    }

    .content-analysis-script[contenteditable="true"]:focus {
      background: rgba(255,255,255,.92);
      box-shadow: 0 0 0 2px rgba(0,122,255,.18), inset 0 1px 2px rgba(31,78,121,.06);
    }

    .content-script-row,
    .content-script-plain {
      display: block;
      margin-top: 8px;
    }

    .content-script-row:first-child,
    .content-script-plain:first-child {
      margin-top: 0;
    }

    .content-script-marker,
    .content-script-segment {
      color: var(--formula-color);
    }

    .content-script-marker {
      margin-right: 8px;
      font-weight: 600;
      white-space: nowrap;
    }

    .content-script-segment {
      font-weight: 500;
    }

    .content-analysis-summary {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.6;
    }

    .selected-doc-progress {
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(0,122,255,.10);
      box-shadow: inset 0 1px 2px rgba(31,78,121,.08);
    }

    .selected-doc-progress span {
      display: block;
      height: 100%;
      width: var(--doc-progress, 0%);
      border-radius: inherit;
      background: linear-gradient(90deg, #007aff, #48c7ff);
      box-shadow: 0 0 14px rgba(0,122,255,.20);
      transition: width .22s ease;
    }

    .selected-doc-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 600;
    }

    .selected-doc-meta b {
      color: var(--accent);
      font-size: 10.5px;
      font-weight: 600;
    }

    .product-doc-result {
      margin-top: 4px;
      padding: 2px 2px 0;
    }

    .product-doc-result h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

	    .product-doc-result .chip-row {
	      margin-bottom: 2px;
	    }

	    .product-doc-result .product-insight-grid {
	      margin-top: 16px;
	      gap: 16px;
	    }

	    .product-doc-summary-grid {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	      gap: 14px;
	      margin-top: 12px;
	    }

	    .product-doc-summary-card {
	      min-width: 0;
	      padding: 13px 14px;
	      border-radius: 16px;
	      border: 1px solid rgba(14,165,233,.14);
	      background:
	        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42)),
	        rgba(14,165,233,.055);
	      box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 18px rgba(36,55,79,.035);
	    }

	    .product-doc-summary-card b {
	      display: block;
	      margin-bottom: 7px;
	      color: rgba(29,29,31,.88);
	      font-size: 12.5px;
	      font-weight: 700;
	      line-height: 1.35;
	    }

	    .product-doc-summary-card span {
	      display: block;
	      color: rgba(29,29,31,.82);
	      font-size: 14px;
	      font-weight: 600;
	      line-height: 1.58;
	      overflow-wrap: anywhere;
	    }

	    .product-doc-section {
	      grid-column: 1 / -1;
	      padding: 0 0 6px;
	    }

	    .product-doc-section > h5 {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	      margin: 0 0 12px;
	      font-size: 15px;
	    }

	    .product-doc-brief {
	      margin-top: 14px;
	      padding: 14px 16px;
	      border-radius: 18px;
	      border: 1px solid rgba(35,177,77,.18);
	      background:
	        linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.38)),
	        rgba(35,177,77,.08);
	    }

	    .product-doc-brief h5,
	    .product-doc-points h5 {
	      margin: 0 0 10px;
	      color: rgba(29,29,31,.92);
	      font-size: 14px;
	      font-weight: 700;
	      line-height: 1.35;
	    }

	    .product-doc-points {
	      margin-top: 14px;
	    }

	    .product-doc-point-list {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	      gap: 10px;
	    }

	    .product-doc-point {
	      min-width: 0;
	      padding: 10px 12px;
	      border-radius: 14px;
	      border: 1px solid rgba(60,60,67,.08);
	      background: rgba(255,255,255,.46);
	      color: rgba(29,29,31,.82);
	      font-size: 13.5px;
	      font-weight: 600;
	      line-height: 1.58;
	      overflow-wrap: anywhere;
	    }

	    .product-doc-text {
	      color: rgba(29,29,31,.84);
	      font-size: 14px;
      line-height: 1.74;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .product-doc-empty {
      padding: 12px;
      border-radius: 16px;
      color: var(--muted);
      background: rgba(255,255,255,.34);
      border: 1px solid rgba(255,255,255,.58);
      font-size: 14px;
      line-height: 1.7;
    }

    .flow {
      display: grid;
      gap: var(--layout-gap);
    }

    .ai-progress-slot:empty {
      display: none;
    }

    .ai-progress-slot:not(:empty) {
      margin-bottom: 12px;
    }

    .ai-progress-card {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .ai-progress-head {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 14px;
      margin-bottom: 8px;
      min-width: 0;
      white-space: nowrap;
    }

    .ai-progress-title {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      min-width: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
    }

    .ai-progress-title .icon {
      color: var(--accent);
    }

    .ai-progress-card.is-error .ai-progress-title,
    .ai-progress-card.is-error .ai-progress-title .icon,
    .ai-progress-card.is-error .ai-progress-eta {
      color: #ff3b5c;
    }

    .ai-progress-percent {
      flex: 0 0 auto;
      margin-left: 0;
      color: var(--accent);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
    }

    .ai-progress-inline-meta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      color: rgba(60,60,67,.72);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
    }

    .ai-progress-step,
    .ai-progress-eta {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ai-progress-step {
      flex: 1 1 auto;
    }

    .ai-progress-eta {
      flex: 0 0 auto;
      color: rgba(0,122,255,.78);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
    }

    .ai-progress-track {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.72);
      background: rgba(255,255,255,.46);
      box-shadow: inset 0 1px 4px rgba(30,70,110,.08);
    }

    .ai-progress-fill {
      width: var(--ai-progress, 0%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #0877ff 0%, #14b8a6 50%, #27c76f 100%);
      box-shadow: 0 0 18px rgba(20,184,166,.32);
      transition: width .38s cubic-bezier(.2,.8,.2,1);
    }

    .ai-progress-card.is-error .ai-progress-fill {
      background: linear-gradient(90deg, #ff4d6d 0%, #ff8a65 100%);
      box-shadow: none;
    }

    .ai-thought-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      margin-top: 12px;
    }

    .ai-thought-list.current-only {
      flex-wrap: nowrap;
    }

    .ai-thought-item {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .ai-thought-list.current-only .ai-thought-item {
      max-width: 100%;
    }

    .ai-thought-item:not(:last-child)::after {
      content: "";
      width: 22px;
      height: 1px;
      margin-left: 4px;
      background: linear-gradient(90deg, rgba(0,122,255,.38), rgba(0,122,255,0));
    }

    .ai-thought-dot {
      width: 17px;
      height: 17px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: rgba(0,122,255,.78);
      background: rgba(255,255,255,.42);
      border: 1px solid rgba(0,122,255,.22);
      font-size: 9px;
      font-weight: 700;
    }

    .ai-thought-item.passed,
    .ai-thought-item.active {
      color: var(--text);
      font-weight: 600;
    }

    .ai-thought-item.upcoming {
      opacity: .58;
    }

    .ai-thought-item.passed .ai-thought-dot {
      color: var(--accent);
      background: rgba(0,122,255,.10);
    }

    .ai-thought-item.active .ai-thought-dot {
      color: #fff;
      background: linear-gradient(135deg, #007aff, #35c8ff);
      border-color: rgba(255,255,255,.68);
      box-shadow: 0 8px 18px rgba(0,122,255,.2);
      animation: aiFlowPulse 1.1s ease-in-out infinite;
    }

    @keyframes aiFlowPulse {
      0%, 100% { transform: scale(1); box-shadow: 0 8px 18px rgba(0,122,255,.18); }
      50% { transform: scale(1.12); box-shadow: 0 10px 24px rgba(0,122,255,.28); }
    }

    .step-card {
      position: relative;
      padding: 16px;
      border: 1px solid var(--frost-border-soft);
      border-radius: var(--radius-inner);
      background: var(--frost-card);
      box-shadow: var(--frost-shadow);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }

    .step-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .step-title {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .step-index {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--accent);
      background: var(--control-active);
      border: 1px solid var(--accent-line);
      font-size: 12px;
      font-weight: 700;
    }

    .step-title h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.25;
      color: var(--text);
    }

    .step-subtitle {
      margin: -2px 0 12px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.65;
      max-width: none;
    }

    .step-empty-hint {
      margin: 11.9px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.65;
    }

    .output-stack {
      display: grid;
      gap: var(--layout-gap);
    }

	    .create-agent-layout {
	      display: grid;
	      grid-template-columns: minmax(0, 1fr);
	      gap: var(--layout-gap);
	      align-items: start;
	    }

    .rewrite-full-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .card.strong.create-flow-panel {
      min-width: 0;
      padding: clamp(22.1px, 1.785vw, 28.9px);
      border: 1px solid rgba(187, 218, 255, .56);
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70) 58%, rgba(238,249,255,.56)),
        radial-gradient(circle at 22% 0%, rgba(255,255,255,.86), rgba(255,255,255,0) 44%),
        rgba(255,255,255,.68);
    }

	    .create-flow-panel > .section-title.flow-title {
	      margin-bottom: 20.4px;
	    }

	    .viral-agent-panel {
	      display: grid;
	      gap: var(--layout-gap);
	    }

	    .viral-input-row {
	      display: grid;
	      grid-template-columns: minmax(0, 1fr) auto;
	      gap: 16px;
	      align-items: end;
	    }

	    .viral-input-row .button {
	      min-width: 132px;
	    }

	    .viral-result-grid {
	      display: grid;
	      grid-template-columns: repeat(2, minmax(0, 1fr));
	      gap: 14px;
	    }

	    .viral-output-card {
	      display: grid;
	      gap: 8px;
	      padding: 16px;
	      border: 1px solid rgba(187, 218, 255, .56);
	      border-radius: 20px;
	      background: rgba(255,255,255,.74);
	      box-shadow: 0 7px 24px rgba(48, 104, 156, .08);
	    }

	    .viral-output-card h5 {
	      margin: 0;
	      font-size: 14px;
	      color: var(--text);
	    }

	    .viral-output-card ul {
	      margin: 0;
	      padding-left: 18px;
	      color: var(--muted);
	      font-size: 13px;
	      line-height: 1.65;
	    }

	    .viral-result-grid.viral-insight-grid {
	      grid-template-columns: repeat(3, minmax(0, 1fr));
	      gap: 14px;
	    }

	    .viral-output-card.viral-insight-card {
	      min-height: 100%;
	      padding: 16px 18px;
	      border: 1px solid rgba(187, 218, 255, .62);
	      border-radius: 14px;
	      background: rgba(255,255,255,.86);
	      box-shadow: none;
	    }

	    .viral-output-card.viral-insight-card h5 {
	      font-size: 14px;
	      line-height: 1.35;
	    }

	    .viral-output-card.viral-insight-card ul {
	      line-height: 1.65;
	    }

	    @media (max-width: 1180px) {
	      .viral-result-grid.viral-insight-grid {
	        grid-template-columns: repeat(2, minmax(0, 1fr));
	      }
	    }

	    @media (max-width: 720px) {
	      .viral-result-grid.viral-insight-grid {
	        grid-template-columns: 1fr;
	      }
	    }

	    .viral-frame-strip {
	      display: grid;
	      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	      gap: 10px;
	    }

	    .viral-frame-thumb {
	      overflow: hidden;
	      border-radius: 14px;
	      border: 1px solid rgba(187, 218, 255, .60);
	      background: rgba(255,255,255,.72);
	    }

	    .viral-frame-thumb img {
	      width: 100%;
	      aspect-ratio: 9 / 16;
	      display: block;
	      object-fit: cover;
	    }

	    .viral-frame-thumb span {
	      display: block;
	      padding: 6px 8px;
	      color: var(--muted);
	      font-size: 11px;
	      text-align: center;
	    }

		    .viral-analysis-table {
		      width: 100%;
		      table-layout: fixed;
		      border-collapse: separate;
		      border-spacing: 0;
		      font-size: 12px;
	    }

	    .viral-analysis-table th,
	    .viral-analysis-table td {
	      padding: 10px 12px;
	      border-bottom: 1px solid rgba(60,60,67,.08);
		      text-align: left;
		      vertical-align: top;
		      line-height: 1.55;
		      word-break: break-word;
		      overflow-wrap: anywhere;
		    }

	    .viral-analysis-table th {
	      color: var(--muted);
	      font-weight: 700;
	      background: rgba(247,250,255,.7);
	      white-space: nowrap;
	    }

		    .viral-result-section {
		      display: grid;
		      gap: 12px;
		      margin-top: 0;
		      padding: 18px 20px 20px;
		      border: 1px solid rgba(190, 222, 250, .78);
		      border-radius: 20px;
		      background: rgba(255, 255, 255, .82);
		      min-width: 0;
		    }

	    .viral-result-section:first-of-type {
	      margin-top: 0;
	    }

	    .viral-section-title {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	      margin: 0;
	      color: var(--text);
	      font-size: 15px;
	      font-weight: 700;
	    }

		    .viral-section-title small {
		      color: var(--muted);
		      font-size: 12px;
		      font-weight: 500;
		    }

		    .viral-section-body {
		      min-width: 0;
		      overflow-x: auto;
		    }

	    .viral-analysis-table .col-index {
	      width: 56px;
	    }

	    .viral-script-table .col-time {
	      width: 132px;
	    }

	    .viral-storyboard-table .col-time {
	      width: 118px;
	    }

	    .viral-storyboard-table .col-shot {
	      width: 210px;
	    }

	    .viral-storyboard-table .col-oral {
	      width: 34%;
	    }

	    .viral-shot-cell {
	      display: grid;
	      justify-items: start;
	      gap: 8px;
	    }

	    .viral-shot-frame {
	      width: 168px;
	      max-width: 100%;
	      border-radius: 12px;
	      border: 1px solid rgba(187, 218, 255, .68);
	      background: rgba(255,255,255,.78);
	      overflow: hidden;
	    }

	    .viral-shot-frame img,
	    .viral-shot-frame video {
	      display: block;
	      width: 100%;
	      aspect-ratio: 9 / 16;
	      object-fit: cover;
	      background: rgba(16,24,40,.92);
	    }

	    .viral-shot-video {
	      cursor: pointer;
	    }

	    .viral-oral-text {
	      min-width: 0;
	      white-space: normal;
	      word-break: break-word;
	      overflow-wrap: anywhere;
	      line-height: 1.65;
	    }

	    .viral-oral-cell {
	      display: grid;
	      gap: 10px;
	      min-width: 0;
	    }

	    .viral-shot-caption {
	      display: grid;
	      gap: 6px;
	      min-width: 0;
	      padding-bottom: 2px;
	    }

	    .viral-shot-title {
	      color: var(--text);
	      font-weight: 700;
	    }

		    .viral-shot-visual {
		      color: var(--muted);
		      line-height: 1.65;
		      white-space: normal;
		      word-break: break-word;
		      overflow-wrap: anywhere;
		    }

	    .viral-shot-analysis {
	      display: grid;
	      gap: 6px;
	      color: var(--text);
	    }

		    .viral-shot-analysis span {
		      display: block;
		      color: var(--muted);
		      min-width: 0;
		      white-space: normal;
		      word-break: break-word;
		      overflow-wrap: anywhere;
		    }

	    .viral-shot-analysis b {
	      color: var(--text);
	      font-weight: 700;
	    }

	    .viral-status-line {
	      display: flex;
	      flex-wrap: wrap;
	      gap: 8px;
	      align-items: center;
	      color: var(--muted);
	      font-size: 12px;
	      line-height: 1.6;
	    }

	    .viral-results-surface {
	      display: grid;
	      gap: 14px;
	      min-width: 0;
	      margin-top: var(--layout-gap);
	      padding: 0 2px;
	    }

	    .viral-results-surface > h4 {
	      display: inline-flex;
	      align-items: center;
	      gap: 8px;
	      margin: 0;
	      color: var(--text);
	      font-size: 18px;
	      font-weight: 800;
	    }

	    .viral-results-empty {
	      min-height: 96px;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      padding: 8px 0;
	      color: var(--muted);
	      font-size: 14px;
	      line-height: 1.7;
	      text-align: center;
	    }

	    .step-result {
	      margin-top: 11.9px;
      padding-top: 11.9px;
      border-top: 1px solid rgba(60,60,67,.09);
    }

    .step-result.product-step-result {
      margin-top: 14px;
      padding-top: 0;
      border-top: 0;
    }

    .step-progress-slot {
      flex: 0 1 396px;
      min-width: 290px;
      max-width: 449px;
      margin-left: auto;
    }

    .step-progress-slot:has(.ai-progress-slot:empty) {
      display: none;
    }

    .step-head-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 16px;
      min-width: 0;
      margin-left: auto;
    }

    .step-head-actions .step-progress-slot {
      margin-left: 0;
    }

    .step-head-actions > .chip {
      flex: 0 0 auto;
      min-width: max-content;
      white-space: nowrap;
      overflow-wrap: normal;
      word-break: normal;
    }

    .step-progress-slot .ai-progress-slot:not(:empty) {
      margin: 0;
    }

    .step-progress-slot .ai-progress-card {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .step-progress-slot .ai-progress-head {
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      margin-bottom: 7px;
    }

    .step-progress-slot .ai-progress-title {
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .step-progress-slot .ai-progress-percent {
      font-size: 12px;
    }

    .step-progress-slot .ai-progress-track {
      width: 100%;
      height: 5px;
    }

    .step-progress-slot .ai-thought-list {
      margin-top: 7px;
    }

    .step-progress-slot .ai-thought-item {
      font-size: 11px;
    }

    .create-ai-assistant {
      position: sticky;
      top: calc(var(--page-pad-y) + var(--topbar-sticky-clearance, 132px));
      min-width: 0;
      height: min(984px, calc(100dvh - var(--page-pad-y) - var(--page-pad-y) - var(--topbar-sticky-clearance, 132px)));
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      padding: 16px;
      overflow: hidden;
      margin-top: 0;
    }

    .assistant-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 0;
      border-bottom: 0;
    }

    .assistant-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      font-size: 16px;
      font-weight: 700;
    }

    .assistant-title .icon {
      width: 19px;
      height: 19px;
      color: var(--accent);
    }

    .assistant-thread {
      min-height: 0;
      overflow-y: auto;
      display: grid;
      gap: 10px;
      align-content: start;
      padding: 14px 2px;
      scrollbar-width: thin;
    }

    .assistant-message {
      display: grid;
      gap: 5px;
      width: fit-content;
      max-width: 92%;
      padding: 10px 14.4px;
      border-radius: 16px;
      color: var(--text);
      background: rgba(255,255,255,.54);
      border: 1px solid rgba(255,255,255,.68);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
      font-size: 13px;
      line-height: 1.6;
    }

    .assistant-message.user {
      justify-self: end;
      color: var(--text);
      background: rgba(242,244,247,.86);
      border-color: rgba(255,255,255,.78);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 22px rgba(31,78,121,.07);
    }

    .assistant-message small {
      color: inherit;
      opacity: .68;
      font-size: 11px;
    }

    .assistant-empty {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
      padding: 12px;
      border-radius: 16px;
      background: rgba(255,255,255,.38);
      border: 1px solid rgba(255,255,255,.58);
    }

    .assistant-composer {
      display: grid;
      gap: 10px;
      padding-top: 12px;
      border-top: 1px solid rgba(60,60,67,.10);
    }

    .assistant-composer textarea {
      min-height: 120px;
      resize: vertical;
    }

    .assistant-upload-progress {
      display: grid;
      gap: 7px;
      padding: 10px 12px;
      border-radius: 16px;
      color: rgba(29,29,31,.78);
      background:
        linear-gradient(180deg, rgba(255,255,255,.66), rgba(232,244,255,.50)),
        rgba(255,255,255,.46);
      border: 1px solid rgba(255,255,255,.74);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
    }

    .assistant-upload-progress[hidden] {
      display: none;
    }

    .assistant-upload-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
    }

    .assistant-upload-label {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .assistant-upload-percent {
      flex: 0 0 auto;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
    }

    .assistant-upload-track {
      height: 5px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(0,122,255,.10);
    }

    .assistant-upload-bar {
      display: block;
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #0a84ff, #55d7ff);
      transition: width .28s ease;
    }

    .assistant-upload-progress.is-done .assistant-upload-bar {
      background: linear-gradient(90deg, #28c76f, #6ee7b7);
    }

    .assistant-tools {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .assistant-file-name {
      min-width: 0;
      flex: 1 1 auto;
      color: var(--muted);
      font-size: 11px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .assistant-file-button {
      width: 36px;
      min-width: 36px;
      height: 36px;
      min-height: 36px;
      border-radius: 50%;
      color: rgba(60,60,67,.62);
      background: rgba(60,60,67,.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }

    .assistant-file-button:hover {
      color: var(--accent);
      background: rgba(0,122,255,.10);
    }

    .assistant-send-button {
      flex: 0 0 auto;
      width: 44px;
      min-width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 50%;
      color: rgba(60,60,67,.48);
      background: rgba(60,60,67,.14);
      border: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
    }

    .assistant-send-button.is-ready {
      color: #fff;
      background: var(--accent-fill);
      box-shadow: none;
    }

    .assistant-send-button:disabled {
      opacity: 1;
      cursor: default;
      filter: none;
    }

    .recent-products-panel {
      grid-template-rows: auto minmax(0, 1fr);
    }

    .recent-product-list {
      min-height: 0;
      overflow-y: auto;
      display: grid;
      gap: 10px;
      align-content: start;
      padding: 14px 2px 2px;
      scrollbar-width: thin;
    }

    .recent-product-card {
      width: 100%;
      min-width: 0;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 8px;
      border: 1px solid rgba(255,255,255,.68);
      border-radius: 16px;
      color: var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(238,248,255,.48)),
        rgba(255,255,255,.44);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 12px 22px rgba(31,78,121,.06);
      text-align: left;
      cursor: pointer;
    }

    .recent-product-image {
      width: 52px;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: 12px;
      background:
        radial-gradient(circle at 30% 22%, rgba(95,213,126,.24), transparent 42%),
        linear-gradient(145deg, rgba(228,248,234,.9), rgba(232,244,255,.86));
      border: 1px solid rgba(255,255,255,.74);
      display: grid;
      place-items: center;
      color: rgba(35,177,78,.86);
      font-size: 18px;
      font-weight: 700;
    }

    .recent-product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .recent-product-info {
      min-width: 0;
      display: grid;
      gap: 7px;
    }

    .recent-product-title {
      min-width: 0;
      color: rgba(29,29,31,.94);
      font-size: 13.5px;
      font-weight: 700;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .recent-product-count {
      justify-self: end;
      align-self: start;
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .recent-product-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .learning-result-card {
      display: grid;
      gap: 8px;
      padding: 14px;
      border-radius: 16px;
      color: var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.46)),
        rgba(0,122,255,.06);
      border: 1px solid rgba(255,255,255,.70);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
      font-size: 14px;
      line-height: 1.75;
    }

    .result-card {
      padding: 14px;
      border: 1px solid var(--frost-border-soft);
      border-radius: var(--radius-inner);
      background: var(--frost-card);
      box-shadow: var(--frost-shadow);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }

    .result-card h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 10px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--text);
    }

    .result-card p,
    .result-card li {
      color: rgba(29, 29, 31, .84);
      font-size: 14px;
      line-height: 1.76;
      overflow-wrap: anywhere;
    }

    .result-card p { margin: 0; }
    .result-card ul { margin: 10px 0 0 18px; padding: 0; }
    .result-card .mt-8 { margin-top: 8px; }
    .result-card .mt-10 { margin-top: 10px; }
    .result-card.mt-12 { margin-top: 12px; }
    .mt-12 { margin-top: 12px; }
    .version-row { margin-bottom: 12px; }

    .product-positioning {
      margin-top: 12px;
      color: rgba(29, 29, 31, .82);
      font-size: 14.5px;
      line-height: 1.78;
    }

    .product-highlight {
      margin-top: 12px;
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid rgba(35, 177, 78, .22);
      background:
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.36)),
        linear-gradient(135deg, rgba(35,177,78,.18), rgba(81,220,116,.09));
      color: rgba(12, 73, 30, .92);
      box-shadow:
        0 14px 28px rgba(35, 177, 78, .09),
        inset 0 1px 0 rgba(255,255,255,.86),
        inset 0 -1px 0 rgba(35,177,78,.08);
      backdrop-filter: blur(18px) saturate(175%);
      -webkit-backdrop-filter: blur(18px) saturate(175%);
    }

    .product-highlight span {
      display: block;
      margin-bottom: 4px;
      color: rgba(12, 73, 30, .70);
      font-size: 12px;
      font-weight: 700;
    }

    .product-highlight strong {
      display: block;
      color: rgba(6, 52, 22, .96);
      font-size: 15.5px;
      line-height: 1.64;
    }

    .product-insight-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .product-insight-block {
      min-width: 0;
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid rgba(14,165,233,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.38)),
        linear-gradient(135deg, rgba(14,165,233,.055), rgba(255,255,255,0) 52%),
        rgba(255,255,255,.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 20px rgba(36,55,79,.035);
    }

    .product-insight-block.key {
      border-color: rgba(35, 177, 78, .18);
      background:
        linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.38)),
        linear-gradient(135deg, rgba(35,177,78,.14), rgba(81,220,116,.07));
    }

    .product-insight-block:nth-child(3n) {
      border-color: rgba(255,159,10,.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.38)),
        linear-gradient(135deg, rgba(255,159,10,.075), rgba(255,255,255,0) 52%),
        rgba(255,255,255,.34);
    }

    .product-insight-block:nth-child(4n) {
      border-color: rgba(124,58,237,.13);
      background:
        linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.38)),
        linear-gradient(135deg, rgba(124,58,237,.06), rgba(255,255,255,0) 52%),
        rgba(255,255,255,.34);
    }

    .product-insight-block h5 {
      margin: 0 0 12px;
      color: rgba(29,29,31,.92);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

	    .product-pill-list {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	      gap: 9px 8px;
	      min-width: 0;
	    }

	    .product-pill {
	      display: block;
	      width: fit-content;
	      max-width: 100%;
	      min-width: 0;
	      padding: 7px 12px;
	      border-radius: 16px;
	      color: rgba(29,29,31,.84);
	      background: rgba(255,255,255,.52);
	      border: 1px solid rgba(60,60,67,.08);
	      font-size: 13.5px;
	      font-weight: 600;
	      line-height: 1.5;
	      overflow-wrap: anywhere;
	      word-break: break-word;
	      white-space: normal;
	    }

    .product-insight-block.key .product-pill {
      color: rgba(6, 52, 22, .92);
      background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.38)),
        rgba(35,177,78,.12);
      border-color: rgba(35,177,78,.16);
    }

    .result-card.product-analysis-card {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

	    .result-card.product-analysis-card::before {
	      display: none;
	    }

		    .result-card.product-analysis-card > .chip-row {
		      margin: 12px 0 22px;
		    }

    .result-card.product-analysis-card > .product-positioning {
      margin-top: 0;
    }

    .product-analysis-embedded {
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

			    .result-card.structure-analysis-card {
			      --structure-content-indent: 16px;
			      padding: 0;
	      border: 0;
	      background: transparent;
	      box-shadow: none;
	      backdrop-filter: none;
	      -webkit-backdrop-filter: none;
	    }

	    .result-card.structure-analysis-card::before {
	      display: none;
	    }

		    .structure-analysis-card > h4,
		    .structure-analysis-card > .chip-row,
		    .structure-analysis-card > .structure-summary {
		      margin-left: var(--structure-content-indent);
		      max-width: calc(100% - var(--structure-content-indent));
		    }

		    .structure-analysis-card > .structure-block {
		      margin-left: var(--structure-content-indent);
		      max-width: calc(100% - var(--structure-content-indent));
		    }

		    .structure-analysis-card .structure-item,
		    .structure-analysis-card .structure-panel,
		    .structure-analysis-card .structure-timeline-item {
		      padding-left: 0;
		      padding-right: 0;
		      border-color: transparent;
		      background: transparent;
		      box-shadow: none;
		    }

	    .pre-wrap { white-space: pre-wrap; }

    .structure-block {
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }

    .structure-block h5 {
      margin: 0 0 6px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--text);
    }

    .structure-panel {
      padding: 12px;
      border-radius: var(--radius-inner);
      border: 1px solid rgba(255,255,255,.58);
      background: rgba(255,255,255,.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
    }

    .structure-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .structure-item {
      padding: 11px 12px;
      border-radius: var(--radius-inner);
      background: rgba(255,255,255,.38);
      border: 1px solid rgba(255,255,255,.56);
    }

    .structure-item b {
      display: block;
      margin-bottom: 4px;
      color: var(--text);
      font-size: 12px;
      line-height: 1.35;
    }

    .structure-item span,
    .structure-source {
      color: rgba(29,29,31,.84);
      font-size: 14px;
      line-height: 1.74;
      overflow-wrap: anywhere;
    }

    .structure-source {
      max-height: none;
      overflow: visible;
      white-space: pre-wrap;
    }

    .training-data-section {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .training-data-section + .row-actions {
      margin-top: 24px;
    }

    .training-data-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.4;
    }

    .training-data-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .training-data-grid.four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .training-data-section input {
      color: #1d1d1f;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .training-data-section input::placeholder {
      font-size: 12px;
    }

    .qianchuan-metric-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .qianchuan-metric-card {
      display: grid;
      gap: 8px;
      min-height: 86px;
      padding: 16px;
      border-radius: 18px;
      border: 1px solid rgba(0,122,255,.16);
      background: rgba(255,255,255,.58);
      box-shadow: none;
    }

    .qianchuan-metric-card span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.3;
    }

    .qianchuan-metric-card b {
      min-width: 0;
      color: var(--text);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.2;
      word-break: break-word;
    }

    .conversion-funnel {
      --funnel-row-height: clamp(72px, 6.8cqw, 96px);
      --funnel-gap: clamp(10px, 1cqw, 14px);
      --funnel-slant: clamp(26px, 2.8cqw, 40px);
      --funnel-shift: clamp(16px, 1.45cqw, 22px);
      --funnel-connector-width: clamp(48px, 4.6cqw, 68px);
      --funnel-bars-height: calc(var(--funnel-row-height) * 5 + var(--funnel-gap) * 4);
      display: grid;
      grid-template-columns: minmax(620px, 60%) minmax(300px, 40%);
      gap: clamp(76px, 7.2cqw, 104px);
      align-items: start;
    }

    .conversion-funnel-bars {
      position: relative;
      display: grid;
      gap: var(--funnel-gap);
    }

    .conversion-funnel-row {
      display: grid;
      grid-template-columns: minmax(300px, 39%) minmax(260px, 1fr);
      gap: 0;
      align-items: center;
      min-height: var(--funnel-row-height);
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: 0;
    }

    .conversion-funnel-label {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: var(--funnel-row-height);
      padding: 0 calc(var(--funnel-slant) + 18px) 0 24px;
      border-radius: 4px 0 0 4px;
      background: #eef4ff;
      color: rgba(29,29,31,.78);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
    }

    .conversion-funnel-label > span,
    .conversion-funnel-label b {
      position: relative;
      z-index: 2;
    }

    .conversion-funnel-label b {
      color: #1d1d1f;
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
    }

    .conversion-funnel-track {
      position: relative;
      z-index: 0;
      overflow: hidden;
      height: var(--funnel-row-height);
      margin-left: calc(var(--funnel-slant) * -1);
      width: calc(100% + var(--funnel-slant));
      border-radius: 0 4px 4px 0;
      background: #eef4ff;
    }

    .conversion-funnel-fill {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: min(calc(var(--funnel-level, 0) * var(--funnel-shift)), 42%);
      width: auto;
      border-radius: 0 4px 4px 0;
      clip-path: polygon(0 0, 100% 0, 100% 100%, var(--funnel-slant) 100%);
      background: linear-gradient(90deg, rgba(8,119,255,.94), rgba(100,130,255,.78));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.34);
    }

    .conversion-layer-connector {
      position: absolute;
      z-index: 2;
      left: calc(100% + clamp(14px, 1.2cqw, 20px));
      top: calc(var(--funnel-row-height) * .5 + var(--connector-index, 0) * (var(--funnel-row-height) + var(--funnel-gap)));
      width: var(--funnel-connector-width);
      height: calc(var(--funnel-row-height) + var(--funnel-gap));
      border-top: 4px solid rgba(29,29,31,.08);
      border-right: 4px solid rgba(29,29,31,.08);
      border-bottom: 4px solid rgba(29,29,31,.08);
      border-radius: 0 8px 8px 0;
      pointer-events: none;
    }

    .conversion-layer-connector::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -10px;
      transform: translateX(-100%);
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 14px solid rgba(29,29,31,.08);
    }

    .conversion-rate-panel {
      position: relative;
      display: grid;
      grid-template-columns: minmax(118px, .88fr) minmax(82px, .62fr);
      gap: 18px;
      align-items: center;
      min-height: var(--funnel-bars-height);
      align-self: stretch;
    }

    .conversion-rate-overall-path {
      position: absolute;
      z-index: 0;
      left: calc(0px - var(--funnel-connector-width) - clamp(22px, 2.2cqw, 36px));
      right: clamp(62px, 24%, 86px);
      top: calc(var(--funnel-row-height) * .5);
      bottom: calc(var(--funnel-row-height) * .5);
      border-top: 4px solid rgba(29,29,31,.08);
      border-right: 4px solid rgba(29,29,31,.08);
      border-bottom: 4px solid rgba(29,29,31,.08);
      border-radius: 0 8px 8px 0;
      pointer-events: none;
    }

    .conversion-rate-overall-path::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -10px;
      transform: translateX(-100%);
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 14px solid rgba(29,29,31,.08);
    }

    .conversion-funnel-rates {
      position: relative;
      z-index: 1;
      min-height: var(--funnel-bars-height);
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .conversion-rate-item {
      display: grid;
      gap: 4px;
      position: absolute;
      left: 0;
      top: calc(var(--funnel-row-height) * .54 + var(--rate-index, 0) * (var(--funnel-row-height) + var(--funnel-gap)));
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: #1d1d1f;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
    }

    .conversion-rate-item b {
      color: #1d1d1f;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .conversion-rate-floating {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 4px;
      min-width: 82px;
      align-self: center;
      color: #1d1d1f;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
    }

    .conversion-rate-floating b {
      font-size: 17px;
      font-weight: 700;
    }

    .conversion-rate-floating::before {
      display: none;
    }

    .conversion-empty {
      padding: 16px;
      border-radius: var(--radius-inner);
      color: var(--muted);
      background: rgba(255,255,255,.34);
      border: 1px dashed rgba(0,122,255,.18);
      font-size: 13px;
      line-height: 1.6;
    }

    @container (max-width: 560px) {
      .conversion-funnel {
        grid-template-columns: 1fr;
      }

      .conversion-rate-panel {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .conversion-layer-connector {
        display: none;
      }

      .conversion-rate-overall-path {
        display: none;
      }

      .conversion-funnel-rates {
        display: grid;
        gap: 12px;
        min-height: auto;
      }

      .conversion-rate-floating {
        min-width: 0;
      }

      .conversion-rate-item {
        position: static;
      }

      .conversion-funnel-track {
        margin-left: 0;
        width: auto;
      }
    }

    @media (max-width: 560px) {
      .training-data-grid,
      .training-data-grid.four,
      .qianchuan-metric-grid,
      .conversion-funnel {
        grid-template-columns: 1fr;
      }

      .conversion-funnel-row {
        grid-template-columns: minmax(118px, 34%) minmax(0, 1fr);
        min-height: 58px;
      }

      .conversion-funnel-label,
      .conversion-funnel-track {
        min-height: 58px;
        height: 58px;
      }

      .conversion-funnel-track {
        margin-left: 0;
        width: auto;
      }

      .conversion-rate-panel {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .conversion-layer-connector {
        display: none;
      }

      .conversion-rate-overall-path {
        display: none;
      }

      .conversion-funnel-rates {
        display: grid;
        gap: 12px;
        min-height: auto;
      }

      .conversion-rate-item {
        position: static;
      }
    }

    .structure-timeline {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .structure-timeline-item {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 12px;
      padding: 12px;
      border-radius: var(--radius-inner);
      border: 1px solid rgba(255,255,255,.58);
      background: rgba(255,255,255,.34);
    }

    .structure-time {
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
    }

    .structure-timeline-item strong {
      display: block;
      margin-bottom: 4px;
      color: var(--text);
      font-size: 14px;
      line-height: 1.4;
    }

    .structure-timeline-item p {
      margin: 0 0 4px;
    }

    .script-action-row {
      justify-content: flex-end;
      margin: 14px 0 0;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.58);
    }

    .script-action-row .button.active-soft {
      color: var(--accent);
      background: var(--control-active);
      border-color: var(--accent-line);
      box-shadow: 0 12px 28px rgba(0,122,255,.10), inset 0 1px 0 rgba(255,255,255,.82);
    }

    .migration-basis {
      display: grid;
      gap: 14px;
      margin: 14px 0 12px;
      padding: 16px;
      border-radius: var(--radius-inner);
      border: 1px solid rgba(142, 197, 255, .42);
      background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(229,247,255,.44));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 14px 34px rgba(30, 126, 220, .08);
    }

    .migration-basis-head {
      display: grid;
      gap: 8px;
    }

    .migration-basis-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .migration-basis-title {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .migration-basis-title svg {
      color: var(--accent);
    }

    .migration-basis-subtitle {
      margin: 0;
      color: rgba(29,29,31,.62);
      font-size: 13px;
      line-height: 1.55;
    }

    .migration-basis-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .migration-basis-chip {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(142, 197, 255, .46);
      background: rgba(255,255,255,.62);
      color: rgba(0, 122, 255, .88);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }

    .migration-basis-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 22px;
    }

    .migration-basis-block {
      min-width: 0;
      padding: 0 4px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .migration-basis-block h5 {
      margin: 0 0 8px;
      color: rgba(29,29,31,.92);
      font-size: 14px;
      font-weight: 700;
    }

    .migration-basis-block ul {
      display: grid;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .migration-basis-block li {
      color: rgba(29,29,31,.76);
      font-size: 13px;
      line-height: 1.55;
      word-break: break-word;
    }

    @media (max-width: 1100px) {
      .migration-basis-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 680px) {
      .migration-basis-grid {
        grid-template-columns: 1fr;
      }
    }

    .script-panel {
      display: grid;
      gap: 0;
      overflow: hidden;
      margin-top: 12px;
      border-radius: var(--radius-inner);
      border: 1px solid rgba(255,255,255,.58);
      background: rgba(255,255,255,.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
    }

    .script-meta {
      display: grid;
      gap: 8px;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(255,255,255,.50);
      background: rgba(255,255,255,.28);
    }

    .script-meta-line {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      color: rgba(29,29,31,.84);
      font-size: 14px;
      line-height: 1.72;
      overflow-wrap: anywhere;
    }

    .script-meta-line b {
      color: var(--text);
      font-weight: 700;
    }

    .script-table {
      display: grid;
      min-width: 0;
    }

	    .script-table-row {
	      display: grid;
	      grid-template-columns: 36px 66px 126px minmax(180px, .72fr) minmax(190px, 1.18fr) minmax(86px, .42fr);
	      gap: 6px;
	      padding: 13px 16px;
	      border-bottom: 1px solid rgba(255,255,255,.48);
      color: rgba(29,29,31,.84);
      font-size: 14px;
      line-height: 1.68;
    }

    .script-table-row:last-child {
      border-bottom: 0;
    }

    .script-table-row.head {
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
      background: rgba(255,255,255,.34);
    }

    .script-table-row > span {
      min-width: 0;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }

    .script-editable-cell {
      display: block;
      min-height: calc(1.68em + 12px);
      margin: -6px -8px;
      padding: 6px 8px;
      cursor: text;
      border-radius: 12px;
      transition: background .16s ease, box-shadow .16s ease;
    }

    .script-editable-cell:hover {
      background: rgba(0, 122, 255, .06);
      box-shadow: inset 0 0 0 1px rgba(0, 122, 255, .16);
    }

    .script-editing-cell {
      min-height: 0;
      padding: 0;
    }

    .script-editable-cell.script-editing-cell,
    .script-editable-cell.script-editing-cell:hover {
      background: transparent;
      box-shadow: none;
    }

    .script-cell-editor {
      display: block;
      box-sizing: border-box;
      width: 100%;
      min-width: 100%;
      min-height: 96px;
      resize: vertical;
      border: 1px solid rgba(0, 122, 255, .32);
      border-radius: 14px;
      padding: 12px 14px;
      background: rgba(255,255,255,.96);
      background-clip: padding-box;
      color: var(--text);
      font: inherit;
      line-height: 1.6;
      outline: none;
      overflow: auto;
      text-indent: 0;
      box-shadow:
        inset 0 0 0 1px rgba(0, 122, 255, .08),
        0 6px 18px rgba(0, 122, 255, .07);
    }

    .script-cell-editor:focus {
      border-color: rgba(0, 122, 255, .42);
      background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.92)),
        rgba(255,255,255,.96);
      box-shadow:
        inset 0 0 0 1px rgba(0, 122, 255, .14),
        0 0 0 2px rgba(0, 122, 255, .08),
        0 8px 20px rgba(0, 122, 255, .08);
    }

    .script-table-row > span:nth-child(2) .script-cell-editor {
      min-height: 44px;
      padding-block: 10px;
      resize: none;
    }

    .script-shot {
      color: var(--text);
      font-weight: 700;
    }

    .script-row {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(255,255,255,.48);
    }

    .script-row:last-child {
      border-bottom: 0;
    }

    .script-row h4 {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.4;
      color: var(--text);
    }

    .script-row p {
      margin: 0;
      font-size: 14px;
      line-height: 1.74;
      color: rgba(29,29,31,.84);
    }

    .time {
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
    }

    .hook-list,
    .record-list,
    .creator-list,
    .favorite-list {
      display: grid;
      gap: 12px;
    }

    .comment-panel {
      display: grid;
      gap: 0;
      overflow: hidden;
      margin-top: 12px;
      border-radius: var(--radius-inner);
      border: 1px solid rgba(255,255,255,.58);
      background: rgba(255,255,255,.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
    }

    .comment-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10.8px;
      padding: 12.6px 16.2px;
      border-bottom: 1px solid rgba(255,255,255,.48);
    }

    .comment-row:last-child {
      border-bottom: 0;
    }

    .comment-row.comment-editing-row {
      align-items: flex-start;
    }

    .comment-text {
      flex: 1 1 auto;
      margin: 0;
      min-width: 0;
      color: rgba(29,29,31,.84);
      font-size: 14px;
      line-height: 1.53;
    }

    .comment-inline-editor {
      flex: 1 1 auto;
      min-width: 0;
      width: 100%;
      min-height: 68.4px;
      padding: 0;
      border: 0;
      border-radius: 0;
      outline: 0;
      color: rgba(29,29,31,.88);
      background: transparent;
      box-shadow: none;
      resize: vertical;
      font: inherit;
      line-height: 1.53;
    }

    .comment-inline-editor:focus {
      color: rgba(29,29,31,.95);
    }

    .comment-actions {
      display: flex;
      flex: 0 0 auto;
      justify-content: flex-end;
      gap: 7.2px;
    }

    .hook-content-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 10px;
    }

    .hook-content-row p {
      flex: 1 1 auto;
      min-width: 0;
    }

    .hook-card.hook-editing-card {
      cursor: default;
    }

    .hook-card.hook-editing-card .hook-content-row {
      align-items: flex-start;
    }

    .hook-inline-editor {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 44px;
      width: 100%;
      padding: 0;
      border: 0;
      border-radius: 0;
      outline: 0;
      color: rgba(29,29,31,.84);
      background: transparent;
      box-shadow: none;
      resize: vertical;
      font: inherit;
      line-height: 1.62;
    }

    .hook-inline-editor:focus {
      color: rgba(29,29,31,.92);
    }

    .hook-actions {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .favorite-card {
      position: relative;
      padding-right: 46px;
    }

    .favorite-card .row-actions {
      margin-top: 12px;
    }

    .user-note {
      width: 50%;
      min-width: 110px;
      min-height: 34px;
      padding-inline: 10px;
      font-size: inherit;
    }

    .user-note::placeholder,
    .user-note::-webkit-input-placeholder {
      font-size: inherit;
    }

    .user-list-title {
      align-items: center;
    }

    .user-search {
      width: min(273px, 27.3vw);
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 14px;
      border: 1px solid var(--frost-border);
      border-radius: 18px;
      background: rgba(255,255,255,.56);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 12px 28px rgba(15, 23, 42, .07);
      backdrop-filter: blur(20px) saturate(170%);
      -webkit-backdrop-filter: blur(20px) saturate(170%);
    }

    .user-search .icon {
      width: 18px;
      height: 18px;
      color: var(--page-accent, var(--primary));
      flex: 0 0 auto;
    }

    .user-search input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 14px;
      font-weight: 700;
    }

    .user-search input::placeholder {
      color: var(--placeholder);
      font-weight: 600;
    }

    .user-search-empty td {
      text-align: center;
      color: var(--muted);
      font-weight: 700;
    }

    @media (max-width: 760px) {
      .user-list-title {
        align-items: stretch;
      }

      .user-search {
        width: 100%;
      }
    }

    .user-table {
      min-width: 1180px;
    }

    .user-table th,
    .user-table td {
      vertical-align: middle;
      padding-block: 12px;
    }

    .user-table th:nth-child(1),
    .user-table td:nth-child(1) { width: 170px; }

    .user-table th:first-child,
    .user-table td:first-child {
      padding-left: 30px;
    }

    .user-table th:nth-child(2),
    .user-table td:nth-child(2) { width: 140px; }
    .user-table th:nth-child(3),
    .user-table td:nth-child(3) { width: 160px; }
    .user-table th:nth-child(4),
    .user-table td:nth-child(4) { width: 220px; }
    .user-table th:nth-child(5),
    .user-table td:nth-child(5),
    .user-table th:nth-child(6),
    .user-table td:nth-child(6) { width: 170px; }
    .user-table th:nth-child(7),
    .user-table td:nth-child(7) {
      width: 320px;
      padding-left: 36px;
      padding-right: 30px;
    }

    .user-table th:nth-child(7) {
      text-align: left;
    }

    .user-table td:nth-child(7) {
      text-align: left;
    }

    .user-role-select {
      min-width: 112px;
      height: 38px;
      padding: 0 30px 0 12px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 700;
    }

    .user-account-cell {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 100%;
      line-height: 1;
    }

    .user-account-cell b {
      max-width: 96px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .user-table .record-actions {
      flex-wrap: nowrap;
      gap: 6px;
      justify-content: flex-start;
    }

    .user-token-panel {
      display: grid;
      gap: 18px;
    }

    .system-token-main-row {
      display: grid;
      grid-template-columns: clamp(300px, 28%, 500px) minmax(0, 1fr);
      gap: 16px;
      align-items: stretch;
    }

    .user-token-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .system-token-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-content: stretch;
      min-width: 0;
    }

    .system-token-summary .user-token-stat {
      min-height: 150px;
      display: grid;
      align-content: center;
      padding: 24px 28px;
      border-color: rgba(190,222,255,.68);
      border-radius: 26px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,252,255,.64)),
        rgba(255,255,255,.56);
      box-shadow:
        0 18px 42px rgba(0,122,255,.08),
        inset 0 1px 0 rgba(255,255,255,.92);
    }

    .system-token-summary .user-token-stat span {
      font-size: 14px;
    }

    .system-token-summary .user-token-stat b {
      margin-top: 12px;
      font-size: 32px;
      font-weight: 760;
    }

    .user-token-stat {
      padding: 16px;
      border: 1px solid rgba(190,222,255,.64);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(247,252,255,.62)),
        rgba(255,255,255,.52);
      box-shadow:
        0 14px 34px rgba(0,122,255,.07),
        inset 0 1px 0 rgba(255,255,255,.88);
    }

    .user-token-stat span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
    }

    .user-token-stat b {
      display: block;
      margin-top: 8px;
      color: var(--text);
      font-size: 24px;
      font-weight: 700;
      line-height: 1.1;
    }

    .token-activity-card {
      padding: 18px;
      border: 1px solid rgba(255,255,255,.58);
      border-radius: var(--radius-inner);
      background:
        linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.36)),
        rgba(255,255,255,.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
      overflow: hidden;
    }

    .system-token-activity {
      min-width: 0;
    }

    .token-activity-selected {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      min-height: 34px;
      margin-bottom: 14px;
      padding: 0 13px;
      border: 1px solid rgba(60,60,67,.10);
      border-radius: 999px;
      color: rgba(29,29,31,.92);
      background: rgba(255,255,255,.66);
      box-shadow:
        0 10px 24px rgba(0,122,255,.08),
        inset 0 1px 0 rgba(255,255,255,.86);
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .token-activity-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }

    .token-activity-head h4 {
      margin: 0;
      color: var(--text);
      font-size: 17px;
      font-weight: 700;
      line-height: 1.3;
    }

    .token-activity-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .token-activity-toolbar .token-activity-selected {
      margin-bottom: 0;
    }

    .token-activity-toolbar .token-activity-tabs {
      flex: 0 0 auto;
    }

    .token-activity-tabs {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .token-activity-tab {
      min-height: 32px;
      padding: 0 10px;
      border: 0;
      border-radius: 999px;
      color: rgba(60,60,67,.62);
      background: transparent;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .token-activity-tab.active {
      color: var(--text);
      background: rgba(255,255,255,.58);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 18px rgba(0,122,255,.08);
    }

    .token-heatmap-scroll {
      overflow-x: auto;
      padding: 6px 8px 8px;
      margin: -2px -8px 0;
    }

    .token-heatmap-track {
      width: 100%;
      min-width: var(--token-track-width, 896px);
    }

    .token-heatmap-grid {
      display: grid;
      grid-template-columns: repeat(var(--token-weeks, 53), 13px);
      grid-template-rows: repeat(7, 13px);
      grid-auto-flow: column;
      gap: 4.25px;
      justify-content: space-between;
      width: 100%;
    }

    .token-cell {
      width: 13px;
      height: 13px;
      padding: 0;
      border: 0;
      border-radius: 5px;
      background: rgba(60,60,67,.06);
      cursor: pointer;
    }

    .token-cell.l1 { background: rgba(20,184,166,.24); }
    .token-cell.l2 { background: rgba(14,165,233,.50); }
    .token-cell.l3 { background: linear-gradient(135deg, rgba(8,119,255,.86), rgba(39,199,111,.82)); }
    .token-cell.outside { opacity: .18; }
    .token-cell:hover {
      outline: 2px solid rgba(0,122,255,.24);
      outline-offset: 2px;
    }

    .token-cell.selected {
      outline: 2px solid rgba(0,122,255,.82);
      outline-offset: 1px;
      box-shadow: 0 0 0 3px rgba(0,122,255,.13);
    }

    .token-month-labels {
      display: grid;
      grid-template-columns: repeat(var(--token-weeks, 53), 13px);
      gap: 4.25px;
      justify-content: space-between;
      width: 100%;
      min-width: var(--token-track-width, 896px);
      margin-top: 12px;
      color: rgba(60,60,67,.62);
      font-size: 13px;
      font-weight: 700;
    }

    .token-month-labels span {
      grid-row: 1;
      white-space: nowrap;
      justify-self: start;
    }

    .token-activity-note {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .modal.token-usage-modal {
      background: rgba(13, 24, 38, .20);
    }

    .modal.token-usage-modal .modal-box {
      width: min(1360px, calc(100vw - 48px));
      max-height: min(820px, calc(100vh - 48px));
      gap: 18px;
      padding: 24px;
      border-radius: 30px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.88), rgba(235,248,255,.62)),
        rgba(255,255,255,.58);
    }

    .modal.token-usage-modal .modal-head {
      position: static;
      min-height: 0;
      padding: 15px 16px;
      border: 1px solid rgba(255,255,255,.66);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.56)),
        rgba(255,255,255,.52);
      box-shadow:
        0 16px 36px rgba(0,122,255,.08),
        inset 0 1px 0 rgba(255,255,255,.86);
    }

    .modal.token-usage-modal .modal-title {
      display: flex;
      align-items: center;
      min-width: 0;
      font-size: 0;
    }

    .token-modal-title-main {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      gap: 12px;
    }

    .token-modal-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      border-radius: 15px;
      color: #fff;
      background: linear-gradient(135deg, rgba(0,122,255,.92), rgba(39,199,111,.82));
      box-shadow: 0 10px 22px rgba(0,122,255,.18), inset 0 1px 0 rgba(255,255,255,.34);
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
    }

    .token-modal-copy {
      display: grid;
      min-width: 0;
      gap: 3px;
    }

    .token-modal-copy b,
    .token-modal-copy small {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .token-modal-copy b {
      color: var(--text);
      font-size: 21px;
      line-height: 1.2;
    }

    .token-modal-copy small {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.3;
    }

    .modal.token-usage-modal #closeModal {
      width: 44px;
      height: 44px;
      min-height: 44px;
      flex: 0 0 44px;
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.52)),
        rgba(255,255,255,.56);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 22px rgba(0,0,0,.06);
    }

    .modal.token-usage-modal #modalBody {
      padding: 0;
    }

    .modal.token-usage-modal .user-token-panel {
      gap: 18px;
    }

    .modal.token-usage-modal .user-token-summary {
      gap: 14px;
    }

    .modal.token-usage-modal .user-token-stat {
      min-height: 104px;
      padding: 18px 20px;
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46)),
        rgba(255,255,255,.42);
      box-shadow: 0 14px 32px rgba(0,122,255,.06), inset 0 1px 0 rgba(255,255,255,.86);
    }

    .modal.token-usage-modal .user-token-stat span {
      font-size: 13px;
    }

    .modal.token-usage-modal .user-token-stat b {
      margin-top: 10px;
      font-size: 28px;
    }

    .modal.token-usage-modal .token-activity-card {
      padding: 22px 24px 20px;
      border-radius: 26px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.44)),
        rgba(255,255,255,.40);
      box-shadow: 0 18px 42px rgba(0,122,255,.07), inset 0 1px 0 rgba(255,255,255,.84);
    }

    .modal.token-usage-modal .token-activity-head {
      margin-bottom: 16px;
    }

    .token-user-rank {
      display: flex;
      align-items: stretch;
      gap: 12px;
      margin-top: 14px;
      padding-bottom: 4px;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .token-rank-card {
      position: relative;
      flex: 0 0 220px;
      display: grid;
      align-content: space-between;
      gap: 12px;
      min-height: 138px;
      padding: 14px;
      border: 1px solid rgba(255,255,255,.54);
      border-radius: var(--radius-inner);
      background:
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.38)),
        rgba(255,255,255,.42);
      box-shadow:
        0 14px 30px rgba(48,85,120,.08),
        inset 0 1px 0 rgba(255,255,255,.82);
      scroll-snap-align: start;
    }

    .system-token-rank-card {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .token-rank-card.gold {
      border-color: rgba(245,158,11,.30);
      background: linear-gradient(180deg, rgba(255,248,232,.86), rgba(255,255,255,.48));
    }

    .token-rank-card.silver {
      border-color: rgba(148,163,184,.34);
      background: linear-gradient(180deg, rgba(244,248,252,.88), rgba(255,255,255,.48));
    }

    .token-rank-card.bronze {
      border-color: rgba(180,83,9,.26);
      background: linear-gradient(180deg, rgba(255,241,226,.84), rgba(255,255,255,.48));
    }

    .token-rank-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .token-rank-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      color: var(--accent);
      background: rgba(0,122,255,.10);
      font-size: 12px;
      font-weight: 700;
    }

    .token-rank-crown {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 26px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .token-rank-crown .icon {
      width: 14px;
      height: 14px;
    }

    .token-rank-crown.gold {
      color: #9a6700;
      background: rgba(255,214,102,.30);
    }

    .token-rank-crown.silver {
      color: #64748b;
      background: rgba(203,213,225,.42);
    }

    .token-rank-crown.bronze {
      color: #9a3412;
      background: rgba(251,146,60,.20);
    }

    .token-rank-account {
      min-width: 0;
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .token-rank-value {
      color: var(--text);
      font-size: 20px;
      line-height: 1.05;
      font-weight: 700;
    }

    .token-rank-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      color: rgba(29,29,31,.68);
      font-size: 12px;
      font-weight: 600;
    }

    .hook-card {
      position: relative;
      overflow: hidden;
      border-color: var(--separator-soft);
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .hook-list .hook-card {
      padding-block: max(12px, calc(var(--result-padding) - 4px));
    }

    .hook-list .hook-card h4 {
      margin-bottom: 8px;
    }

    .hook-list .hook-card .hook-content-row {
      gap: 14px;
      margin-top: 6px;
    }

    .hook-list .hook-card p {
      line-height: 1.62;
    }

    .hook-card:hover {
      border-color: var(--accent-line);
      background: var(--control-bg-hover);
      box-shadow: 0 10px 24px rgba(0,122,255,.08), inset 0 1px 0 rgba(255,255,255,.72);
    }

    .hook-card.selected {
      border-color: rgba(0,122,255,.46);
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.62)),
        rgba(0,122,255,.16);
      box-shadow:
        0 18px 36px rgba(0,122,255,.16),
        0 0 0 1px rgba(0,122,255,.12),
        inset 0 1px 0 rgba(255,255,255,.9);
      transform: translateY(-1px);
    }

    .hook-selected-badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 9px;
      margin-left: 6px;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(135deg, #007aff, #32b8ff);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      box-shadow: 0 8px 18px rgba(0,122,255,.20);
    }

    .learning-note {
      margin: -2px 0 12px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
    }

	    .create-learning-step .action-status-slot:not(:empty) + .learning-note {
	      margin-top: 8px;
	    }

	    .create-flow-panel .step-card .action-status-slot:not(:empty) + .step-subtitle,
	    .create-flow-panel .step-card .action-status-slot:not(:empty) + .field,
	    .create-flow-panel .step-card .action-status-slot:not(:empty) + .rewrite-video-input-grid {
	      margin-top: 8px;
	    }

    .learning-actions {
      margin: 18px 0 10px;
    }

    .learning-filter-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .learning-brand-control {
      display: block;
    }

    .learning-brand-control input {
      min-width: 0;
    }

    .learning-brand-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 42px;
      padding: 0 14px;
      align-self: stretch;
      white-space: nowrap;
    }

    .learning-query-field {
      align-self: end;
      margin-bottom: 0;
    }

    .learning-query-field .learning-brand-button {
      min-height: 44px;
      height: 44px;
      font-size: 14px;
      font-weight: 600;
    }

    .learning-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 8px;
      max-height: calc(124px * 4 + 10px * 3);
      padding: 2px;
      overflow-y: auto;
      scroll-behavior: smooth;
      overscroll-behavior: contain;
    }

    .learning-list-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      margin-top: 8px;
    }

    .learning-list-shell.has-scroll-controls {
      grid-template-columns: minmax(0, 1fr) 38px;
      align-items: stretch;
    }

	    .learning-list-shell .learning-list {
	      margin-top: 0;
	    }

	    .learning-empty-inline {
	      min-height: 96px;
	      display: grid;
	      place-items: center;
	      margin: 8px 0 0;
	      padding: 18px 8px;
	      color: var(--muted);
	      font-size: 14px;
	      line-height: 1.75;
	      text-align: center;
	    }

	    .learning-scroll-controls {
	      display: grid;
	      align-content: center;
	      gap: 8px;
    }

    .learning-scroll-button {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      color: var(--accent);
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.54)),
        rgba(255,255,255,.58);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 10px 22px rgba(31,78,121,.08);
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    }

    .learning-scroll-button:hover {
      transform: translateY(-1px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 14px 26px rgba(0,122,255,.12);
    }

    .learning-scroll-button.down .icon {
      transform: rotate(180deg);
    }

    .learning-card {
      width: 100%;
      display: grid;
      min-width: 0;
      min-height: 124px;
      gap: 9px;
      padding: 12px;
      text-align: left;
      border-radius: var(--radius-inner);
      color: var(--text);
      background: var(--control-bg);
      border: 1px solid var(--separator-soft);
      box-shadow: var(--control-shadow);
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .learning-card:hover {
      border-color: var(--accent-line);
      background: var(--control-bg-hover);
      box-shadow: 0 10px 24px rgba(0,122,255,.08), inset 0 1px 0 rgba(255,255,255,.72);
    }

    .learning-card.selected {
      border-color: transparent;
      background: var(--control-active);
      box-shadow: 0 12px 28px rgba(0,122,255,.10), inset 0 1px 0 rgba(255,255,255,.82);
      transform: translateY(-1px);
    }

    .learning-card-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
      min-width: 0;
    }

    .learning-card-title {
      min-width: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .learning-card-head .chip {
      flex: 0 0 auto;
    }

    .learning-card-meta {
      gap: 6px;
      min-width: 0;
    }

    .learning-card-meta .chip {
      min-height: 24px;
      max-width: 100%;
      padding-inline: 9px;
      font-size: 11px;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .learning-card-preview {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.65;
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .compact-empty {
      min-height: 96px;
      padding: 18px;
    }

    .history-card {
      position: relative;
      min-height: 154px;
      padding-right: 52px;
      cursor: pointer;
    }

    .history-card[data-history-id] {
      display: flex;
      flex-direction: column;
    }

    .history-card h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      padding-right: 8px;
      color: var(--text);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.38;
    }

    .history-summary {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
    }

    .history-card[data-history-id] .history-summary {
      margin-top: auto;
      padding-top: 14px;
    }

    .history-delete {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--muted);
      background: rgba(255,255,255,.58);
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: 0 8px 18px rgba(29,29,31,.06), inset 0 1px 0 rgba(255,255,255,.84);
      transition: color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .history-delete:hover {
      color: var(--rose);
      background: rgba(255,255,255,.86);
      box-shadow: 0 10px 22px rgba(255,55,95,.12), inset 0 1px 0 rgba(255,255,255,.92);
    }

    .history-delete .icon {
      width: 14px;
      height: 14px;
    }

	    .chip {
	      min-height: 28px;
	      display: inline-flex;
	      align-items: center;
	      gap: 6px;
	      max-width: 100%;
	      min-width: 0;
	      padding: 0 12px;
      border: 1px solid rgba(0,122,255,.16);
      border-radius: 999px;
      background: var(--control-bg);
      color: var(--accent);
      box-shadow: 0 8px 18px rgba(0,122,255,.05), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(0,122,255,.07);
      font-size: 12px;
      font-weight: 600;
	      white-space: normal;
	      overflow-wrap: anywhere;
	      word-break: break-word;
	    }

    .chip.primary,
    .chip.green {
      color: var(--accent);
      border-color: var(--accent-line);
      background: var(--control-bg);
    }

    .chip.primary {
      color: #075bd8;
      border-color: rgba(8,119,255,.22);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46)),
        rgba(8,119,255,.10);
      box-shadow: 0 8px 18px rgba(8,119,255,.07), inset 0 1px 0 rgba(255,255,255,.92);
    }

    .chip.green {
      color: #0f7a37;
      border-color: rgba(35,177,77,.24);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46)),
        rgba(35,177,77,.12);
      box-shadow: 0 8px 18px rgba(35,177,77,.07), inset 0 1px 0 rgba(255,255,255,.92);
    }

    .chip.amber {
      color: #8a4f00;
      border-color: rgba(255,159,10,.28);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46)),
        rgba(255,159,10,.13);
      box-shadow: 0 8px 18px rgba(255,159,10,.08), inset 0 1px 0 rgba(255,255,255,.92);
    }

    .chip.rose {
      color: #b31b45;
      border-color: rgba(255,55,95,.26);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46)),
        rgba(255,55,95,.11);
      box-shadow: 0 8px 18px rgba(255,55,95,.07), inset 0 1px 0 rgba(255,255,255,.92);
    }

    .chip.cyan {
      color: #08779a;
      border-color: rgba(14,165,233,.25);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46)),
        rgba(14,165,233,.11);
      box-shadow: 0 8px 18px rgba(14,165,233,.07), inset 0 1px 0 rgba(255,255,255,.92);
    }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--frost-border-soft);
      border-radius: var(--radius-inner);
      background: var(--frost-card);
      box-shadow: var(--frost-shadow);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }

    table {
      width: 100%;
      min-width: 920px;
      border-collapse: collapse;
      font-size: 13px;
    }

    .training-script-table {
      min-width: 2320px;
      table-layout: fixed;
    }

    .training-table-wrap {
      width: 100%;
      max-width: 100%;
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(0,122,255,.38) rgba(60,60,67,.08);
    }

    .training-table-wrap::-webkit-scrollbar {
      height: 12px;
    }

    .training-table-wrap::-webkit-scrollbar-track {
      border-radius: 999px;
      background: rgba(60,60,67,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }

    .training-table-wrap::-webkit-scrollbar-thumb {
      border: 3px solid rgba(255,255,255,.72);
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(0,122,255,.62), rgba(20,184,166,.52));
    }

    .training-table-wrap::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(90deg, rgba(0,122,255,.78), rgba(20,184,166,.68));
    }

    .training-script-table .col-creator { width: 96px; }
    .training-script-table .col-script { width: 170px; }
    .training-script-table .col-product { width: 170px; }
    .training-script-table .col-category { width: 120px; }
    .training-script-table .col-owner { width: 104px; }
    .training-script-table .col-status { width: 90px; }
    .training-script-table .col-date { width: 230px; }
    .training-script-table .col-metric { width: 108px; }
    .training-script-table .col-roi { width: 92px; }
    .training-script-table .col-conversion { width: 126px; }
    .training-script-table .col-score { width: 82px; }
    .training-script-table .col-actions { width: 78px; }

    .training-script-table th,
    .training-script-table td {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .training-script-table .record-actions {
      flex-wrap: nowrap;
      gap: 6px;
    }

    .training-script-table .chip {
      max-width: none;
      justify-content: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1;
    }

    .training-status-chip {
      width: 64px;
    }

    .training-conversion-chip {
      width: 106px;
    }

    .training-score-chip {
      width: 54px;
    }

    th, td {
      padding: 13px 14px;
      border-bottom: 1px solid var(--separator-soft);
      text-align: left;
      white-space: nowrap;
      vertical-align: top;
      line-height: 1.45;
    }

    th {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      background: rgba(255,255,255,.44);
    }

    td { color: var(--text); }
    tbody tr:hover td { background: rgba(118,118,128,.06); }
    tr:last-child td { border-bottom: 0; }

    .script-deleted-row td {
      color: var(--muted);
      background: rgba(255,55,95,.035);
    }

    .script-owner-cell,
    .script-status-cell {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .mini-button {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 11px;
      border-radius: var(--radius-button);
      color: var(--accent);
      background: var(--control-bg);
      border: 1px solid var(--accent-line);
      box-shadow: 0 8px 18px rgba(0,122,255,.05), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(0,122,255,.07);
      font-size: 12px;
      font-weight: 600;
    }

    .mini-button.danger { color: var(--rose); border-color: rgba(255,55,95,.22); }

    .mini-button.primary {
      color: #fff;
      background: var(--accent-fill);
      border-color: transparent;
      box-shadow: none;
    }

    .mini-button.active-soft {
      color: var(--accent);
      background: var(--control-active);
      border-color: var(--accent-line);
      box-shadow: 0 10px 22px rgba(0,122,255,.10), inset 0 1px 0 rgba(255,255,255,.88);
    }

    .assistant-tools .assistant-file-button {
      width: 36px;
      min-width: 36px;
      height: 36px;
      min-height: 36px;
      flex: 0 0 36px;
      border-radius: 50%;
      color: rgba(60,60,67,.62);
      background: rgba(60,60,67,.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }

    .assistant-tools .assistant-send-button {
      background: rgba(60,60,67,.14);
    }

    .assistant-tools .assistant-send-button.is-ready {
      color: #fff;
      background: var(--accent-fill);
      box-shadow: none;
    }

    .empty {
      min-height: 220px;
      display: grid;
      place-items: center;
      padding: 28px;
      color: var(--muted);
      text-align: center;
      line-height: 1.75;
      border: 1px solid var(--frost-border-soft);
      border-radius: var(--radius-inner);
      background: var(--frost-card);
      box-shadow: var(--frost-shadow);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }

    .library-empty-plain {
      min-height: 220px;
      display: grid;
      place-items: center;
      padding: 28px 12px;
      color: var(--muted);
      text-align: center;
      line-height: 1.75;
    }

    .history-layout {
      display: grid;
      gap: var(--layout-gap);
      align-items: start;
    }

    .history-filter-card .section-title {
      align-items: center;
    }

    .history-filter-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: end;
    }

	    .history-filter-grid .field {
	      margin-bottom: 0;
	    }

	    .history-filter-reserve {
	      min-height: 128px;
	    }

	    .attachment-list-reserve {
	      min-height: 148px;
	    }

    .type-quick-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .type-quick-filter {
      min-height: 34px;
      padding: 0 14px;
      border: 1px solid rgba(0,122,255,.18);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,.55);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px rgba(0,0,0,.04);
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
    }

    .type-quick-filter:hover {
      color: var(--accent);
      border-color: rgba(0,122,255,.32);
      background: rgba(255,255,255,.76);
      transform: translateY(-1px);
    }

    .type-quick-filter.active {
      color: var(--accent);
      border-color: rgba(0,122,255,.38);
      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(230,242,255,.78));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(0,122,255,.12);
    }

    .history-record-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--layout-gap);
    }

    .history-record-grid > .empty {
      grid-column: 1 / -1;
    }

    .settings-grid {
      align-items: stretch;
    }

    .settings-grid > .card {
      height: 100%;
    }

    .model-config-card {
      overflow: hidden;
    }

    .model-config-scroll {
      width: 100%;
      overflow-x: hidden;
      overflow-y: visible;
      padding: 2px 2px 6px;
      scrollbar-width: thin;
    }

    .model-config-table {
      display: grid;
      gap: 8px;
      width: 100%;
      min-width: 0;
    }

    .model-config-header,
    .model-config-row {
      display: grid;
      grid-template-columns:
        minmax(88px, .50fr)
        minmax(150px, .82fr)
        minmax(190px, .96fr)
        78px
        minmax(230px, 1.22fr)
        108px;
      gap: 8px;
      align-items: end;
    }

    .model-config-header {
      padding: 0 10px 2px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

	    .model-config-row {
	      min-height: 132px;
	      grid-template-rows: minmax(24px, auto) auto;
	      padding: 8px;
	      border: 1px solid var(--frost-border-soft);
      border-radius: var(--radius-inner);
      background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.48)),
        rgba(255,255,255,.42);
      box-shadow:
        0 16px 36px rgba(36,55,79,.055),
        inset 0 1px 0 rgba(255,255,255,.90);
    }

    .model-config-cell {
      min-width: 0;
    }

    .model-config-row > .model-config-cell:not(.model-config-provider) {
      grid-row: 2;
    }

	    .model-config-cell input {
	      width: 100%;
	      min-width: 0;
	      overflow: hidden;
	      text-overflow: ellipsis;
	    }

	    .model-config-models {
	      display: grid;
	      gap: 6px;
	      align-self: start;
	    }

	    .model-config-models input {
	      min-height: 36px;
	      padding-top: 8px;
	      padding-bottom: 8px;
	    }

    .model-config-cell label {
      display: none;
    }

    .model-config-provider {
      grid-column: 1;
      grid-row: 1 / 3;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      min-width: 0;
    }

    .model-config-provider b {
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.25;
    }

    .model-config-provider span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.3;
    }

    .model-enable-line {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }

    .model-enable-line input {
      flex: 0 0 16px;
      width: 16px;
      min-width: 16px;
      max-width: 16px;
      min-height: 16px;
      height: 16px;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .model-config-actions {
      grid-column: 6;
      grid-row: 2;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      align-self: end;
      flex-wrap: nowrap;
      gap: 8px;
      height: 42px;
      min-width: 0;
    }

    .model-config-actions .button {
      flex: 0 0 42px;
      width: 42px;
      min-width: 0;
      height: 42px;
      min-height: 42px;
      padding: 0;
      border-radius: 14px;
    }

    .model-manager-head {
      align-items: flex-start;
      gap: 18px;
    }

    .model-manager-head .button {
      flex: 0 0 auto;
    }

    .model-service-list {
      display: grid;
      gap: 14px;
    }

    .model-config-card .action-status-slot:not(:empty) {
      margin-top: 8px;
      margin-bottom: -6px;
    }

    .model-config-card .action-status-slot:not(:empty) + .model-service-list .model-service-card:first-child {
      padding-top: 18px;
    }

    .model-service-card {
      display: grid;
      gap: 18px;
      padding: 22px;
      border: 1px solid rgba(0,122,255,.12);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(247,252,255,.58)),
        rgba(255,255,255,.52);
      box-shadow:
        0 18px 42px rgba(31,78,121,.06),
        inset 0 1px 0 rgba(255,255,255,.88);
    }

    .model-service-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .model-service-identity {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .model-provider-mark {
      flex: 0 0 54px;
      width: 54px;
      height: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      color: var(--model-accent, var(--accent));
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(235,246,255,.58)),
        rgba(0,122,255,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 24px rgba(31,78,121,.07);
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
      overflow: hidden;
    }

    .model-provider-mark .icon {
      width: 27px;
      height: 27px;
    }

    .model-provider-mark img {
      display: block;
      width: 42px;
      height: 42px;
      object-fit: contain;
      border-radius: 12px;
    }

    .model-service-title {
      min-width: 0;
      display: grid;
      gap: 8px;
    }

    .model-service-title h4 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: var(--text);
      font-size: 21px;
      font-weight: 800;
      line-height: 1.25;
    }

    .model-role-badge,
    .model-connection-badge {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
    }

    .model-role-badge {
      color: var(--model-accent, var(--accent));
      background: rgba(0,122,255,.10);
    }

    .model-connection-badge {
      color: #14813f;
      background: rgba(52,199,89,.14);
    }

    .model-service-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
    }

    .model-service-switch {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    .model-service-switch input {
      width: 42px;
      min-width: 42px;
      height: 24px;
      min-height: 24px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      appearance: none;
      background: rgba(60,60,67,.18);
      cursor: pointer;
      position: relative;
      transition: background .18s ease;
    }

    .model-service-switch input::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 8px rgba(31,78,121,.18);
      transition: transform .18s ease;
    }

    .model-service-switch input:checked {
      background: var(--accent);
    }

    .model-service-switch input:checked::after {
      transform: translateX(18px);
    }

    .model-service-fields {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr);
      gap: 14px 18px;
      align-items: end;
    }

    .model-field {
      min-width: 0;
      display: grid;
      gap: 8px;
    }

    .model-field label {
      color: rgba(29,29,31,.76);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
    }

    .model-field input {
      width: 100%;
      min-width: 0;
      min-height: 46px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .model-key-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 48px;
      gap: 8px;
      align-items: end;
    }

    .model-key-row .button {
      min-width: 48px;
      width: 48px;
      height: 46px;
      min-height: 46px;
      padding: 0;
      border-radius: 14px;
    }

    .model-service-bottom {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding-top: 4px;
    }

    .model-service-card .model-test-status {
      grid-column: auto;
      grid-row: auto;
      justify-self: stretch;
      align-self: center;
      width: 100%;
      min-height: 30px;
    }

    .model-service-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .model-service-actions .button {
      min-height: 44px;
    }

    .model-hidden-fields {
      display: none;
    }

    .model-more-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .model-more-grid .field.full-row {
      grid-column: 1 / -1;
    }

    .model-more-summary {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255,255,255,.58);
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
    }

    .model-more-summary b {
      color: var(--text);
    }

    @media (max-width: 900px) {
      .model-manager-head,
      .model-service-top,
      .model-service-bottom {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
      }

      .model-service-fields,
      .model-more-grid {
        grid-template-columns: 1fr;
      }

      .model-service-actions {
        justify-content: stretch;
      }

      .model-service-actions .button {
        flex: 1 1 140px;
      }
    }

    .model-test-status {
      grid-column: 5 / 7;
      grid-row: 1;
      justify-self: end;
      align-self: center;
      display: grid;
      align-content: center;
      gap: 6px;
      width: min(288px, 100%);
      min-height: 30px;
      padding: 0;
      border: 0;
      border-radius: 0;
      color: var(--text);
      background: transparent;
      opacity: 0;
      visibility: hidden;
      transform: translateY(3px);
      transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
      box-shadow: none;
      pointer-events: none;
    }

    .model-test-status.show {
      opacity: 1;
      visibility: visible;
      transform: none;
    }

    .model-test-status.running {
      color: var(--accent-blue);
    }

    .model-test-status.success {
      color: #14813f;
    }

    .model-test-status.error {
      color: #b31b45;
    }

    .model-test-head {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .model-test-title {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }

    .model-test-title .icon {
      flex: 0 0 14px;
      width: 14px;
      height: 14px;
      color: var(--accent);
    }

    .model-test-title span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .model-test-percent {
      flex: 0 0 auto;
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }

    .model-test-status.success .model-test-title,
    .model-test-status.success .model-test-percent {
      color: #14813f;
    }

    .model-test-status.error .model-test-title,
    .model-test-status.error .model-test-percent {
      color: #b31b45;
    }

    .model-test-progress {
      position: relative;
      display: block;
      width: 100%;
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.72);
      background: rgba(255,255,255,.46);
      box-shadow: inset 0 1px 4px rgba(30,70,110,.08);
    }

    .model-test-progress span {
      display: block;
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #0877ff 0%, #14b8a6 50%, #27c76f 100%);
      box-shadow: 0 0 14px rgba(20,184,166,.32);
      transition: width .38s cubic-bezier(.2,.8,.2,1);
    }

    .settings-info-card {
      width: 100%;
    }

    .settings-info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 12px;
    }

    .settings-info-grid .result-card {
      min-height: 132px;
    }

    .runtime-status-card {
      width: 100%;
    }

    .runtime-status-card .section-title {
      align-items: center;
    }

    .runtime-status-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      min-width: 0;
      flex: 0 0 auto;
    }

    .runtime-refresh-status {
      display: grid;
      align-content: center;
      gap: 7px;
      width: 260px;
      min-height: 36px;
      padding: 0;
      border: 0;
      color: var(--text);
      background: transparent;
      opacity: 0;
      visibility: hidden;
      transform: translateY(3px);
      transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
      pointer-events: none;
    }

    .runtime-refresh-status.show {
      opacity: 1;
      visibility: visible;
      transform: none;
    }

    .runtime-refresh-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    .runtime-refresh-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }

    .runtime-refresh-title .icon {
      flex: 0 0 16px;
      width: 16px;
      height: 16px;
      color: var(--accent);
    }

    .runtime-refresh-title span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .runtime-refresh-percent {
      flex: 0 0 auto;
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }

    .runtime-refresh-status.success .runtime-refresh-title,
    .runtime-refresh-status.success .runtime-refresh-percent {
      color: #14813f;
    }

    .runtime-refresh-status.error .runtime-refresh-title,
    .runtime-refresh-status.error .runtime-refresh-percent {
      color: #b31b45;
    }

    .runtime-refresh-progress {
      position: relative;
      display: block;
      width: 100%;
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.72);
      background: rgba(255,255,255,.46);
      box-shadow: inset 0 1px 4px rgba(30,70,110,.08);
    }

    .runtime-refresh-progress span {
      display: block;
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #0877ff 0%, #14b8a6 50%, #27c76f 100%);
      box-shadow: 0 0 18px rgba(20,184,166,.30);
      transition: width .38s cubic-bezier(.2,.8,.2,1);
    }

    .runtime-refresh-status.error .runtime-refresh-progress span {
      background: linear-gradient(90deg, #ff4778 0%, #ff8a3d 100%);
      box-shadow: 0 0 18px rgba(255,71,120,.24);
    }

    .runtime-status-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .runtime-status-item {
      min-width: 0;
      padding: 14px 16px;
      border: 1px solid var(--frost-border-soft);
      border-radius: var(--radius-inner);
      background:
        linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.46)),
        rgba(255,255,255,.40);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
    }

    .runtime-status-item span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .runtime-status-item b {
      display: block;
      color: var(--text);
      font-size: 17px;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .runtime-status-item small {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .runtime-status-ok b {
      color: var(--accent-blue);
    }

    .runtime-status-bad b {
      color: #ef4444;
    }

    .runtime-failure-list {
      display: grid;
      gap: 6px;
      margin-top: 14px;
    }

    .runtime-failure-item {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      min-height: 72px;
      padding: 14px 56px 14px 18px;
      border: 1px solid rgba(255, 184, 184, .76);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,244,244,.54));
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
    }

    .runtime-failure-copy {
      min-width: 0;
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .runtime-failure-copy strong {
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.34;
      overflow-wrap: anywhere;
    }

    .runtime-failure-copy p {
      margin: 0;
      color: var(--text);
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.42;
      overflow-wrap: anywhere;
    }

    .runtime-failure-remove {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: 50%;
      color: #ef4444;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(239,68,68,.30);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 8px 16px rgba(239,68,68,.10);
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
    }

    .runtime-failure-remove:hover {
      color: #fff;
      background: #ef4444;
      border-color: rgba(239,68,68,.58);
    }

    .runtime-failure-meta {
      display: block;
      min-width: 0;
    }

    .runtime-failure-time {
      display: block;
      padding-right: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }

    .attachments-entry-card,
    .attachment-manager-card,
    .attachment-list-card {
      width: 100%;
    }

    .attachment-entry-row,
    .attachment-title-row {
      align-items: center;
    }

    .attachment-entry-row .button {
      flex: 0 0 auto;
    }

    .attachment-filter-row {
      display: grid;
      grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(160px, 1fr));
      gap: var(--layout-gap);
      align-items: end;
      margin-top: 18px;
    }

    .attachment-filter-row label {
      min-width: 0;
    }

    .attachment-file-icon {
      width: 42px;
      height: 42px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      color: var(--accent-blue);
      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(231,243,255,.7));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px rgba(0,122,255,.09);
    }

    .attachment-file-icon .icon {
      width: 21px;
      height: 21px;
    }

    .attachment-quick-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }

    .attachment-quick-filter {
      min-height: 38px;
      padding: 0 16px;
      border: 1px solid var(--frost-border-soft);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.46)),
        rgba(255,255,255,.42);
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    }

    .attachment-quick-filter:hover {
      transform: translateY(-1px);
      color: var(--accent-blue);
    }

    .attachment-quick-filter.active {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(135deg, var(--accent-blue), #48c7f4);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 12px 22px rgba(0,122,255,.16);
    }

    .attachment-quick-filter .icon {
      width: 16px;
      height: 16px;
    }

    .attachment-list-title {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--separator-soft);
    }

    .attachment-filter-row.compact {
      grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(160px, 1fr));
    }

    .attachment-list-table {
      display: grid;
      border: 1px solid var(--frost-border-soft);
      border-radius: var(--radius-inner);
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.42)),
        rgba(255,255,255,.36);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    }

    .attachment-list-head,
    .attachment-list-row {
      display: grid;
      grid-template-columns: minmax(280px, 2.3fr) 92px minmax(140px, 1fr) 120px 110px 168px 88px;
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
    }

    .attachment-list-head {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      background: rgba(255,255,255,.44);
    }

    .attachment-list-row {
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      min-width: 0;
    }

    .attachment-list-row + .attachment-list-row {
      border-top: 1px solid var(--separator-soft);
    }

    .attachment-file-name {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .attachment-file-name strong {
      display: block;
      color: var(--text);
      font-size: 14px;
      line-height: 1.35;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .attachment-file-name small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 600;
      overflow-wrap: anywhere;
    }

    .attachment-file-icon.compact {
      width: 34px;
      height: 34px;
      border-radius: 13px;
      flex: 0 0 auto;
    }

    .attachment-file-icon.compact .icon {
      width: 18px;
      height: 18px;
    }

    .attachment-list-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 4px;
      width: fit-content;
      justify-self: end;
      padding: 3px;
      border-radius: 999px;
      background: rgba(255,255,255,.42);
      border: 1px solid rgba(255,255,255,.54);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }

    .attachment-list-actions .icon-action {
      width: 32px;
      min-width: 32px;
      height: 32px;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: 999px;
      color: rgba(60,60,67,.74);
      background: transparent;
      box-shadow: none;
      transition: color .18s ease, background .18s ease, transform .18s ease;
    }

    .attachment-list-actions .icon-action:hover {
      transform: translateY(-1px);
      color: var(--accent-blue);
      background: rgba(0,122,255,.08);
    }

    .attachment-list-actions .icon-action.danger:hover {
      color: var(--rose);
      background: rgba(255,55,95,.10);
    }

    .attachment-list-actions .icon-action .icon {
      width: 16px;
      height: 16px;
    }

    @media (max-width: 1120px) {
      .attachment-filter-row.compact {
        grid-template-columns: 1fr;
      }

      .attachment-list-table {
        overflow-x: auto;
      }

      .attachment-list-head,
      .attachment-list-row {
        min-width: 980px;
      }
    }

    @media (max-width: 1280px) {
      .model-config-cell label {
        display: none;
      }

      .model-config-provider {
        justify-content: center;
      }

      .model-config-actions {
        align-self: end;
        align-items: center;
      }

      .runtime-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .attachment-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 9000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(20, 20, 22, .30);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .modal.show { display: flex; }

    .modal-box {
      width: min(1032px, calc(100vw - 48px));
      max-height: min(760px, calc(100vh - 48px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 0;
      border-radius: var(--radius-card);
      border: 1px solid var(--frost-border);
      background: var(--frost-card-strong);
      box-shadow: var(--frost-shadow-strong);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }

    .modal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex: 0 0 auto;
      margin: 16px 16px 0;
      padding: 20px;
      border: 1px solid rgba(255,255,255,.78);
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,253,255,.66)),
        rgba(255,255,255,.62);
      box-shadow:
        0 0 0 1px rgba(0,122,255,.045),
        inset 0 1px 0 rgba(255,255,255,.92);
      backdrop-filter: blur(28px) saturate(170%);
      -webkit-backdrop-filter: blur(28px) saturate(170%);
    }

    .modal-title {
      margin: 0;
      font-size: 18px;
    }

    #modalBody {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 20px;
      scrollbar-width: thin;
    }

    #modalBody,
    #modalBody * {
      min-width: 0;
      max-width: 100%;
    }

    #modalBody .output-stack,
    #modalBody .result-card {
      width: 100%;
    }

    #modalBody .chip-row {
      align-items: flex-start;
    }

    #modalBody .chip {
      height: auto;
      min-height: 28px;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.45;
      padding-block: 5px;
    }

    #modalBody .pre-wrap,
    #modalBody .result-card p {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

	    .modal-actions {
	      display: flex;
	      justify-content: flex-end;
	      flex-wrap: wrap;
	      gap: 10px;
      margin-top: 16px;
      padding-top: 16px;
	      border-top: 1px solid var(--separator-soft);
	    }

	    .modal.password-change-modal .modal-box {
	      width: min(520px, calc(100vw - 48px));
	      max-height: min(560px, calc(100vh - 48px));
	    }

	    .password-change-form {
	      display: grid;
	      gap: 16px;
	    }

	    .password-change-note {
	      margin: 0;
	      color: var(--muted);
	      font-size: 13px;
	      line-height: 1.5;
	    }

	    .password-change-note b {
	      color: var(--ink);
	      font-weight: 700;
	    }

	    .password-change-grid {
	      display: grid;
	      gap: 12px;
	    }

	    .password-change-field {
	      display: grid;
	      gap: 7px;
	      color: var(--ink);
	      font-size: 13px;
	      font-weight: 700;
	    }

	    .password-change-field input {
	      width: 100%;
	      height: 48px;
	      padding: 0 15px;
	      border: 1px solid var(--frost-border-soft);
	      border-radius: var(--radius-inner);
	      outline: none;
	      color: var(--ink);
	      background: rgba(255,255,255,.82);
	      font: inherit;
	      font-weight: 600;
	    }

	    .password-change-field input:focus {
	      border-color: rgba(0,122,255,.34);
	      box-shadow: 0 0 0 3px rgba(0,122,255,.08);
	    }

	    .password-change-message {
	      min-height: 18px;
	      margin: 0;
	      color: var(--rose);
	      font-size: 12px;
	      font-weight: 700;
	      line-height: 1.5;
	    }

	    .password-change-message.success {
	      color: var(--green);
	    }

	    .modal.api-failure-modal .modal-head {
	      display: none;
	    }

    .modal.api-failure-modal .modal-box {
      width: min(672px, calc(100vw - 48px));
      max-height: min(456px, calc(100vh - 48px));
      border-radius: 24px;
    }

    .modal.api-failure-modal #modalBody {
      padding: 22px;
    }

    .api-failure-panel {
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 20px;
      align-items: center;
      padding: 6px 4px 0;
    }

    .api-failure-visual {
      width: 72px;
      height: 72px;
      border-radius: 0;
      display: grid;
      place-items: center;
      background: none;
      border: 0;
      box-shadow: none;
      overflow: visible;
    }

    .api-failure-visual svg {
      width: 72px;
      height: 72px;
      filter: drop-shadow(0 8px 18px rgba(48, 104, 156, .10));
    }

    .api-failure-copy h4 {
      margin: 0;
      font-size: 19px;
      line-height: 1.36;
      color: var(--text);
    }

    .api-failure-copy p {
      margin: 8px 0 0;
      font-size: 12px;
      line-height: 1.7;
      color: var(--muted);
    }

	    .api-failure-panel .modal-actions {
	      grid-column: 1 / -1;
	      border-top: 0;
	    }

    @media (max-width: 760px) {
      .api-failure-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
      }

      .api-failure-visual {
        width: 76px;
        height: 76px;
      }

      .api-failure-copy h4 {
        font-size: 20px;
      }
    }

    .toast {
      display: none !important;
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 80;
      width: min(360px, calc(100vw - 36px));
      padding: 12px 14px;
      border-radius: var(--radius-card);
      border: 1px solid var(--frost-border);
      background: var(--frost-card-strong);
      color: var(--text);
      box-shadow: var(--frost-shadow-strong);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      font-weight: 700;
      font-size: 13px;
    }

    .toast.show {
      display: block !important;
      opacity: 1;
      transform: translateY(0);
    }

    .action-status-slot {
      margin: 10px 0 0;
      min-height: 0;
    }

    .action-status-slot:empty {
      display: none;
    }

	    .action-status-card {
	      display: none !important;
	      align-items: flex-start;
	      gap: 10px;
	      width: 100%;
      padding: 10px 14.4px;
      border-radius: 16px;
      border: 1px solid rgba(8, 119, 255, .18);
      background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
      color: var(--text);
      box-shadow: 0 10px 28px rgba(31, 41, 55, .08);
      font-size: 13px;
      line-height: 1.55;
    }

    .action-status-card .icon {
      flex: 0 0 auto;
      width: 17px;
      height: 17px;
      margin-top: 1px;
    }

    .action-status-card b {
      display: block;
      font-size: 13px;
      line-height: 1.35;
    }

    .action-status-card span {
      display: block;
      color: var(--muted);
      font-weight: 650;
      word-break: break-word;
    }

    .action-status-card.success {
      border-color: rgba(35, 177, 77, .24);
      background: linear-gradient(180deg, rgba(244, 255, 248, .92), rgba(255,255,255,.66));
    }

    .action-status-card.success .icon,
    .action-status-card.success b {
      color: var(--green);
    }

    .action-status-card.error {
      border-color: rgba(255, 59, 48, .24);
      background: linear-gradient(180deg, rgba(255, 245, 244, .92), rgba(255,255,255,.66));
    }

    .action-status-card.error .icon,
    .action-status-card.error b {
      color: #d92d20;
    }

    .action-status-card.warning {
      border-color: rgba(255, 159, 10, .28);
      background: linear-gradient(180deg, rgba(255, 250, 239, .92), rgba(255,255,255,.66));
    }

    .action-status-card.warning .icon,
    .action-status-card.warning b {
      color: #b7791f;
    }

    .action-status-card.running {
      border-color: rgba(8, 119, 255, .24);
      background: linear-gradient(180deg, rgba(241, 248, 255, .92), rgba(255,255,255,.66));
    }

    .action-status-card.running .icon,
    .action-status-card.running b {
      color: var(--accent);
    }

    .split-note {
      padding: 14px;
      border-radius: var(--radius-inner);
      background: var(--control-active);
      border: 1px solid var(--accent-line);
      color: var(--accent);
      font-size: 13px;
      line-height: 1.65;
    }

    .script-analysis-result {
      min-height: 180px;
      max-height: 300px;
      overflow: auto;
      padding: 16px 18px;
      border-radius: 18px;
      color: var(--text);
      font-size: 15px;
      line-height: 1.78;
      white-space: pre-wrap;
      border: 1px solid rgba(255,255,255,.62);
      background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48)),
        rgba(255,255,255,.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.76),
        0 14px 34px rgba(80, 120, 160, .10);
    }

    .script-analysis-result.is-empty {
      color: rgba(120, 136, 158, .82);
    }

    @media (max-width: 1120px) {
      .app {
        grid-template-columns: 1fr;
        gap: var(--layout-gap);
      }

      .sidebar {
        position: static;
        height: auto;
        padding: 14px;
      }

      .main {
        grid-column: auto;
      }

      .topbar.has-hero {
        padding-right: clamp(208px, 27vw, 288px);
      }

      .hero-visual {
        width: clamp(288px, 37vw, 416px);
        right: 10px;
      }

      .nav {
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
        gap: 6px;
      }

      .sidebar-toggle {
        display: none;
      }

      .sidebar-footer {
        display: none;
      }

      .side-card {
        display: none;
      }

      .sidebar-token-card {
        display: none;
      }

      .grid-2,
      .history-layout {
        grid-template-columns: 1fr;
      }

      .library-main-grid > .card {
        grid-column: auto;
      }

      .history-record-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      body {
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
      }

      .topbar.has-hero {
        min-height: 0;
        flex-direction: row;
        gap: 10px;
        padding-right: 18px;
      }

      .topbar.has-hero .page-heading {
        width: 100%;
        padding-right: 86px;
      }

      .hero-visual {
        inset: 6px 8px 6px auto;
        width: 126px;
        height: auto;
      }

      .hero-j-mark,
      .hero-chip,
      .hero-dots {
        display: none;
      }

      .hero-chip.two {
        right: 92px;
      }

      .hero-chip.one {
        left: 138px;
        bottom: 14px;
      }

      .section-title.with-progress {
        align-items: stretch;
        flex-direction: column;
      }

      .result-progress-slot {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-left: 0;
      }

      .comment-result-panel .section-title.with-progress {
        display: flex;
        padding-right: 0;
      }

      .comment-result-panel .result-progress-slot {
        position: static;
        width: 100%;
        max-width: none;
      }

      .comment-result-panel .result-progress-slot .ai-progress-card {
        width: 100%;
        margin-left: 0;
      }

      body.login-active {
        overflow: auto;
        padding-bottom: 0;
      }

      .login-screen {
        min-height: 100dvh;
        padding: 24px 16px;
        align-items: stretch;
      }

      .login-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        align-content: center;
        transform: none;
      }

      .login-hero {
        gap: 12px;
        padding-top: 20px;
      }

      .login-hero-wordmark {
        width: 168px;
        max-width: 54vw;
      }

      .login-hero h1 {
        font-size: clamp(30px, 8vw, 42px);
      }

      .login-hero p {
        font-size: 15px;
      }

      .login-hero-art {
        width: min(360px, 100%);
        min-height: 118px;
        margin-top: 0;
      }

      .login-card {
        justify-self: stretch;
        width: 100%;
        transform: none;
        padding: 22px;
        border-radius: var(--radius-card);
      }

      .structure-grid,
      .structure-timeline-item {
        grid-template-columns: 1fr;
      }

      .script-meta-line {
        grid-template-columns: 1fr;
        gap: 3px;
      }

      .script-table-row,
      .script-table-row.head {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .script-table-row.head {
        display: none;
      }

      .script-table-row > span::before {
        display: block;
        margin-bottom: 2px;
        color: var(--text);
        font-size: 11px;
        font-weight: 700;
      }

      .script-table-row > span:nth-child(1)::before { content: "序号"; }
      .script-table-row > span:nth-child(2)::before { content: "时长"; }
      .script-table-row > span:nth-child(3)::before { content: "镜头"; }
      .script-table-row > span:nth-child(4)::before { content: "字幕/台词"; }
      .script-table-row > span:nth-child(5)::before { content: "画面"; }
      .script-table-row > span:nth-child(6)::before { content: "备注"; }

      .app {
        width: 100%;
        padding: 8px 8px calc(96px + env(safe-area-inset-bottom, 0px));
        gap: 12px;
      }

      .sidebar {
        position: sticky;
        top: 8px;
        z-index: 45;
        padding: 9px 12px;
        border-radius: var(--radius-card);
        overflow: visible;
      }

      .brand {
        min-height: 42px;
        padding: 0;
        gap: 10px;
        border-bottom: 0;
      }

      .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        flex: 0 0 38px;
      }

      .brand-copy {
        max-width: none;
        max-height: 42px;
        flex: 1 1 auto;
      }

      .brand h1 {
        font-size: 15px;
      }

      .brand p {
        display: none;
      }

      .nav {
        display: none;
      }

      .sidebar-session,
      .sidebar-token-card,
      .sidebar-footer {
        display: none;
      }

      .mobile-logout-button {
        min-width: 66px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 12px;
        border-radius: 16px;
        color: var(--accent);
        background: var(--control-bg);
        box-shadow: var(--control-shadow);
        font-size: 12px;
        font-weight: 700;
      }

      .mobile-logout-button .icon {
        width: 16px;
        height: 16px;
      }

      .mobile-tabbar {
        position: fixed;
        --mobile-nav-edge: 15px;
        left: calc(var(--mobile-nav-edge) + env(safe-area-inset-left, 0px));
        right: calc(var(--mobile-nav-edge) + env(safe-area-inset-right, 0px));
        bottom: calc(var(--mobile-nav-edge) + env(safe-area-inset-bottom, 0px));
        z-index: 90;
        display: flex;
        align-items: stretch;
        gap: 3px;
        min-height: 65px;
        padding: 5px 6px;
        overflow: hidden;
        isolation: isolate;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.72);
        background:
          linear-gradient(180deg, rgba(255,255,255,.76), rgba(238,248,255,.48) 52%, rgba(255,255,255,.36)),
          linear-gradient(90deg, rgba(255,255,255,.50), rgba(167,216,255,.24) 62%, rgba(255,255,255,.42)),
          rgba(255,255,255,.50);
        box-shadow:
          0 22px 48px rgba(48,85,120,.16),
          0 7px 16px rgba(29,29,31,.065),
          inset 0 1px 0 rgba(255,255,255,.96),
          inset 0 -1px 0 rgba(0,122,255,.08),
          inset 1px 0 0 rgba(255,255,255,.52),
          inset -1px 0 0 rgba(255,255,255,.42);
        backdrop-filter: blur(38px) saturate(190%);
        -webkit-backdrop-filter: blur(38px) saturate(190%);
      }

      .mobile-tabbar::before {
        content: "";
        position: absolute;
        inset: 1px 8px auto 8px;
        height: 42%;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,0));
        pointer-events: none;
      }

      .mobile-tab-indicator {
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 0;
        z-index: 0;
        width: var(--mobile-indicator-width, 0px);
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.36)),
          radial-gradient(circle at 60% 100%, rgba(0,122,255,.18), rgba(0,122,255,0) 58%),
          rgba(210,232,250,.46);
        box-shadow:
          0 12px 24px rgba(58,126,190,.12),
          inset 0 1px 0 rgba(255,255,255,.94),
          inset 0 -1px 0 rgba(0,122,255,.08),
          inset 1px 0 0 rgba(255,255,255,.42);
        transform: translateX(var(--mobile-indicator-x, 0px));
        pointer-events: none;
        will-change: transform, width;
      }

      .mobile-tab-indicator.animate {
        animation: mobileTabIndicatorMove .42s cubic-bezier(.18, .9, .2, 1.08);
      }

      .mobile-tab-button {
        position: relative;
        z-index: 1;
        min-width: 0;
        height: 54px;
        flex: 1 1 0;
        display: grid;
        grid-template-rows: 22px 16px;
        place-items: center;
        align-content: center;
        gap: 4px;
        padding: 6px 2px;
        border-radius: 999px;
        color: rgba(29,29,31,.78);
        background: transparent;
        box-shadow: none;
        font-size: 10.5px;
        line-height: 1;
        font-weight: 700;
        white-space: nowrap;
        transform: translateZ(0) scale(1);
        transition:
          color .22s ease,
          background .26s ease,
          box-shadow .26s ease,
          transform .34s cubic-bezier(.2, .9, .2, 1.18);
      }

      .mobile-tab-button .icon {
        width: 20px;
        height: 20px;
      }

      .mobile-tab-button.active {
        color: var(--accent);
        transform: translateY(-1px) scale(1.02);
        background: transparent;
        box-shadow: none;
        animation: mobileTabSelect .34s cubic-bezier(.18, .9, .2, 1.18);
      }

      @keyframes mobileTabIndicatorMove {
        0% {
          width: var(--mobile-indicator-from-width, var(--mobile-indicator-width, 0px));
          transform: translateX(var(--mobile-indicator-from-x, var(--mobile-indicator-x, 0px))) scale(.96);
          opacity: .78;
        }
        58% {
          width: var(--mobile-indicator-width, 0px);
          transform: translateX(var(--mobile-indicator-x, 0px)) scale(1.045);
          opacity: 1;
        }
        100% {
          width: var(--mobile-indicator-width, 0px);
          transform: translateX(var(--mobile-indicator-x, 0px)) scale(1);
          opacity: 1;
        }
      }

      @keyframes mobileTabSelect {
        0% { transform: translateY(2px) scale(.96); filter: saturate(.96); }
        62% { transform: translateY(-2px) scale(1.045); filter: saturate(1.08); }
        100% { transform: translateY(-1px) scale(1.02); filter: saturate(1); }
      }

      .mobile-more-menu {
        position: fixed;
        right: calc(15px + env(safe-area-inset-right, 0px));
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        z-index: 95;
        width: max-content;
        min-width: 156px;
        max-width: calc(100vw - 24px);
        padding: 7px;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,.78);
        background:
          linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,252,255,.64)),
          rgba(255,255,255,.62);
        box-shadow:
          0 24px 58px rgba(48, 85, 120, .18),
          inset 0 1px 0 rgba(255,255,255,.96);
        backdrop-filter: blur(34px) saturate(190%);
        -webkit-backdrop-filter: blur(34px) saturate(190%);
        opacity: 0;
        transform: translateY(10px) scale(.98);
        pointer-events: none;
        transition: opacity .18s ease, transform .18s var(--sidebar-ease);
      }

      .mobile-more-menu.show {
        display: grid;
        gap: 4px;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }

      .mobile-more-item {
        min-height: 44px;
        display: grid;
        grid-template-columns: 20px max-content;
        align-items: center;
        gap: 9px;
        padding: 0 10px;
        border-radius: 16px;
        color: var(--text);
        background: transparent;
        text-align: left;
        font-size: 13px;
        font-weight: 700;
      }

      .mobile-more-item.active {
        color: var(--accent);
        background: rgba(0,122,255,.10);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
      }

      .mobile-more-item .icon {
        width: 18px;
        height: 18px;
      }

      .side-card {
        display: none;
      }

      .main {
        gap: var(--layout-gap);
      }

      .topbar {
        display: none;
      }

		      .top-actions,
		      .row-actions {
		        width: 100%;
		      }

      .rewrite-export-toolbar {
        justify-content: stretch;
      }

      .rewrite-export-toolbar .export-option-panel {
        flex-basis: 100%;
        min-width: 0;
        justify-items: stretch;
      }

	      .rewrite-export-toolbar .export-option-grid {
	        justify-content: flex-start;
	      }

	      .rewrite-export-toolbar .export-option-pill {
	        flex: 1 1 calc((100% - 20px) / 3);
	        min-width: 0;
	        max-width: none;
	        padding: 0 10px;
	      }

	      .rewrite-export-actions .button {
	        flex: 1 1 calc((100% - 8px) / 2);
	        min-width: 0;
	        max-width: none;
	        padding-inline: 12px;
	      }

      .rewrite-export-actions .button:first-child {
        grid-column: 1 / -1;
        width: 100%;
      }

      .rewrite-export-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-left: 0;
      }

      .comment-export-actions {
        grid-template-columns: minmax(88px, .76fr) minmax(0, 1.12fr) minmax(0, 1.12fr);
        gap: 8px;
        width: 100%;
      }

	      .comment-export-actions .button,
	      .comment-export-actions .button:first-child,
	      .comment-export-actions .button:nth-child(2),
	      .comment-export-actions .button:nth-child(3) {
	        width: 100%;
	        min-width: 0;
	        flex: 0 1 auto;
	        flex-basis: auto;
	        padding-inline: 10px;
	      }

		      .create-script-controls {
		        grid-template-columns: 1fr;
		      }

	      .create-script-action {
	        width: 100%;
	      }

	      .training-actions {
	        margin: 8px 0 20px;
      }

      .top-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .inline-ai-progress {
        display: block;
      }

      .top-progress-slot {
        display: none !important;
      }

      .top-actions .chip {
        grid-column: 1 / -1;
        justify-content: center;
      }

      .button {
        flex: 1 1 auto;
        min-height: 44px;
        padding: 0 12px;
      }

      .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .metric {
        min-height: 96px;
        padding: 14px;
        gap: 10px;
      }

      .metric b {
        font-size: 24px;
      }

      .grid-3,
      .filter-grid,
      .form-grid,
      .history-record-grid,
      .side-card {
        grid-template-columns: 1fr;
      }

      .history-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 10px;
      }

      .history-filter-grid .field {
        min-width: 0;
      }

      .learning-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .learning-filter-grid .field {
        min-width: 0;
      }

      .learning-filter-grid .field:first-child {
        grid-column: 1 / -1;
      }

      .grid-2,
      .split-1-2,
      .settings-grid,
      .history-layout,
      .workspace {
        grid-template-columns: 1fr !important;
        gap: var(--layout-gap);
      }

      .comment-generator-layout {
        height: auto;
        min-height: 0;
        overflow: visible;
      }

      .comment-flow-panel {
        position: static;
        max-height: none;
        overflow: visible;
      }

      .comment-result-panel {
        max-height: none;
        overflow: visible;
      }

      .main,
      .workspace,
      .topbar,
      .card,
      .metric {
        min-width: 0;
        max-width: 100%;
      }

      .card {
        padding: 18px;
      }

      .section-title {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
        padding-bottom: 0;
      }

      .section-title.flow-title {
        flex-direction: row;
        align-items: center;
      }

      input,
      select,
      textarea {
        min-height: 44px;
        font-size: 12px;
        line-height: 1.35;
      }

      textarea {
        min-height: 112px;
      }

      .select-trigger {
        min-height: 44px;
        font-size: 12px;
        line-height: 1.35;
      }

      .file-input {
        min-height: 80px;
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .file-action {
        width: 100%;
      }

      .step-card,
      .result-card {
        padding: 14px;
        border-radius: var(--radius-inner);
      }

      .create-agent-layout {
        grid-template-columns: 1fr;
      }

      .create-ai-assistant {
        position: relative;
        top: auto;
        height: auto;
        max-height: none;
        margin-top: 0;
      }

      .assistant-composer textarea {
        min-height: 120px;
      }

      .step-progress-slot {
        flex-basis: 100%;
        width: 100%;
        max-width: none;
        margin-left: 0;
      }

      .step-head {
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 12px;
      }

      .table-wrap {
        margin-inline: -2px;
      }

      table {
        min-width: 760px;
      }

      .user-table-wrap {
        margin-inline: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .user-table-wrap::before {
        display: none;
      }

      .user-table {
        min-width: 0;
        display: block;
        font-size: 12.5px;
      }

      .user-table thead {
        display: none;
      }

      .user-table tbody {
        display: grid;
        gap: 10px;
      }

      .user-table tr {
        display: grid;
        gap: 8px;
        width: 100%;
        padding: 14px;
        border: 1px solid var(--frost-border-soft);
        border-radius: var(--radius-inner);
        background: var(--frost-card);
        box-shadow: var(--frost-shadow);
      }

      .user-table td {
        width: 100% !important;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 0;
      }

      .user-table td::before {
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
      }

      .user-table td:nth-child(1)::before { content: "账号"; }
      .user-table td:nth-child(2)::before { content: "类型"; }
      .user-table td:nth-child(3)::before { content: "密码"; }
      .user-table td:nth-child(4)::before { content: "备注"; }
      .user-table td:nth-child(5)::before { content: "创建"; }
      .user-table td:nth-child(6)::before { content: "登录"; }
      .user-table td:nth-child(7)::before { content: "操作"; }

      .user-note {
        width: 100%;
        min-width: 0;
      }

      .user-table .record-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
      }

      .user-token-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .system-token-main-row {
        grid-template-columns: 1fr;
      }

      .token-activity-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .token-activity-toolbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .script-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .comment-row {
        align-items: flex-start;
        flex-direction: column;
      }

      .comment-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .hook-content-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
      }

      .hook-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .modal {
        padding: 8px;
      }

      .modal-box {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 0;
        border-radius: var(--radius-card);
      }

      .modal-head {
        margin: 12px 12px 0;
        padding: 14px 16px;
        border-radius: 18px;
      }

      #modalBody {
        padding: 16px;
      }

      .toast {
        left: 12px;
        right: 12px;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        width: auto;
      }
    }

    @media (max-width: 420px) {
      .top-actions {
        grid-template-columns: 1fr;
      }

      .metrics {
        grid-template-columns: 1fr;
      }

      .page-title h2 {
        font-size: 24px;
      }
    }

    /* macOS 26.6 style refinement layer */
    :root {
      --bg: #f5f7fb;
      --bg-soft: #fbfcff;
      --text: #1c1c1e;
      --muted: rgba(60, 60, 67, .68);
      --muted-2: rgba(60, 60, 67, .45);
      --accent: #007aff;
      --accent-hover: #0a84ff;
      --accent-soft: rgba(0, 122, 255, .085);
      --accent-line: rgba(0, 122, 255, .20);
      --separator: rgba(60, 60, 67, .14);
      --separator-soft: rgba(60, 60, 67, .08);
      --radius-card: 17px;
      --radius-inner: 17px;
      --radius-button: 17px;
      --shadow-card-soft: 0 7px 28px rgba(62, 95, 138, .08);
      --shadow-card: 0 8px 32px rgba(48, 104, 156, .10);
      --shadow-card-strong: 0 10px 36px rgba(48, 104, 156, .12);
      --shadow-card-hover: 0 10px 38px rgba(48, 104, 156, .14);
      --control-bg:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58)),
        rgba(255,255,255,.58);
      --control-bg-hover:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.70)),
        rgba(255,255,255,.70);
      --control-active:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.58)),
        rgba(0,122,255,.095);
      --control-border: rgba(255,255,255,.70);
      --control-shadow:
        0 9px 22px rgba(36, 55, 79, .055),
        inset 0 1px 0 rgba(255,255,255,.90),
        inset 0 -1px 0 rgba(60,60,67,.045);
      --accent-fill: #0877ff;
      --accent-shadow: none;
      --frost-card:
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.50) 54%, rgba(233,247,255,.42)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.72), rgba(255,255,255,0) 42%),
        rgba(255,255,255,.44);
      --frost-card-strong:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.64) 56%, rgba(235,248,255,.50)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.86), rgba(255,255,255,0) 44%),
        rgba(255,255,255,.58);
      --frost-border: rgba(255,255,255,.72);
      --frost-border-soft: rgba(255,255,255,.56);
      --frost-shadow: var(--shadow-card-soft);
      --frost-shadow-strong: var(--shadow-card);
      --frost-blur: blur(34px) saturate(180%);
    }

    body {
      background: var(--content-bg);
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

    .app {
      column-gap: var(--sidebar-main-gap);
      row-gap: var(--layout-gap);
    }

    .glass,
    .card,
    .side-card,
    .sidebar-token-card,
    .sidebar-session,
    .step-card,
    .result-card,
    .file-input,
    .table-wrap,
    .empty,
    .modal-box {
      border-color: var(--frost-border);
      background: var(--frost-card);
      box-shadow: var(--frost-shadow);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }

    .glass::before,
    .card::before,
    .side-card::before,
    .step-card::before,
    .result-card::before,
    .file-input::before,
    .table-wrap::before,
    .empty::before,
    .modal-box::before {
      background:
        linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,0) 30%),
        radial-gradient(circle at 52% 100%, rgba(163,221,255,.20), rgba(163,221,255,0) 58%);
      opacity: .62;
    }

    .sidebar {
      gap: var(--layout-gap);
      border-radius: 28px;
      background: var(--nav-bg);
      border-color: rgba(60,60,67,.06);
    }

    .brand {
      min-height: 54px;
      padding-bottom: 12px;
    }

    .brand h1 {
      font-size: 15px;
      font-weight: 600;
    }

    .brand p {
      font-size: 11.5px;
      color: var(--muted-2);
    }

    .nav {
      gap: 6px;
    }

    .nav-button {
      min-height: 42px;
      border-radius: 14px;
      font-weight: 600;
      color: rgba(29,29,31,.86);
      transition:
        color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        grid-template-columns var(--sidebar-speed) var(--sidebar-ease),
        gap var(--sidebar-speed) var(--sidebar-ease),
        padding var(--sidebar-speed) var(--sidebar-ease),
        min-height var(--sidebar-speed) var(--sidebar-ease);
    }

    .nav-button:hover:not(.active) {
      color: var(--text);
      background: rgba(255,255,255,.30);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
    }

    .nav-button.active {
      color: var(--text);
      background: rgba(60,60,67,.10);
      border-color: transparent;
      box-shadow: none;
      transform: none;
    }

    .nav-button.active::before {
      display: none;
    }

    .nav-button.active::after {
      display: none;
    }

    .side-card,
    .sidebar-token-card,
    .sidebar-session {
      background:
        linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.36)),
        rgba(255,255,255,.34);
      border-color: rgba(255,255,255,.58);
      box-shadow:
        0 16px 34px rgba(42,70,104,.07),
        inset 0 1px 0 rgba(255,255,255,.82);
    }

    .topbar {
      min-height: 100px;
      padding: 22px 24px;
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.58)),
        linear-gradient(135deg, rgba(8,119,255,.08), rgba(255,255,255,0) 48%, rgba(35,177,77,.08)),
        radial-gradient(circle at 74% 100%, rgba(14,165,233,.10), rgba(14,165,233,0) 48%),
        rgba(255,255,255,.52);
      border-color: rgba(255,255,255,.76);
      box-shadow:
        0 24px 56px rgba(42,70,104,.10),
        inset 0 1px 0 rgba(255,255,255,.94),
        inset 0 -1px 0 rgba(60,60,67,.045);
    }

    .topbar::before {
      opacity: .34;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0) 62%),
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.78), rgba(255,255,255,0) 38%);
    }

    .page-heading {
      gap: 14px;
    }

    .topbar[data-hero-theme="home"] { --page-accent: #23b14d; --page-rgb: 35,177,77; --hero-hue: 132; --hero-warm-hue: 205; --hero-logo-rotate: 18deg; }
    .topbar[data-hero-theme="create"] { --page-accent: #23b14d; --page-rgb: 35,177,77; --hero-hue: 132; --hero-warm-hue: 42; --hero-logo-rotate: 0deg; }
    .topbar[data-hero-theme="rewrite"] { --page-accent: #0877ff; --page-rgb: 8,119,255; --hero-hue: 215; --hero-warm-hue: 172; --hero-logo-rotate: 86deg; }
    .topbar[data-hero-theme="comment"] { --page-accent: #ff9f0a; --page-rgb: 255,159,10; --hero-hue: 28; --hero-warm-hue: 132; --hero-logo-rotate: 152deg; }
    .topbar[data-hero-theme="history"] { --page-accent: #7c3aed; --page-rgb: 124,58,237; --hero-hue: 262; --hero-warm-hue: 205; --hero-logo-rotate: 128deg; }
	    .topbar[data-hero-theme="favorites"] { --page-accent: #ff375f; --page-rgb: 255,55,95; --hero-hue: 45; --hero-warm-hue: 340; --hero-logo-rotate: 184deg; }
	    .topbar[data-hero-theme="library"] { --page-accent: #14b8a6; --page-rgb: 20,184,166; --hero-hue: 172; --hero-warm-hue: 132; --hero-logo-rotate: 64deg; }
	    .topbar[data-hero-theme="creative"] { --page-accent: #8b5cf6; --page-rgb: 139,92,246; --hero-hue: 262; --hero-warm-hue: 172; --hero-logo-rotate: 142deg; }
	    .topbar[data-hero-theme="users"] { --page-accent: #0ea5e9; --page-rgb: 14,165,233; --hero-hue: 205; --hero-warm-hue: 262; --hero-logo-rotate: 96deg; }
    .topbar[data-hero-theme="settings"] { --page-accent: #6366f1; --page-rgb: 99,102,241; --hero-hue: 248; --hero-warm-hue: 28; --hero-logo-rotate: 118deg; }

    .topbar.has-hero {
      --hero-card-bg:
        radial-gradient(ellipse at 4% 10%, rgba(255,255,255,.86), rgba(255,255,255,0) 28%),
        radial-gradient(ellipse at 86% 70%, rgba(var(--page-rgb, 8,119,255), .18), rgba(var(--page-rgb, 8,119,255), 0) 48%),
        radial-gradient(ellipse at 64% 0%, hsla(var(--hero-warm-hue, 42), 96%, 62%, .13), hsla(var(--hero-warm-hue, 42), 96%, 62%, 0) 42%),
        linear-gradient(105deg, rgba(255,255,255,.94) 0%, rgba(246,251,255,.78) 42%, rgba(var(--page-rgb, 8,119,255), .11) 100%),
        rgba(255,255,255,.96);
      --hero-card-border: rgba(255,255,255,.76);
      --hero-card-shadow:
        0 24px 56px rgba(42,70,104,.10),
        inset 0 1px 0 rgba(255,255,255,.94),
        inset 0 -1px 0 rgba(60,60,67,.045);
      min-height: 112px;
      padding: 26px 32px;
      gap: 18px;
      overflow: hidden;
      border-color: var(--hero-card-border);
      background: var(--hero-card-bg);
      box-shadow: var(--hero-card-shadow);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .app.is-scrolled .topbar.has-hero {
      border-color: var(--hero-card-border);
      background: var(--hero-card-bg);
      box-shadow: var(--hero-card-shadow);
    }

    .app.is-scrolled .topbar.has-hero::after {
      opacity: 0;
      transform: translateY(-4px);
    }

    .topbar.has-hero::before {
      opacity: 1;
      background:
        radial-gradient(ellipse at -4% 8%, rgba(255,255,255,.84), rgba(255,255,255,.28) 28%, rgba(255,255,255,0) 44%),
        radial-gradient(circle at 93% 68%, hsla(var(--hero-hue, 132), 70%, 56%, .22), hsla(var(--hero-hue, 132), 70%, 56%, 0) 28%),
        linear-gradient(128deg, rgba(255,255,255,.54), rgba(255,255,255,0) 44%, hsla(var(--hero-warm-hue, 42), 92%, 64%, .12));
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.94),
        inset 0 -1px 0 rgba(var(--page-rgb, 8,119,255), .08);
    }

    .topbar.has-hero .page-heading {
      flex: 1 1 auto;
      max-width: min(760px, 50vw);
      gap: 0;
      position: relative;
      z-index: 4;
    }

    .topbar.has-hero .page-title p {
      max-width: 760px;
    }

    .topbar.has-hero .top-actions {
      position: relative;
      z-index: 5;
    }

    .topbar.has-hero .hero-visual {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: auto;
      height: auto;
      flex: none;
      display: block;
      overflow: hidden;
      border: 0;
      border-radius: inherit;
      background:
        radial-gradient(ellipse at 18% 22%, rgba(255,255,255,.42), rgba(255,255,255,0) 26%),
        radial-gradient(ellipse at 84% 58%, hsla(var(--hero-hue, 132), 72%, 60%, .16), hsla(var(--hero-hue, 132), 72%, 60%, 0) 38%),
        linear-gradient(100deg, rgba(255,255,255,0) 18%, hsla(var(--hero-hue, 132), 68%, 62%, .06) 58%, hsla(var(--hero-warm-hue, 42), 92%, 62%, .11) 100%);
      box-shadow: none;
      pointer-events: none;
      isolation: isolate;
    }

    .hero-visual[hidden] {
      display: none !important;
    }

    .topbar.has-hero .hero-visual::before {
      width: clamp(126px, 9vw, 172px);
      height: clamp(126px, 9vw, 172px);
      right: clamp(22px, 3.2vw, 62px);
      bottom: -64px;
      border-radius: 34px;
      opacity: .46;
      background:
        linear-gradient(140deg, rgba(255,255,255,.52), rgba(255,255,255,.14)),
        linear-gradient(135deg, hsla(var(--hero-hue, 132), 78%, 62%, .52), hsla(var(--hero-warm-hue, 42), 92%, 64%, .24));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.66),
        0 26px 44px rgba(var(--page-rgb, 8,119,255), .15);
      transform: rotate(-13deg);
      filter: blur(.1px);
    }

    .topbar.has-hero .hero-visual::after {
      width: clamp(260px, 22vw, 420px);
      height: clamp(118px, 10vw, 178px);
      left: -92px;
      top: -54px;
      border-radius: 999px;
      opacity: .56;
      background:
        radial-gradient(circle at 44% 48%, rgba(255,255,255,.78), rgba(255,255,255,.24) 54%, rgba(255,255,255,0) 72%),
        hsla(var(--hero-hue, 132), 68%, 64%, .12);
      box-shadow: none;
    }

    .topbar.has-hero .hero-dots {
      inset: 0;
      z-index: 2;
      opacity: .62;
      background-image:
        radial-gradient(circle, rgba(var(--page-rgb, 8,119,255), .18) 0 1.8px, transparent 2.2px),
        radial-gradient(circle, hsla(var(--hero-warm-hue, 42), 94%, 58%, .17) 0 1.4px, transparent 2px),
        radial-gradient(circle, rgba(52,199,89,.16) 0 1.5px, transparent 2px);
      background-position: 54% 22px, 68% 76px, 86% 38px;
      background-size: 58px 46px, 84px 58px, 74px 52px;
      mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.86) 58%, #000 100%);
    }

    .topbar.has-hero .hero-j-mark {
      right: clamp(36px, 4vw, 82px);
      top: auto;
      bottom: -8px;
      width: clamp(86px, 7.4vw, 140px);
      height: clamp(86px, 7.4vw, 140px);
      opacity: .15;
      mix-blend-mode: multiply;
      transform: rotate(-10deg);
      filter: hue-rotate(var(--hero-logo-rotate, 0deg)) saturate(1.22) drop-shadow(0 18px 28px rgba(var(--page-rgb, 8,119,255), .12));
    }

    .topbar.has-hero .hero-chip {
      z-index: 6;
      color: var(--page-accent, #0877ff);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46)),
        rgba(var(--page-rgb, 8,119,255), .10);
      border-color: rgba(var(--page-rgb, 8,119,255), .22);
      box-shadow:
        0 10px 22px rgba(var(--page-rgb, 8,119,255), .10),
        inset 0 1px 0 rgba(255,255,255,.82);
    }

    .topbar.has-hero .hero-chip.one {
      left: 55%;
      bottom: 21px;
      transform: rotate(-5deg);
    }

    .topbar.has-hero .hero-chip.two {
      right: 18%;
      top: 24px;
      transform: rotate(5deg);
    }

    .topbar.has-hero .hero-chip.three {
      left: 66%;
      top: 50px;
      transform: rotate(3deg);
    }

    .topbar.has-hero .hero-chip.four {
      left: 76%;
      bottom: 20px;
      transform: translateX(-50%) rotate(-2deg);
    }

    .topbar.has-hero .hero-chip.five {
      right: 6%;
      bottom: 45px;
      transform: rotate(-4deg);
    }

    .page-title h2 {
      font-size: clamp(28px, 2.2vw, 34px);
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: 0;
    }

    .page-title p {
      font-size: 13.5px;
      color: rgba(60,60,67,.68);
      max-width: 900px;
    }

		    .card {
		      padding: var(--card-padding);
		      border-radius: 26px;
		    }

    .card.strong {
      background: var(--frost-card-strong);
    }

    .section-title {
      margin-bottom: 18px;
      padding-bottom: 0;
      border-bottom: 0;
    }

    .card h3,
    .section-title h3 {
      font-size: 19px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .section-title p {
      color: rgba(60,60,67,.64);
      font-size: 13px;
    }

    .workspace,
    .flow,
    .output-stack {
      gap: var(--layout-gap);
    }

    .flow > .step-card:nth-child(1) { --step-accent: #23b14d; --step-rgb: 35,177,77; }
    .flow > .step-card:nth-child(2) { --step-accent: #14b8a6; --step-rgb: 20,184,166; }
    .flow > .step-card:nth-child(3) { --step-accent: #ff9f0a; --step-rgb: 255,159,10; }
    .flow > .step-card:nth-child(4) { --step-accent: #0877ff; --step-rgb: 8,119,255; }
    .flow > .step-card:nth-child(5) { --step-accent: #ff375f; --step-rgb: 255,55,95; }
    .flow > .step-card:nth-child(6) { --step-accent: #7c3aed; --step-rgb: 124,58,237; }

    .flow > .step-card {
      border-color: rgba(var(--step-rgb, 8,119,255), .14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.45)),
        linear-gradient(135deg, rgba(var(--step-rgb, 8,119,255), .075), rgba(255,255,255,0) 44%),
        rgba(255,255,255,.36);
    }

    .flow > .step-card .step-index {
      color: var(--step-accent, var(--accent));
      border-color: rgba(var(--step-rgb, 8,119,255), .24);
      background:
        linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.48)),
        rgba(var(--step-rgb, 8,119,255), .12);
      box-shadow: 0 10px 20px rgba(var(--step-rgb, 8,119,255), .08), inset 0 1px 0 rgba(255,255,255,.88);
    }

    .metric:nth-child(1) {
      --metric-rgb: 35,177,77;
      --metric-rgb-2: 0,122,255;
      --metric-color: #22a94a;
    }
    .metric:nth-child(2) {
      --metric-rgb: 14,165,233;
      --metric-rgb-2: 88,86,214;
      --metric-color: #078cc8;
    }
    .metric:nth-child(3) {
      --metric-rgb: 255,159,10;
      --metric-rgb-2: 255,55,95;
      --metric-color: #bf6b00;
    }

    .metric {
      border-color: rgba(var(--metric-rgb, 8,119,255), .30);
      background:
        linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.94) 34%, rgba(255,255,255,.82) 48%, rgba(var(--metric-rgb, 8,119,255), .055) 64%, rgba(var(--metric-rgb, 8,119,255), .12) 82%, rgba(var(--metric-rgb-2, 0,122,255), .14) 100%),
        radial-gradient(ellipse at 16% 18%, rgba(255,255,255,.94), rgba(255,255,255,0) 40%),
        radial-gradient(ellipse at 88% 32%, rgba(var(--metric-rgb, 8,119,255), .22), rgba(var(--metric-rgb, 8,119,255), 0) 48%),
        rgba(255,255,255,.50);
      box-shadow: none;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(142px, .72fr);
      align-content: stretch;
      gap: 0;
      min-height: 154px;
      padding: 0;
      isolation: isolate;
    }

    .metric.glass::before {
      z-index: 0;
      opacity: .82;
      background:
        linear-gradient(115deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.28) 34%, rgba(255,255,255,0) 56%),
        radial-gradient(circle at 84% 82%, rgba(var(--metric-rgb, 8,119,255), .14), rgba(var(--metric-rgb, 8,119,255), 0) 44%);
    }

    .metric::after {
      display: none;
    }

    .grid-2,
    .grid-3,
    .metrics,
    .history-record-grid {
      gap: var(--layout-gap);
    }

    .topbar.has-hero + #metrics.metrics {
      margin-top: 20px;
    }

    .metric {
      border-radius: 22px;
    }

    .metric-copy,
    .metric-visual {
      position: relative;
      z-index: 1;
    }

    .metric-copy {
      min-width: 0;
      padding: 22px 22px 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .metric-label {
      color: rgba(29,29,31,.76);
      font-size: 14px;
      font-weight: 650;
      line-height: 1.25;
    }

    .metric-value {
      margin-top: 22px;
      color: var(--text);
      font-size: clamp(38px, 3.2vw, 58px);
      font-weight: 500;
      letter-spacing: 0;
      line-height: .96;
      font-variant-numeric: tabular-nums;
    }

    .metric-chip {
      margin-top: auto;
      position: relative;
      width: fit-content;
      min-height: 30px;
      padding: 0 14px 0 28px;
      display: inline-flex;
      align-items: center;
      color: var(--metric-color, var(--accent));
      border: 1px solid rgba(var(--metric-rgb, 8,119,255), .26);
      border-radius: 999px;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.95), rgba(255,255,255,0) 42%),
        linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.30)),
        rgba(var(--metric-rgb, 8,119,255), .18);
      box-shadow: none;
      font-size: 12px;
      font-weight: 650;
      overflow: hidden;
    }

    .metric-chip::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--metric-color, var(--accent));
      box-shadow:
        0 0 0 4px rgba(var(--metric-rgb, 8,119,255), .12),
        0 0 14px rgba(var(--metric-rgb, 8,119,255), .46);
      transform: translateY(-50%);
    }

    .metric-visual {
      min-height: 100%;
      padding: 18px 18px 14px;
      border-left: 1px solid rgba(var(--metric-rgb, 8,119,255), .06);
      border-radius: 0 22px 22px 0;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(255,255,255,.10), rgba(var(--metric-rgb, 8,119,255), .08) 46%, rgba(var(--metric-rgb-2, 0,122,255), .10) 100%),
        linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,0) 48%),
        radial-gradient(circle at 88% 18%, rgba(var(--metric-rgb, 8,119,255), .16), rgba(var(--metric-rgb, 8,119,255), 0) 46%);
    }

    .metric-meta {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(60,60,67,.62);
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
    }

    .metric-growth {
      color: var(--metric-color, var(--accent));
      font-size: 14px;
      font-weight: 700;
    }

    .metric .metric-window {
      color: rgba(60,60,67,.62);
      font-size: 13px;
      font-weight: 500;
    }

    .metric-chart {
      position: absolute;
      inset: 42px 0 0 0;
      z-index: 1;
    }

    .metric-chart svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .metric-gridline {
      stroke: rgba(60,60,67,.08);
      stroke-width: 1;
    }

    .metric-axis {
      stroke: rgba(60,60,67,.10);
      stroke-width: 1.2;
    }

    .metric-area {
      fill: rgba(var(--metric-rgb, 8,119,255), .12);
    }

    .metric-curve {
      fill: none;
      stroke: rgba(var(--metric-rgb, 8,119,255), .42);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .metric-dot {
      fill: var(--metric-color, var(--accent));
      stroke: rgba(255,255,255,.94);
      stroke-width: 3;
    }

    .metric-tooltip {
      position: absolute;
      right: 16px;
      bottom: 22px;
      z-index: 2;
      padding: 6px 9px;
      border: 1px solid rgba(60,60,67,.10);
      border-radius: 8px;
      background: rgba(255,255,255,.86);
      color: rgba(29,29,31,.84);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.25;
    }

    .metric-tooltip small {
      display: block;
      margin-top: 2px;
      color: rgba(60,60,67,.50);
      font-size: 10px;
      font-weight: 600;
    }

    @media (max-width: 720px) {
      .metric {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .metric-copy {
        padding: 18px 18px 16px;
      }

      .metric-value {
        margin-top: 16px;
        font-size: 42px;
      }

      .metric-chip {
        margin-top: 18px;
      }

      .metric-visual {
        min-height: 112px;
        border-left: 0;
        border-top: 1px solid rgba(var(--metric-rgb, 8,119,255), .12);
        border-radius: 0 0 22px 22px;
      }

      .metric-chart {
        inset: 38px 0 0 0;
      }
    }

    .field {
      gap: 8px;
    }

    .field label {
      color: rgba(29,29,31,.82);
      font-size: 13.5px;
      font-weight: 600;
    }

    input,
    select,
    textarea,
    .select-trigger {
      border-radius: 15px;
      border-color: rgba(60,60,67,.13);
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.68)),
        rgba(255,255,255,.70);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 8px 18px rgba(36,55,79,.035);
      color: var(--text);
    }

    input:hover,
    textarea:hover,
    .select-trigger:hover {
      border-color: rgba(0,122,255,.20);
      background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.76)),
        rgba(255,255,255,.76);
    }

    input:focus,
    textarea:focus,
    select:focus,
    .select-shell.open .select-trigger {
      border-color: rgba(0,122,255,.42);
      box-shadow:
        0 0 0 4px rgba(0,122,255,.11),
        inset 0 1px 0 rgba(255,255,255,.94),
        0 12px 26px rgba(0,122,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.80)),
        rgba(255,255,255,.82);
    }

    textarea {
      line-height: 1.66;
    }

    .link-input {
      --link-input-default-height: 88px;
    }

    .select-menu {
      padding: 8px;
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,253,255,.72)),
        rgba(255,255,255,.66);
      border-color: rgba(255,255,255,.76);
      box-shadow:
        0 26px 58px rgba(42,70,104,.16),
        inset 0 1px 0 rgba(255,255,255,.95);
    }

    .select-option {
      min-height: 40px;
      border-radius: 14px;
      font-weight: 600;
    }

    .select-option.active {
      background:
        linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.52)),
        rgba(0,122,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
    }

    .button,
    .mini-button,
    .file-action,
    .logout-button,
    .mobile-logout-button,
    .sidebar-toggle,
    .token-range-tab {
      border-radius: var(--radius-button);
      box-shadow: var(--control-shadow);
      transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
    }

    .button:hover,
    .mini-button:hover,
    .file-action:hover,
    .logout-button:hover,
    .sidebar-toggle:hover {
      transform: none;
    }

    .button:active,
    .mini-button:active,
    .file-action:active,
    .logout-button:active,
    .sidebar-toggle:active {
      transform: none;
    }

    .button.primary,
    .mini-button.primary {
      color: #fff;
      background: var(--accent-fill);
      box-shadow: var(--accent-shadow);
    }

    .assistant-tools .assistant-file-button,
    .assistant-tools .assistant-send-button:not(.is-ready) {
      width: 44px;
      min-width: 44px;
      height: 44px;
      min-height: 44px;
      flex: 0 0 44px;
      border-radius: 50%;
      color: rgba(60,60,67,.58);
      background:
        linear-gradient(180deg, rgba(255,255,255,.50), rgba(222,236,250,.58)),
        rgba(0,122,255,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
    }

    .assistant-tools .assistant-file-button:hover {
      color: var(--accent);
      background:
        linear-gradient(180deg, rgba(255,255,255,.62), rgba(216,234,252,.68)),
        rgba(0,122,255,.12);
      transform: none;
    }

    .chip {
      min-height: 27px;
      border-color: rgba(60,60,67,.10);
      color: rgba(29,29,31,.74);
      background:
        linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.46)),
        rgba(255,255,255,.42);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 6px 14px rgba(36,55,79,.035);
      font-weight: 600;
    }

    .chip.primary,
    .chip.green,
    .chip.cyan,
    .chip.amber,
    .chip.rose {
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),
        rgba(8,119,255,.06);
    }

    .chip.primary {
      color: #075bd8;
      border-color: rgba(8,119,255,.22);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),
        rgba(8,119,255,.10);
    }

    .chip.green {
      color: #0f7a37;
      border-color: rgba(35,177,77,.24);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),
        rgba(35,177,77,.12);
    }

    .chip.cyan {
      color: #08779a;
      border-color: rgba(14,165,233,.25);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),
        rgba(14,165,233,.11);
    }

    .chip.amber {
      color: #8a4f00;
      border-color: rgba(255,159,10,.28);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),
        rgba(255,159,10,.13);
    }

    .chip.rose {
      color: #b31b45;
      border-color: rgba(255,55,95,.26);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),
        rgba(255,55,95,.11);
    }

    .file-input {
      min-height: 76px;
      border-color: rgba(255,255,255,.86);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(245,251,255,.60) 54%, rgba(232,246,255,.46) 100%),
        rgba(255,255,255,.58);
      box-shadow:
        0 0 0 1px rgba(8,119,255,.055),
        inset 0 1px 0 rgba(255,255,255,.94);
    }

    .file-input:hover {
      border-color: rgba(255,255,255,.96);
      background:
        linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,253,255,.70) 54%, rgba(226,243,255,.58) 100%),
        rgba(255,255,255,.68);
      box-shadow:
        0 0 0 1px rgba(0,122,255,.12),
        inset 0 1px 0 rgba(255,255,255,.98);
    }

    .step-card,
    .result-card {
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.44)),
        rgba(255,255,255,.34);
    }

    .step-card {
      padding: 18px;
    }

    .step-title h3 {
      font-size: 16px;
      font-weight: 600;
    }

    .step-index {
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.52)),
        rgba(0,122,255,.07);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
    }

    .result-card h4 {
      font-size: 15.5px;
      font-weight: 600;
    }

	    .result-card p,
	    .result-card li,
	    .structure-item span,
	    .structure-source,
    .structure-timeline-item p,
    .script-meta-line,
    .script-table-row,
    .script-row p,
    .comment-text,
    .pre-wrap {
	      color: rgba(29,29,31,.84);
	      font-size: 14px;
	    }

	    /* UI consistency layer: card rhythm, form alignment and type hierarchy. */
	    .workspace,
	    .flow,
	    .output-stack {
	      gap: var(--layout-gap);
	    }

	    .grid-2,
	    .grid-3,
	    .metrics,
	    .history-record-grid,
	    .settings-info-grid,
	    .product-insight-grid,
	    .structure-grid,
	    .learning-card-grid {
	      gap: var(--layout-gap);
	    }

	    .card {
	      padding: var(--card-padding);
	      border-radius: 26px;
	    }

	    .section-title {
	      gap: 16px;
	      margin-bottom: 18px;
	      padding-bottom: 0;
	    }

		    .step-card {
		      padding: var(--step-padding);
		      border-radius: 20px;
		    }

	    .topbar,
	    .result-card,
	    .token-activity-card,
	    .user-token-stat,
	    .product-insight-block,
	    .structure-panel,
	    .structure-item,
	    .learning-result-card {
	      border-radius: 18px;
	    }

		    .result-card {
		      padding: var(--result-padding);
		    }

		    .result-card .chip-row,
		    .history-card .chip-row,
		    .learning-card-meta,
		    .recent-product-meta {
		      gap: 8px;
		    }

		    .file-input,
		    .selected-file-card,
		    .upload-file-card,
		    .product-insight-block,
		    .structure-panel,
		    .structure-item,
		    .learning-result-card,
		    .learning-card,
		    .history-card,
		    .favorite-card,
		    .recent-product-card,
		    .ranking-card,
		    .assistant-message,
		    .assistant-empty,
		    .split-note,
		    .compact-empty {
		      padding: var(--inner-card-padding);
		    }

		    .script-row,
		    .comment-row,
		    .script-table-row {
		      padding: 16px 18px;
		    }

		    .history-card,
		    .favorite-card {
		      padding-right: 56px;
		    }

		    .step-result {
		      margin-top: var(--layout-gap);
		      padding-top: var(--layout-gap);
		    }

		    .result-card h4 {
		      margin-bottom: 14px;
		    }

		    .result-card p + p,
		    .result-card ul + p,
		    .result-card p + ul,
		    .pre-wrap + .pre-wrap {
		      margin-top: 10px;
		    }

	    .recent-product-card {
	      border-radius: 16px;
	    }

	    .result-card.product-analysis-card {
	      padding: 0;
	      border-radius: 0;
	    }

		    .form-grid,
		    .date-range-grid {
		      gap: var(--layout-gap);
		      align-items: start;
		    }

	    .form-grid > .field,
	    .date-range-grid > .field {
	      margin-bottom: 0;
	      min-width: 0;
	    }

		    .field {
		      gap: 8px;
		      margin-bottom: var(--layout-gap);
		    }

	    .field label,
	    .model-enable-line {
	      font-size: 13.5px;
	      font-weight: 600;
	      line-height: 1.35;
	    }

	    input,
	    select,
	    textarea,
	    .select-trigger {
	      min-height: 44px;
	      padding: 10px 13px;
	      font-size: 12px;
	      line-height: 1.45;
	    }

	    textarea {
	      line-height: 1.68;
	    }

	    .link-input {
	      padding-block: 14px;
	      line-height: 1.45;
	    }

	    .page-title h2 {
	      font-size: clamp(30px, 2.35vw, 36px);
	      font-weight: 700;
	      line-height: 1.08;
	    }

	    .page-title p {
	      font-size: 14px;
	      line-height: 1.62;
	    }

	    .card h3,
	    .section-title h3 {
	      font-size: 20px;
	      font-weight: 700;
	      line-height: 1.25;
	    }

	    .section-title p,
	    .step-subtitle {
	      font-size: 13.5px;
	      line-height: 1.6;
	    }

	    .step-title h3 {
	      font-size: 16px;
	      font-weight: 600;
	      line-height: 1.3;
	    }

	    .result-card h4,
	    .token-activity-head h4,
	    .training-data-title {
	      font-size: 15.5px;
	      font-weight: 600;
	      line-height: 1.35;
	    }

	    .button {
	      min-height: 40px;
	      font-size: 13px;
	    }

	    .mini-button {
	      min-height: 32px;
	      font-size: 12px;
	    }

	    .metric {
	      border-color: rgba(var(--metric-rgb, 8,119,255), .30);
	    }

	    .model-config-header,
	    .model-config-row {
	      gap: 8px;
	      align-items: end;
	    }

	    .model-config-cell input {
	      min-height: 42px;
	      padding: 9px 12px;
	      font-size: 13.5px;
	    }

	    .model-config-actions {
	      height: 42px;
	      align-self: end;
	      align-items: center;
	    }

	    .model-config-actions .button {
	      width: 42px;
	      height: 42px;
	      min-height: 42px;
	      flex-basis: 42px;
	      padding: 0;
	    }

	    .script-panel,
	    .comment-panel,
	    .structure-panel,
    .structure-item,
    .structure-timeline-item {
      border-color: rgba(255,255,255,.58);
      background:
        linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.28)),
        rgba(255,255,255,.24);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
    }

    .comment-row,
    .script-row,
    .script-table-row {
      border-bottom-color: rgba(60,60,67,.075);
    }

    .table-wrap {
      border-color: rgba(255,255,255,.58);
    }

    th {
      color: rgba(60,60,67,.58);
      background: rgba(255,255,255,.38);
    }

    tbody tr:hover td {
      background: rgba(0,122,255,.035);
    }

    .hook-card:hover,
    .learning-card:hover {
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.56)),
        rgba(255,255,255,.54);
      box-shadow:
        0 16px 32px rgba(0,122,255,.075),
        inset 0 1px 0 rgba(255,255,255,.86);
    }

    .hook-card.selected {
      border-color: rgba(0,122,255,.46);
      background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.62)),
        rgba(0,122,255,.16);
      box-shadow:
        0 18px 36px rgba(0,122,255,.16),
        0 0 0 1px rgba(0,122,255,.12),
        inset 0 1px 0 rgba(255,255,255,.9);
    }

    .learning-card.selected {
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.56)),
        rgba(0,122,255,.08);
    }

    .history-card {
      min-height: 158px;
    }

    .modal.api-failure-modal .modal-box {
      width: min(672px, calc(100vw - 48px));
      max-height: min(456px, calc(100vh - 48px));
      border-radius: 24px;
    }

    .history-card h4 {
      font-size: 15.5px;
      font-weight: 600;
    }

    .history-delete {
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.54)),
        rgba(255,255,255,.50);
      color: rgba(60,60,67,.58);
    }

    .modal {
      background: rgba(20, 20, 22, .26);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .modal-box {
      width: min(1120px, calc(100vw - 48px));
      border-radius: 28px;
    }

    .modal-head {
      margin: 16px 16px 0;
      padding: 18px 20px;
      border: 1px solid rgba(255,255,255,.78);
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,253,255,.66)),
        rgba(255,255,255,.62);
      box-shadow:
        0 0 0 1px rgba(0,122,255,.045),
        inset 0 1px 0 rgba(255,255,255,.92);
      position: sticky;
      top: 16px;
      z-index: 3;
    }

    .modal-title {
      font-size: 18px;
      font-weight: 600;
    }

    .ai-progress-card {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .ai-progress-track {
      width: 100%;
      max-width: 100%;
      height: 7px;
      background: rgba(60,60,67,.08);
    }

    .ai-progress-fill {
      background: linear-gradient(90deg, #0877ff, #14b8a6 50%, #27c76f);
      box-shadow: 0 0 14px rgba(20,184,166,.28);
    }

    .toast {
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.66)),
        rgba(255,255,255,.66);
    }

    .output-stack,
    .output-stack > .card,
    .user-table-wrap {
      min-width: 0;
      max-width: 100%;
    }

    .workbench-home {
      display: grid;
      gap: clamp(11px, 1.5vw, 17px);
      align-items: start;
      align-content: start;
      min-height: calc(100dvh - var(--page-pad-y) * 2);
    }

    .home-ai-console {
      width: min(1040px, 100%);
      margin: clamp(120px, 21vh, 250px) auto clamp(9px, 1.25vw, 17px);
      display: grid;
      gap: 40px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

    .home-ai-head {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      padding: 0;
      border-bottom: 0;
      text-align: left;
    }

    .home-ai-title {
      display: grid;
      justify-items: start;
      gap: 18px;
      min-width: 0;
    }

    .home-ai-title h3 {
      margin: 0;
      color: #1d1d1f;
      font-size: clamp(28px, 3.1vw, 42px);
      line-height: 1.18;
      font-weight: 600;
    }

    .home-ai-title p {
      display: block;
      margin: 0;
      max-width: 760px;
      color: rgba(60,60,67,.64);
      font-size: clamp(18px, 1.6vw, 24px);
      line-height: 1.45;
      font-weight: 500;
    }

    .home-ip-mascot {
      display: none;
      position: relative;
      flex: 0 0 auto;
      min-width: 0;
      pointer-events: none;
      user-select: none;
    }

	    .home-ip-stage {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: end center;
      width: clamp(118px, 10vw, 156px);
      height: clamp(154px, 12.8vw, 198px);
      overflow: hidden;
      border-radius: 17px;
      background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.38), rgba(255,255,255,.12) 52%, rgba(255,255,255,0) 100%);
	      animation: homeIpFloat 4.8s ease-in-out infinite;
	    }

	    .home-ip-stage picture {
	      display: contents;
	    }

	    .home-ip-stage img {
      display: block;
      width: auto;
      height: clamp(142px, 11.8vw, 184px);
      object-fit: contain;
      filter: drop-shadow(0 18px 24px rgba(38, 74, 39, .14));
      transform-origin: 50% 88%;
      animation: homeIpIdle 3.6s ease-in-out infinite;
    }

    .home-ip-glow {
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
      opacity: .62;
      filter: blur(0);
      animation: homeIpGlow 5.4s ease-in-out infinite;
    }

    .home-ip-glow-a {
      width: clamp(154px, 13vw, 210px);
      height: clamp(76px, 6vw, 96px);
      right: -18px;
      bottom: 7px;
      background: radial-gradient(circle, rgba(95, 173, 81, .18), rgba(95, 173, 81, 0) 72%);
    }

    .home-ip-glow-b {
      width: clamp(118px, 10vw, 168px);
      height: clamp(118px, 10vw, 168px);
      right: 18px;
      top: 2px;
      background: radial-gradient(circle, rgba(198, 161, 95, .13), rgba(198, 161, 95, 0) 68%);
      animation-delay: -1.8s;
    }

    @keyframes homeIpFloat {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(0, -8px, 0); }
    }

    @keyframes homeIpIdle {
      0%, 100% { transform: rotate(-1deg) scale(1); }
      45% { transform: rotate(1.4deg) scale(1.012); }
      70% { transform: rotate(.2deg) scale(1.004); }
    }

    @keyframes homeIpGlow {
      0%, 100% { transform: scale(.96); opacity: .5; }
      50% { transform: scale(1.06); opacity: .78; }
    }

    .home-ai-status {
      display: none;
    }

    .home-ai-status .icon {
      width: 15px;
      height: 15px;
      color: var(--accent);
    }

    .home-ai-thread {
      width: min(860px, 100%);
      min-height: 0;
      max-height: 360px;
      margin: 0 auto;
      overflow-y: auto;
      display: grid;
      gap: 10px;
      align-content: start;
      padding: 2px;
      scrollbar-width: thin;
    }

    .home-ai-thread:empty {
      display: none;
    }

    .home-ai-empty {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.75;
      padding: 6px 2px;
    }

    .home-ai-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
    }

    .home-ai-suggestion {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      color: rgba(29,29,31,.74);
      background: rgba(248,250,252,.92);
      border: 1px solid rgba(60,60,67,.08);
      box-shadow: none;
      font-size: 12px;
      font-weight: 700;
    }

    .home-ai-suggestion:hover {
      color: var(--accent);
      background: rgba(0,122,255,.08);
    }

    .home-ai-composer {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      min-height: 216px;
      padding: 22px 26px 18px;
      border: 1px solid rgba(10,132,255,.22);
      border-radius: 30px;
      background:
        radial-gradient(circle at 18% 0%, rgba(10,132,255,.045), rgba(10,132,255,0) 28%),
        radial-gradient(circle at 84% 100%, rgba(52,199,89,.045), rgba(52,199,89,0) 30%),
        rgba(255,255,255,.84);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.70),
        inset 0 1px 0 rgba(255,255,255,.92);
      isolation: isolate;
      transition:
        border-color .22s cubic-bezier(.2,.8,.2,1),
        box-shadow .22s cubic-bezier(.2,.8,.2,1),
        background .22s cubic-bezier(.2,.8,.2,1);
    }

    .home-ai-composer > * {
      position: relative;
      z-index: 1;
    }

    .home-ai-composer::after {
      content: "";
      position: absolute;
      inset: -2px;
      z-index: 0;
      padding: 2px;
      border-radius: inherit;
      pointer-events: none;
      background:
        conic-gradient(
          from var(--home-composer-light-angle, 0deg),
          rgba(10,132,255,0) 0deg,
          rgba(10,132,255,.72) 42deg,
          rgba(52,199,89,.64) 96deg,
          rgba(255,204,0,.55) 148deg,
          rgba(175,82,222,.64) 206deg,
          rgba(10,132,255,.72) 276deg,
          rgba(10,132,255,0) 360deg
        );
      opacity: .64;
      filter: saturate(1.12);
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: homeComposerLightFlow 4.8s linear infinite;
      transition: opacity .22s ease, filter .22s ease;
    }

    .home-ai-composer:hover,
    .home-ai-composer:focus-within,
    .home-ai-composer.is-thinking {
      border-color: rgba(10,132,255,.30);
      background:
        radial-gradient(circle at 18% 0%, rgba(10,132,255,.08), rgba(10,132,255,0) 28%),
        radial-gradient(circle at 84% 100%, rgba(52,199,89,.08), rgba(52,199,89,0) 30%),
        rgba(255,255,255,.86);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.78),
        0 18px 52px rgba(10,132,255,.08),
        inset 0 1px 0 rgba(255,255,255,.94);
    }

    .home-ai-composer:hover::after,
    .home-ai-composer:focus-within::after {
      opacity: .80;
      filter: saturate(1.22);
      animation-duration: 3.6s;
    }

    .home-ai-composer.is-thinking::after {
      opacity: .86;
      filter: saturate(1.24);
      animation-duration: 2.8s;
    }

    @property --home-composer-light-angle {
      syntax: "<angle>";
      inherits: false;
      initial-value: 0deg;
    }

    @keyframes homeComposerLightFlow {
      to {
        --home-composer-light-angle: 360deg;
      }
    }

    .home-ai-composer textarea {
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: 132px;
      padding: 0;
      resize: none;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      font-size: 16px;
      line-height: 1.65;
      font-family: var(--font-system);
      font-weight: 400;
      color: transparent;
      -webkit-text-fill-color: transparent;
      caret-color: #1d1d1f;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .home-ai-input-shell {
      position: relative;
      min-width: 0;
      min-height: 132px;
    }

    .home-ai-input-highlight {
      position: absolute;
      inset: 0;
      z-index: 0;
      min-height: 132px;
      pointer-events: none;
      color: #1d1d1f;
      font-size: 16px;
      line-height: 1.65;
      font-family: var(--font-system);
      font-weight: 400;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      overflow: hidden;
    }

    .home-ai-input-highlight:empty {
      display: none;
    }

    .home-ai-paste-token {
      color: #0877ff;
      background: transparent;
    }

    .home-ai-composer textarea::placeholder {
      color: rgba(60,60,67,.38);
      -webkit-text-fill-color: rgba(60,60,67,.38);
    }

    .home-ai-composer textarea::selection {
      color: #0877ff;
      background: transparent;
    }

    .home-ai-composer textarea:hover,
    .home-ai-composer textarea:focus {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      outline: none;
    }

    .home-ai-composer-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
    }

    .home-ai-send {
      flex: 0 0 42px;
      width: 42px;
      min-width: 42px;
      height: 42px;
      min-height: 42px;
      display: grid;
      place-items: center;
      padding: 0;
      border-radius: 50%;
      color: #fff;
      background: var(--accent-fill);
      border: 0;
      box-shadow: none;
      transition: background .16s ease, color .16s ease;
    }

    .home-ai-send .icon {
      width: 19px;
      height: 19px;
      stroke-width: 2.3;
    }

    .home-ai-send:disabled {
      opacity: 1;
      color: #fff;
      background: rgba(60,60,67,.26);
      cursor: default;
    }

    .workbench-home.home-chat-active {
      min-height: calc(100dvh - var(--page-pad-y) * 2);
      align-content: stretch;
    }

	    .home-ai-console.is-chat-mode {
	      width: min(var(--home-chat-width), 100%);
	      height: calc(100dvh - var(--page-pad-y) * 2);
	      min-height: 0;
	      margin: 0 auto;
	      gap: 18px;
	      grid-template-rows: minmax(0, 1fr) auto;
	      align-content: stretch;
	      position: relative;
	      overflow: hidden;
	    }

    .home-ai-console.is-chat-mode .home-ai-thread {
	      width: min(var(--home-chat-width), 100%);
	      min-height: 0;
	      max-height: none;
	      margin: 0 auto;
	      padding: clamp(18px, 5vh, 48px) 2px 24px;
	      overflow-y: auto;
	      align-content: start;
	    }

    .home-ai-console.is-chat-mode .assistant-message {
      width: fit-content;
      max-width: min(680px, 82%);
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none !important;
      font-size: 16px;
      line-height: 1.75;
    }

    .home-ai-console.is-chat-mode .assistant-message.user {
      justify-self: end;
      max-width: min(340px, 70%);
      padding: 12px 16px;
      border-radius: 18px;
      background: rgba(118,118,128,.10);
      border: 0;
      box-shadow: none !important;
    }

    .home-ai-console.is-chat-mode .assistant-message small {
      display: block;
      margin-top: 8px;
      color: rgba(60,60,67,.62);
      font-size: 12px;
    }

	    .home-ai-console.is-chat-mode .home-ai-composer {
	      position: sticky;
	      bottom: clamp(14px, 2.5vh, 28px);
	      z-index: 4;
	      width: min(var(--home-chat-width), 100%);
	      min-height: 116px;
	      margin: 0 auto;
	      padding: 16px 18px 14px;
	      border-radius: 18px;
	      border: 1px solid rgba(0,122,255,.26);
	      background: #fff;
	      box-shadow: none;
	      isolation: isolate;
	      overflow: visible;
	    }

	    .home-ai-console.is-chat-mode .home-ai-composer::before {
	      content: "";
	      position: absolute;
	      left: -28px;
	      right: -28px;
	      bottom: calc(100% - 1px);
	      height: clamp(64px, 10vh, 108px);
	      pointer-events: none;
	      background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.72) 54%, #fff 100%);
	      -webkit-backdrop-filter: blur(4px);
	      backdrop-filter: blur(4px);
	      z-index: 0;
	    }

	    .home-ai-console.is-chat-mode .home-ai-composer > * {
	      position: relative;
	      z-index: 1;
	    }

    .home-ai-console.is-chat-mode .home-ai-composer textarea {
      min-height: 54px;
      font-size: 15px;
      line-height: 1.6;
    }

    .home-ai-console.is-chat-mode .home-ai-input-shell,
    .home-ai-console.is-chat-mode .home-ai-input-highlight {
      min-height: 54px;
    }

    .home-ai-console.is-chat-mode .home-ai-input-highlight {
      line-height: 1.6;
    }

    .home-ai-console.is-chat-mode .home-ai-composer-foot {
      justify-content: flex-end;
      margin-top: 10px;
    }

    .home-ai-console.is-chat-mode .home-ai-suggestions {
      display: none;
    }

    .home-chat-shell {
      display: grid;
      grid-template-columns: minmax(196px, 230px) minmax(0, 1fr);
      gap: clamp(42px, 7vw, 132px);
      min-height: calc(100dvh - var(--page-pad-y) * 2);
      align-items: stretch;
    }

    .home-chat-sidebar {
      min-height: 0;
      padding: 8px 0 18px;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 13px;
      align-content: start;
      overflow: visible;
    }

    .home-chat-back {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: rgba(60,60,67,.70);
      background: rgba(255,255,255,.82);
      box-shadow: 0 8px 28px rgba(62,95,138,.10);
    }

    .home-chat-back:hover {
      color: var(--accent);
      background: rgba(0,122,255,.08);
    }

    .home-chat-back .icon {
      width: 19px;
      height: 19px;
      stroke-width: 2.35;
    }

    .home-new-chat {
      width: 100%;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid rgba(60,60,67,.10);
      color: #1d1d1f;
      background: rgba(255,255,255,.88);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.68),
        0 8px 28px rgba(48,104,156,.10);
      font-size: 13px;
      font-weight: 700;
    }

    .home-new-chat:hover {
      color: var(--accent);
      border-color: rgba(0,122,255,.18);
      background: rgba(255,255,255,.96);
    }

    .home-new-chat .icon {
      width: 16px;
      height: 16px;
      stroke-width: 2.4;
    }

    .home-session-list {
      display: grid;
      gap: 12px;
      min-height: 0;
      padding: 10px 0 22px;
      align-content: start;
      overflow: visible;
    }

    .home-session-group {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .home-session-group-title {
      margin: 8px 0 4px;
      padding: 0 10px;
      color: rgba(60,60,67,.58);
      font-size: 12px;
      line-height: 1.4;
      font-weight: 700;
    }

    .home-session-item {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 30px;
      align-items: center;
      min-height: 38px;
      border-radius: 13px;
      color: #1d1d1f;
      background: transparent;
      overflow: visible;
    }

    .home-session-item.is-active {
      background: rgba(0,122,255,.10);
      color: var(--accent);
    }

    .home-session-select {
      min-width: 0;
      width: 100%;
      min-height: 38px;
      justify-content: flex-start;
      padding: 0 4px 0 12px;
      border: 0;
      border-radius: 13px;
      color: inherit;
      background: transparent;
      box-shadow: none;
      font-size: 13px;
      line-height: 1.35;
      font-weight: 600;
      text-align: left;
    }

    .home-session-select span {
      display: block;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .home-session-more {
      width: 30px;
      height: 30px;
      min-width: 30px;
      min-height: 30px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: rgba(60,60,67,.62);
      background: transparent;
      box-shadow: none;
    }

    .home-session-item.is-active .home-session-more,
    .home-session-more:hover {
      color: var(--accent);
      background: rgba(0,122,255,.08);
    }

    .home-session-more .icon {
      width: 17px;
      height: 17px;
      stroke-width: 2.1;
    }

    .home-session-menu {
      position: absolute;
      left: calc(100% - 12px);
      top: 32px;
      z-index: 20;
      width: 168px;
      padding: 7px;
      border-radius: 18px;
      border: 1px solid rgba(60,60,67,.10);
      background: rgba(255,255,255,.94);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.70),
        0 14px 34px rgba(48,104,156,.14);
    }

    .home-session-menu button {
      width: 100%;
      min-height: 38px;
      justify-content: flex-start;
      gap: 9px;
      padding: 0 10px;
      border: 0;
      border-radius: 12px;
      color: #1d1d1f;
      background: transparent;
      box-shadow: none;
      font-size: 13px;
      font-weight: 600;
      text-align: left;
    }

    .home-session-menu button:hover {
      background: rgba(118,118,128,.10);
    }

    .home-session-menu button.danger {
      color: #ff3b30;
    }

    .home-session-menu .icon {
      width: 17px;
      height: 17px;
      stroke-width: 2.1;
    }

    .home-session-empty {
      padding: 8px 10px;
      color: rgba(60,60,67,.52);
      font-size: 12px;
      line-height: 1.55;
    }

    .home-chat-shell .home-ai-console.is-chat-mode {
      width: min(860px, 100%);
      justify-self: center;
    }

    .workbench-overview {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
      gap: var(--layout-gap);
      align-items: stretch;
    }

    .workbench-overview-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }

    .workbench-overview-copy h3 {
      margin: 0 0 10px;
      color: #1d1d1f;
      font-size: 24px;
      line-height: 1.25;
      font-weight: 800;
    }

    .workbench-overview-copy p {
      margin: 0;
      max-width: 720px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.75;
    }

    .workbench-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .workbench-stat {
      min-width: 0;
      padding: 14px;
      border-radius: 20px;
      border: 1px solid var(--frost-border);
      background: rgba(255,255,255,.56);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
    }

    .workbench-stat span {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .workbench-stat b {
      display: block;
      color: #1d1d1f;
      font-size: 24px;
      line-height: 1.1;
      font-weight: 800;
    }

    .workbench-entry-grid {
      width: min(70%, 1120px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .workbench-entry-card {
      position: relative;
      display: grid;
      grid-template-rows: auto auto auto auto;
      gap: 7px;
      min-height: 0;
      height: 210px;
      padding: 14px;
      border: 1px solid rgba(216,226,236,.72);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.91)),
        rgba(255,255,255,.94);
      box-shadow:
        0 8px 28px rgba(var(--entry-rgb, 48,104,156), .09),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
      color: #1d1d1f;
      font: inherit;
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      appearance: none;
      -webkit-appearance: none;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .workbench-entry-card > * {
      position: relative;
      z-index: 1;
    }

    .workbench-entry-card:hover {
      transform: translateY(-2px);
      border-color: rgba(var(--entry-rgb, 8,119,255), .26);
      box-shadow:
        0 10px 30px rgba(var(--entry-rgb, 48,104,156), .12),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
    }

    .workbench-entry-card:focus-visible {
      outline: 3px solid rgba(var(--entry-rgb, 8,119,255), .24);
      outline-offset: 3px;
    }

    .workbench-entry-icon {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: rgb(var(--entry-rgb, 8,119,255));
      background: rgba(var(--entry-rgb, 8,119,255), .08);
      border: 1px solid rgba(var(--entry-rgb, 8,119,255), .13);
      box-shadow: none;
    }

    .workbench-entry-icon .icon {
      width: 18px;
      height: 18px;
      stroke-width: 2.2;
    }

    .workbench-entry-card h3 {
      margin: 0;
      color: #1d1d1f;
      font-size: 17px;
      line-height: 1.25;
      font-weight: 700;
    }

    .workbench-entry-card p {
      margin: 0;
      color: rgba(29,29,31,.68);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 11.5px;
      line-height: 1.48;
    }

    .workbench-entry-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-content: flex-start;
    }

    .workbench-entry-card .button {
      justify-self: start;
      pointer-events: none;
      min-height: 30px;
      padding: 0 10px;
      font-size: 11.5px;
    }

    .workbench-entry-card .chip {
      min-height: 22px;
      padding: 0 8px;
      font-size: 11px;
      line-height: 1;
    }

    .workbench-entry-card.entry-create { --entry-rgb: 35,177,77; }
    .workbench-entry-card.entry-rewrite { --entry-rgb: 8,119,255; }
    .workbench-entry-card.entry-library { --entry-rgb: 20,184,166; }

    .user-table-wrap {
      width: 100%;
      overflow-x: auto;
    }

    .user-table {
      min-width: 900px;
    }

    .user-note {
      max-width: 170px;
    }

    @media (min-width: 1121px) {
      .app.sidebar-collapsed .sidebar {
        border-radius: 28px;
      }

      .app.sidebar-collapsed .nav-button.active {
        box-shadow:
          0 12px 24px rgba(0,122,255,.13),
          inset 0 1px 0 rgba(255,255,255,.90);
      }
    }

    @media (max-width: 1120px) {
      .sidebar {
        border-radius: 24px;
      }

      .home-chat-shell {
        grid-template-columns: minmax(176px, 210px) minmax(0, 1fr);
        gap: 24px;
      }

      .home-session-menu {
        left: auto;
        right: 0;
      }

      .workbench-overview {
        grid-template-columns: 1fr;
      }

      .home-ai-head {
        display: grid;
      }

      .workbench-entry-grid {
        width: 100%;
        grid-template-columns: 1fr;
      }

      .workbench-entry-card {
        height: auto;
      }

      .history-record-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

	    @media (max-width: 760px) {
	      :root {
		        --layout-gap: 13.6px;
			        --card-padding: 18.4px;
			        --step-padding: 16.3px;
			        --result-padding: 16.3px;
			        --inner-card-padding: 14.3px;
	      }

      body {
        background-attachment: scroll;
      }

      .app {
        padding-inline: 8px;
        gap: var(--layout-gap);
      }

      .sidebar {
        background: var(--nav-bg);
      }

      .brand {
        min-height: 44px;
      }

      .card {
        padding: 18px;
        border-radius: 24px;
      }

      .card h3,
      .section-title h3 {
        font-size: 19px;
      }

      .step-card,
      .result-card {
        border-radius: 20px;
      }

      .field label {
        font-size: 14px;
        color: rgba(29,29,31,.82);
      }

      .mobile-tabbar {
        min-height: 62px;
        padding: 5px;
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(255,255,255,.78), rgba(238,248,255,.48)),
          rgba(255,255,255,.48);
      }

      .mobile-tab-button {
        height: 51px;
        border-radius: 999px;
      }

      .mobile-tab-indicator {
        top: 5px;
        bottom: 5px;
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.46)),
          rgba(0,122,255,.08);
      }

      .mobile-more-menu {
        border-radius: 22px;
        padding: 6px;
      }

      .history-filter-grid,
      .learning-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .workbench-overview-copy h3 {
        font-size: 21px;
      }

      .workbench-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .home-ai-console {
        width: 100%;
        margin: 18px auto 4px;
        gap: 32px;
        padding: 0;
      }

      .home-ai-thread {
        max-height: 300px;
      }

      .home-ai-composer {
        min-height: 154px;
        padding: 16px;
        border-radius: 24px;
      }

      .home-ai-send {
        width: 42px;
        min-width: 42px;
      }

      .workbench-home.home-chat-active {
        min-height: calc(100dvh - 96px);
      }

      .home-chat-shell {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: calc(100dvh - 96px);
      }

      .home-chat-sidebar {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 0;
      }

      .home-new-chat {
        min-height: 38px;
      }

      .home-session-list {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        padding: 0 0 4px;
        overflow-x: auto;
      }

      .home-session-group {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .home-session-group-title {
        display: none;
      }

      .home-session-item {
        min-width: 150px;
      }

      .home-session-menu {
        left: 0;
        right: auto;
      }

	      .home-ai-console.is-chat-mode {
	        width: 100%;
	        height: calc(100dvh - 96px);
	        min-height: 0;
	        margin: 0 auto;
	        gap: 12px;
	      }

      .home-ai-console.is-chat-mode .home-ai-thread {
        width: 100%;
        padding: 12px 0 10px;
      }

      .home-ai-console.is-chat-mode .assistant-message {
        max-width: 88%;
        font-size: 14px;
        line-height: 1.72;
      }

      .home-ai-console.is-chat-mode .assistant-message.user {
        max-width: 78%;
        padding: 10px 12px;
      }

      .home-ai-console.is-chat-mode .home-ai-composer {
        bottom: calc(76px + env(safe-area-inset-bottom));
        width: 100%;
        min-height: 96px;
        padding: 14px;
        border-radius: 20px;
      }

      .home-ai-console.is-chat-mode .home-ai-composer textarea {
        min-height: 44px;
      }

      .home-ai-console.is-chat-mode .home-ai-input-shell,
      .home-ai-console.is-chat-mode .home-ai-input-highlight {
        min-height: 44px;
      }

      .workbench-entry-card {
        min-height: 0;
        padding: 18px;
      }

      .history-record-grid {
        grid-template-columns: 1fr;
      }

      .interaction-chart-wrap {
        grid-template-columns: 1fr;
      }

      .interaction-chart {
        min-height: 230px;
      }

      .content-analysis-panel {
        padding: 14px;
        border-radius: 18px;
      }

      .button {
        min-height: 44px;
      }

      .modal-box {
        width: calc(100vw - 16px);
        border-radius: 24px;
      }
    }

    .learning-filter-grid {
      grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(190px, 1.2fr) minmax(120px, .7fr);
      align-items: end;
    }

    .learning-filter-grid .field:first-child {
      grid-column: 1 / -1;
    }

    @media (max-width: 760px) {
      .form-grid.learning-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
      }

      .form-grid.learning-filter-grid .field {
        min-width: 0;
      }

      .form-grid.learning-filter-grid .field:first-child {
        grid-column: 1 / -1;
      }

      .learning-list-shell.has-scroll-controls {
        grid-template-columns: 1fr;
      }

      .learning-scroll-controls {
        display: flex;
        justify-content: center;
      }

      .learning-list {
        grid-template-columns: 1fr;
      }

      .selected-doc-grid {
        grid-template-columns: 1fr;
      }

      .product-doc-upload-row {
        grid-template-columns: 1fr;
      }

      .product-doc-file-input {
        grid-template-columns: 1fr;
      }

      .product-doc-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
      }
    }

    /* Global UI standardization: one spacing rhythm across all pages. */
    :root {
      --layout-gap: 13.6px;
      --sidebar-main-gap: calc(var(--layout-gap) * .8);
      --card-padding: 24.5px;
      --step-padding: 20.4px;
      --result-padding: 18.4px;
      --inner-card-padding: 16.3px;
      --control-height: 44px;
      --control-padding-x: 14px;
      --control-padding-y: 10px;
    }

    @media (min-width: 1121px) {
      .app {
        column-gap: var(--sidebar-main-gap);
        row-gap: var(--layout-gap);
      }

      .sidebar {
        left: max(var(--page-pad-x), calc((100vw - var(--app-max-width)) / 2 + var(--page-pad-x)));
      }

      .main {
        gap: var(--layout-gap);
      }

      .comment-generator-layout,
      .create-agent-layout,
      .library-main-grid {
        gap: var(--layout-gap);
        align-items: start;
      }

      .comment-flow-panel {
        position: sticky;
        top: var(--comment-flow-sticky-top, calc(var(--page-pad-y) + 154px));
      }
    }

    .main,
    .workspace,
    .history-layout,
    .settings-grid,
    .library-main-grid,
    .create-agent-layout,
    .comment-generator-layout,
    .output-stack,
    .flow,
    .upload-list,
    .favorite-list,
    .product-doc-panel,
    .learning-list-shell,
    .learning-list,
    .selected-doc-grid,
    .product-doc-upload-row,
    .product-doc-actions,
    .metrics,
    .grid-2,
    .grid-3,
    .form-grid,
    .date-range-grid,
    .history-record-grid,
    .history-filter-grid,
    .learning-filter-grid,
    .settings-info-grid,
    .product-insight-grid,
    .structure-grid,
    .learning-card-grid {
      gap: var(--layout-gap);
    }

    .card,
    .topbar,
    .modal-box {
      padding: var(--card-padding);
    }

    .step-card {
      padding: var(--step-padding);
    }

    .result-card,
    .table-wrap,
    .empty,
    .history-card,
    .favorite-card,
    .learning-card,
    .recent-product-card,
    .ranking-card,
    .product-insight-block,
    .structure-panel,
    .structure-item,
    .learning-result-card,
    .selected-doc-card,
    .upload-file-card,
    .selected-file-card,
    .assistant-message,
    .assistant-empty,
    .split-note,
    .compact-empty {
      padding: var(--inner-card-padding);
    }

    .result-card {
      padding: var(--result-padding);
    }

    .section-title {
      gap: var(--layout-gap);
      margin-bottom: var(--layout-gap);
      padding-bottom: 0;
    }

    .field {
      gap: 8px;
      margin-bottom: var(--layout-gap);
    }

    .form-grid > .field,
    .date-range-grid > .field,
    .history-filter-grid > .field,
    .learning-filter-grid > .field {
      margin-bottom: 0;
      min-width: 0;
    }

    input,
    select,
    textarea,
    .select-trigger {
      min-height: var(--control-height);
      padding: var(--control-padding-y) var(--control-padding-x);
      color: #1d1d1f;
      font-size: 12px;
      line-height: 1.45;
    }

    input::placeholder,
    textarea::placeholder,
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #1d1d1f;
      opacity: 1;
      font-size: 12px;
    }

    textarea {
      line-height: 1.68;
    }

    .link-input {
      padding-block: 14px;
    }

    .button {
      min-height: 40px;
      padding-inline: 16px;
    }

    .button.icon-action,
    .mini-button.icon-action,
    .model-config-actions .button {
      padding-inline: 0;
    }

    .script-row,
    .comment-row,
    .script-table-row {
      padding: 16px 18px;
    }

    .result-card h4,
    .product-insight-block h5,
    .structure-panel h5,
    .learning-result-card h5 {
      margin-bottom: 12px;
    }

    .result-card p + p,
    .result-card ul + p,
    .result-card p + ul,
    .pre-wrap + .pre-wrap,
    .product-insight-block .pill + .pill,
    .structure-item + .structure-item {
      margin-top: 10px;
    }

    .file-input,
    .product-doc-file-input {
      gap: var(--layout-gap);
      padding: var(--inner-card-padding);
    }

    .product-doc-panel {
      margin: var(--layout-gap) 0;
    }

    .step-result {
      margin-top: var(--layout-gap);
      padding-top: var(--layout-gap);
    }

    .model-config-table,
    .model-config-header,
    .model-config-row {
      gap: 10px;
    }

    .model-config-row {
      padding: 10px;
    }

    @media (max-width: 1120px) {
      :root {
        --card-padding: 22.4px;
        --step-padding: 18.4px;
        --result-padding: 18.4px;
      }

      .comment-flow-panel {
        position: static;
      }
    }

	    @media (max-width: 760px) {
	      :root {
		        --layout-gap: 13.6px;
		        --sidebar-main-gap: calc(var(--layout-gap) * .8);
			        --card-padding: 18.4px;
		        --step-padding: 16.3px;
		        --result-padding: 16.3px;
		        --inner-card-padding: 14.3px;
        --control-height: 44px;
      }

      .app {
        gap: var(--layout-gap);
      }

      .topbar,
      .card,
      .modal-box {
        padding: var(--card-padding);
      }

	      .history-filter-grid,
	      .learning-filter-grid {
	        gap: var(--layout-gap);
	      }
	    }

	    @media (max-width: 1560px) {
	      .create-agent-layout {
	        grid-template-columns: minmax(0, 1fr) !important;
	      }

	      .create-agent-layout > .recent-products-panel {
	        display: none;
	      }

	      .create-flow-panel,
	      .create-flow-panel .step-card,
	      .create-flow-panel .field,
	      .create-flow-panel .file-input,
	      .create-flow-panel .product-doc-panel,
	      .create-flow-panel .product-doc-upload-row,
	      .create-flow-panel .product-doc-actions {
	        min-width: 0;
	        max-width: 100%;
	      }

	      .create-flow-panel .product-doc-file-input {
	        grid-template-columns: minmax(0, 1fr) auto;
	        align-items: center;
	      }

	      .create-flow-panel .product-doc-actions {
	        flex: 0 0 auto;
	        flex-wrap: nowrap;
	      }

	      .create-flow-panel .product-doc-actions .file-action {
	        width: auto;
	        min-width: 104px;
	      }
	    }

		    @media (max-width: 980px) {
		      .create-flow-panel .create-product-meta-grid {
		        grid-template-columns: 1fr;
		      }

	      .create-flow-panel .product-doc-file-input {
	        grid-template-columns: minmax(0, 1fr);
	        align-items: stretch;
	      }

		      .create-flow-panel .product-doc-actions {
		        justify-content: flex-start;
		        flex-wrap: wrap;
		      }
		    }

        .comment-result-panel .section-title.with-progress {
          position: relative;
          display: block;
          padding-right: 408px;
        }

        .comment-result-panel .section-title.with-progress > div:first-child {
          width: 100%;
          max-width: none;
        }

        .comment-result-panel .section-title.with-progress > div:first-child p {
          width: 100%;
          max-width: none;
        }

        .comment-result-panel .result-progress-slot {
          position: absolute;
          top: 0;
          right: 0;
          width: 466px;
          max-width: 466px;
        }

        @media (max-width: 980px) {
          .comment-result-panel .section-title.with-progress {
            display: flex;
            padding-right: 0;
          }

          .comment-result-panel .result-progress-slot {
            position: static;
            width: 100%;
            max-width: none;
          }
        }

        .modal.api-failure-modal .modal-box {
          width: min(600px, calc(100vw - 48px));
          max-height: min(330px, calc(100vh - 48px));
          padding: 0;
          border-radius: 22px;
        }

        .modal.api-failure-modal #modalBody {
          padding: 18px 24px;
        }

        .modal.api-failure-modal .api-failure-panel {
          grid-template-columns: 78px minmax(0, 1fr);
          gap: 16px;
          padding: 0;
        }

        .modal.api-failure-modal .api-failure-visual {
          width: 72px;
          height: 72px;
          border-radius: 0;
          background: none;
          border: 0;
          box-shadow: none;
          overflow: visible;
        }

        .modal.api-failure-modal .api-failure-visual svg {
          width: 72px;
          height: 72px;
        }

        .modal.api-failure-modal .modal-actions {
          margin-top: 14px;
          padding-top: 14px;
        }

        /* UI consistency pass: final shared component rules. */
        :root {
	          --ui-card-padding: 24.5px;
          --ui-card-radius: 17px;
		          --ui-step-padding: 20.4px;
          --ui-step-radius: 17px;
		          --ui-result-padding: 18.4px;
          --ui-result-radius: 17px;
		          --ui-inner-padding: 16.3px;
          --ui-inner-radius: 17px;
          --ui-title-size: 19px;
          --ui-title-weight: var(--font-title-weight);
          --ui-subtitle-size: 13px;
          --ui-label-size: 13.5px;
          --ui-label-weight: var(--font-title-weight);
          --ui-control-size: 13px;
          --ui-caption-size: 11.5px;
          --ui-button-height: 38px;
          --ui-button-font-size: 13px;
          --ui-upload-action-height: 34px;
          --ui-upload-action-size: 12px;
          --ui-icon-button-size: 40px;
          --ui-small-icon-button-size: 34px;
          --ui-icon-size: 16px;
          --ui-chip-height: 28px;
          --ui-chip-padding-x: 10px;
          --ui-placeholder: rgba(60,60,67,.42);
        }

        .card,
        .topbar,
        .modal-box {
          padding: var(--ui-card-padding);
          border-radius: var(--ui-card-radius);
        }

        .step-card {
          padding: var(--ui-step-padding);
          border-radius: var(--ui-step-radius);
        }

        .result-card,
        .history-card,
        .favorite-card,
        .learning-card,
        .recent-product-card,
        .ranking-card,
        .product-insight-block,
        .structure-panel,
        .structure-item,
        .learning-result-card,
        .selected-doc-card,
        .upload-file-card,
        .selected-file-card,
        .assistant-message,
        .assistant-empty,
        .split-note,
        .compact-empty {
          padding: var(--ui-inner-padding);
          border-radius: var(--ui-inner-radius);
        }

        .result-card {
          padding: var(--ui-result-padding);
          border-radius: var(--ui-result-radius);
        }

        .card h3,
        .section-title h3 {
          font-size: var(--ui-title-size);
          font-weight: var(--ui-title-weight);
          line-height: 1.3;
          letter-spacing: 0;
        }

        .section-title p,
        .page-title p,
        .hint,
        .muted {
          font-size: var(--ui-subtitle-size);
          line-height: 1.6;
          color: var(--muted);
          letter-spacing: 0;
        }

        .field label,
        .login-field label {
          font-size: var(--ui-label-size);
          font-weight: var(--ui-label-weight);
          line-height: 1.35;
          color: rgba(29,29,31,.82);
          letter-spacing: 0;
        }

        input,
        select,
        textarea,
        .select-trigger {
          font-size: var(--ui-control-size);
          line-height: 1.45;
          letter-spacing: 0;
          border-radius: 15px;
        }

        input::placeholder,
        textarea::placeholder,
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
          color: var(--ui-placeholder);
          opacity: 1;
          font-size: var(--ui-control-size);
        }

        .button,
        .mini-button,
        .logout-button,
        .mobile-logout-button,
        .token-range-tab {
          min-height: var(--ui-button-height);
          font-size: var(--ui-button-font-size);
          font-weight: 600;
          letter-spacing: 0;
          border-radius: var(--radius-button);
        }

        .button {
          padding-inline: 16px;
        }

        .mini-button {
          padding-inline: 12px;
        }

        .button.icon-only,
        .button.icon-action {
          width: var(--ui-icon-button-size);
          min-width: var(--ui-icon-button-size);
          height: var(--ui-icon-button-size);
          min-height: var(--ui-icon-button-size);
          flex-basis: var(--ui-icon-button-size);
          padding: 0;
        }

        .mini-button.icon-action,
        .icon-action:not(.button) {
          width: var(--ui-small-icon-button-size);
          min-width: var(--ui-small-icon-button-size);
          height: var(--ui-small-icon-button-size);
          min-height: var(--ui-small-icon-button-size);
          padding: 0;
        }

        .icon,
        .button .icon,
        .mini-button .icon,
        .file-action .icon,
        .chip .icon,
        .icon-action .icon {
          width: var(--ui-icon-size);
          height: var(--ui-icon-size);
          flex: 0 0 var(--ui-icon-size);
        }

        .chip {
          min-height: var(--ui-chip-height);
          padding: 0 var(--ui-chip-padding-x);
          border-radius: 999px;
          font-size: 12px;
          font-weight: 600;
          line-height: 1.2;
          letter-spacing: 0;
        }

        .metrics .metric .chip {
          min-height: 30px;
          padding: 0 14px 0 28px;
        }

        .file-input,
        .product-doc-file-input {
          min-height: 88px;
          padding: var(--ui-inner-padding);
          border-radius: var(--ui-inner-radius);
          gap: 12px;
        }

        .file-copy b {
          font-size: var(--ui-control-size);
          font-weight: 700;
          line-height: 1.3;
          letter-spacing: 0;
        }

        .file-copy small {
          font-size: var(--ui-caption-size);
          font-weight: 600;
          line-height: 1.5;
          letter-spacing: 0;
        }

        .file-action {
          min-height: var(--ui-upload-action-height);
          padding: 0 14px;
          font-size: var(--ui-upload-action-size);
          font-weight: 600;
          letter-spacing: 0;
          border-radius: var(--radius-button);
        }

        .local-video-delete-button,
        .training-upload-delete {
          width: var(--ui-small-icon-button-size);
          min-width: var(--ui-small-icon-button-size);
          height: var(--ui-small-icon-button-size);
          min-height: var(--ui-small-icon-button-size);
          flex-basis: var(--ui-small-icon-button-size);
        }

        .local-video-delete-button .icon,
        .training-upload-delete .icon {
          width: var(--ui-icon-size);
          height: var(--ui-icon-size);
        }

        .modal-title,
        .api-failure-panel h3 {
          font-size: var(--ui-title-size);
          font-weight: var(--ui-title-weight);
          line-height: 1.3;
          letter-spacing: 0;
        }

        .modal.api-failure-modal .modal-box {
          width: min(600px, calc(100vw - 48px));
          border-radius: var(--ui-card-radius);
        }

        .modal.api-failure-modal #modalBody {
          padding: 18px 24px;
        }

        @media (max-width: 1120px) {
          :root {
		            --ui-card-padding: 22.4px;
		            --ui-step-padding: 18.4px;
		            --ui-result-padding: 18.4px;
          }
        }

        @media (max-width: 760px) {
          :root {
		            --ui-card-padding: 18.4px;
		            --ui-step-padding: 16.3px;
		            --ui-result-padding: 16.3px;
		            --ui-inner-padding: 14.3px;
            --ui-title-size: 19px;
          }

          .button,
          .mini-button,
          .logout-button,
          .mobile-logout-button,
          .token-range-tab {
            min-height: 44px;
          }

          .modal.api-failure-modal .modal-box {
            width: calc(100vw - 16px);
            border-radius: 24px;
          }
        }

        /* Attachment list final polish: compact action group and no desktop overflow. */
        .attachment-list-head,
        .attachment-list-row {
          grid-template-columns: minmax(220px, 2fr) 78px minmax(120px, .95fr) 96px 86px 144px 80px;
          gap: 10px;
        }

        .attachment-list-actions {
          width: 78px;
          min-width: 78px;
          justify-self: end;
        }

        .attachment-list-actions .icon-action,
        .attachment-list-actions .icon-action:not(.button) {
          width: 32px;
          min-width: 32px;
          height: 32px;
          min-height: 32px;
          flex: 0 0 32px;
        }

        @media (max-width: 1120px) {
          .attachment-list-table {
            overflow-x: auto;
          }

          .attachment-list-head,
          .attachment-list-row {
            min-width: 980px;
          }
        }

        /* Rewrite insight tables: explicit long-text layout. */
        .rewrite-insight-panel {
          margin-top: 16px;
          padding: 0;
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
          overflow: visible;
        }

        .rewrite-insight-section {
          padding: 0 0 22px;
          border-top: 0;
        }

        .rewrite-insight-section + .rewrite-insight-section {
          padding-top: 22px;
          border-top: 1px solid rgba(60,60,67,.10);
        }

        .rewrite-insight-section:last-child {
          padding-bottom: 0;
        }

        .rewrite-insight-table-wrap {
          overflow-x: auto;
          overflow-y: hidden;
        }

        .rewrite-insight-table {
          width: 100%;
          min-width: 1040px;
          table-layout: fixed;
          border-collapse: collapse;
        }

        .rewrite-storyboard-table {
          min-width: 1160px;
        }

        .rewrite-structure-map-table {
          min-width: 1100px;
        }

        .rewrite-insight-table th,
        .rewrite-insight-table td {
          padding: 14px 16px;
          vertical-align: top;
          white-space: normal !important;
          overflow: hidden;
          overflow-wrap: anywhere;
          word-break: break-word;
          line-break: anywhere;
          text-align: left;
        }

        .rewrite-insight-table th {
          color: rgba(29,29,31,.78);
          font-size: 13px;
          font-weight: 600;
          line-height: 1.35;
          background: rgba(255,255,255,.62);
        }

        .rewrite-insight-table td {
          color: rgba(29,29,31,.86);
          font-size: 13.5px;
          font-weight: 600;
          line-height: 1.72;
        }

        .rewrite-insight-table td:first-child,
        .rewrite-insight-table td:nth-child(2) {
          color: rgba(29,29,31,.9);
          font-weight: 600;
        }

		        .rewrite-voiceover-table { min-width: 720px; }
		        .rewrite-voiceover-table .col-time { width: 16%; }
		        .rewrite-voiceover-table .col-spoken { width: 84%; }

        .rewrite-storyboard-table .col-time { width: 8%; }
        .rewrite-storyboard-table .col-shot { width: 13%; }
        .rewrite-storyboard-table .col-visual { width: 23%; }
        .rewrite-storyboard-table .col-oral { width: 21%; }
        .rewrite-storyboard-table .col-focus { width: 19%; }
        .rewrite-storyboard-table .col-conversion { width: 16%; }

        .rewrite-structure-map-table .col-time { width: 8%; }
        .rewrite-structure-map-table .col-type { width: 14%; }
        .rewrite-structure-map-table .col-original { width: 28%; }
        .rewrite-structure-map-table .col-rewrite { width: 30%; }
	        .rewrite-structure-map-table .col-reason { width: 20%; }

		        .keyframe-cell {
		          display: grid;
		          gap: 8px;
		          min-width: 0;
		        }

		        .keyframe-thumb {
		          display: block;
		          width: min(168px, 100%);
		          max-width: 100%;
		          height: auto;
		          max-height: 320px;
		          object-fit: contain;
		          object-position: center;
		          border-radius: 10px;
		          border: 1px solid rgba(10,132,255,.16);
		          background: rgba(255,255,255,.72);
		          box-shadow: 0 8px 20px rgba(64,132,190,.12);
		        }

	        .keyframe-cell small {
	          color: var(--accent-blue);
	          font-size: 11px;
	          font-weight: 600;
	          line-height: 1.25;
	        }

	        .keyframe-cell span {
	          display: block;
	        }

	        .storyboard-action-cell {
	          display: grid;
	          gap: 6px;
	        }

	        .storyboard-action-cell span,
	        .storyboard-action-cell b {
	          display: block;
	        }

        .rewrite-insight-section-head h4 {
          font-size: var(--ui-title-size);
          font-weight: var(--ui-title-weight);
        }

        .rewrite-insight-section-head p {
          font-size: var(--ui-subtitle-size);
          font-weight: 600;
          line-height: 1.6;
        }

        @media (max-width: 760px) {
          .rewrite-insight-table {
            min-width: 920px;
          }

          .rewrite-storyboard-table {
            min-width: 1040px;
          }

          .rewrite-structure-map-table {
            min-width: 980px;
          }

          .rewrite-insight-table th,
          .rewrite-insight-table td {
            padding: 12px 14px;
            font-size: 13px;
          }
        }

        /* UI consistency execution pass: typography, actions, tables, uploads and progress. */
        :root {
          --ui-body-weight: var(--font-body-weight);
          --ui-strong-weight: var(--font-strong-weight);
          --ui-table-head-weight: var(--font-title-weight);
          --ui-icon-action-size: 34px;
          --ui-dense-icon-action-size: 32px;
          --ui-upload-min-height: 92px;
          --ui-upload-gap: 12px;
          --ui-progress-track-height: 6px;
        }

        .result-card p,
        .result-card li,
        .script-row p,
        .comment-text,
        .pre-wrap,
        .structure-source,
        .structure-item span,
        .learning-result-card p,
        .recent-product-meta,
        .history-card,
        .favorite-card {
          font-weight: var(--ui-body-weight);
          letter-spacing: 0;
        }

        .result-card h4,
        .product-insight-block h5,
        .structure-panel h5,
        .learning-result-card h5,
        .training-data-title,
        .token-activity-head h4 {
          font-weight: var(--ui-strong-weight);
          letter-spacing: 0;
        }

        .script-table-row,
        .training-script-table th,
        .training-script-table td,
        .user-table th,
        .user-table td,
        .model-config-table,
        .attachment-list-head,
        .attachment-list-row {
          letter-spacing: 0;
        }

        th,
        .training-script-table th,
        .user-table th,
        .model-config-header,
        .attachment-list-head {
          font-size: 12px;
          font-weight: var(--ui-table-head-weight);
          line-height: 1.35;
          color: rgba(60,60,67,.72);
        }

        td,
        .training-script-table td,
        .user-table td,
        .model-config-row,
        .attachment-list-row {
          font-size: 13.5px;
          font-weight: var(--ui-body-weight);
          line-height: 1.5;
          color: rgba(29,29,31,.86);
        }

        .attachment-file-name strong,
        .training-script-table .col-script,
        .training-script-table .col-product,
        .script-owner-cell,
        .script-status-cell {
          font-weight: var(--ui-strong-weight);
        }

        .attachment-file-name small,
        .file-copy small,
        .local-video-upload-progress-meta,
        .token-activity-note {
          font-weight: 600;
        }

        .button.icon-action,
        .mini-button.icon-action,
        .icon-action:not(.button),
        .local-video-delete-button,
        .training-upload-delete {
          width: var(--ui-icon-action-size);
          min-width: var(--ui-icon-action-size);
          height: var(--ui-icon-action-size);
          min-height: var(--ui-icon-action-size);
          flex: 0 0 var(--ui-icon-action-size);
          padding: 0;
          border: 0;
          border-radius: 999px;
          color: rgba(60,60,67,.66);
          background: transparent;
          box-shadow: none;
        }

        .button.icon-action:hover,
        .mini-button.icon-action:hover,
        .button.icon-action.active-soft,
        .mini-button.icon-action.active-soft,
        .icon-action:not(.button):hover {
          color: var(--accent);
          background: rgba(0,122,255,.08);
          box-shadow: none;
        }

        .button.icon-action.danger,
        .mini-button.icon-action.danger,
        .icon-action.danger,
        .local-video-delete-button.is-uploaded,
        .training-upload-delete.is-uploaded {
          color: var(--rose);
        }

        .button.icon-action.danger:hover,
        .mini-button.icon-action.danger:hover,
        .icon-action.danger:hover,
        .local-video-delete-button.is-uploaded:hover,
        .training-upload-delete.is-uploaded:hover {
          color: var(--rose);
          background: rgba(255,55,95,.10);
        }

        .button.icon-action .icon,
        .mini-button.icon-action .icon,
        .icon-action .icon,
        .local-video-delete-button .icon,
        .training-upload-delete .icon {
          width: var(--ui-icon-size);
          height: var(--ui-icon-size);
        }

        .attachment-list-actions .icon-action,
        .attachment-list-actions .icon-action:not(.button),
        .training-script-table .record-actions .icon-action,
        .training-script-table .record-actions .mini-button.icon-action {
          width: var(--ui-dense-icon-action-size);
          min-width: var(--ui-dense-icon-action-size);
          height: var(--ui-dense-icon-action-size);
          min-height: var(--ui-dense-icon-action-size);
          flex-basis: var(--ui-dense-icon-action-size);
        }

        .table-wrap,
        .training-table-wrap,
        .user-table-wrap,
        .attachment-list-table {
          border-radius: var(--ui-inner-radius);
        }

        .training-script-table th,
        .training-script-table td,
        .user-table th,
        .user-table td {
          padding: 12px 14px;
          vertical-align: middle;
        }

        .training-script-table td,
        .user-table td {
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .training-script-table .col-script,
        .training-script-table .col-product,
        .user-table td:nth-child(3) {
          white-space: normal;
          overflow-wrap: anywhere;
          word-break: break-word;
        }

        .user-table-wrap,
        .user-table,
        .user-table tbody,
        .user-table tr {
          overflow: visible;
        }

        .user-table th:nth-child(2),
        .user-table td:nth-child(2) {
          overflow: visible;
        }

        .user-table td:nth-child(2) {
          position: relative;
          z-index: 4;
        }

        .user-table tr:focus-within,
        .user-table tr:hover {
          position: relative;
          z-index: 12;
        }

        .user-role-select {
          position: relative;
          z-index: 5;
        }

        .attachment-list-row {
          min-height: 64px;
        }

        .attachment-list-actions {
          gap: 4px;
          padding: 3px;
        }

        .file-input,
        .product-doc-file-input {
          min-height: var(--ui-upload-min-height);
          grid-template-columns: minmax(0, 1fr) auto;
          gap: var(--ui-upload-gap);
          padding: var(--ui-inner-padding);
          border-radius: var(--ui-inner-radius);
        }

        .training-upload-card,
        .rewrite-video-upload,
        .comment-video-upload {
          grid-template-columns: minmax(0, 1fr) auto auto;
          gap: 8px var(--ui-upload-gap);
          align-items: center;
        }

        .training-upload-card .file-copy,
        .rewrite-video-upload .file-copy,
        .comment-video-upload .file-copy {
          gap: 4px;
          align-content: center;
        }

        .file-copy b {
          font-size: var(--ui-control-size);
          font-weight: var(--ui-strong-weight);
          line-height: 1.35;
        }

        .file-copy small {
          font-size: var(--ui-caption-size);
          line-height: 1.45;
          color: rgba(60,60,67,.72);
        }

        .file-action {
          min-height: var(--ui-upload-action-height);
          padding: 0 14px;
          font-size: var(--ui-upload-action-size);
          font-weight: 600;
        }

        .local-video-upload-progress,
        .training-upload-card .local-video-upload-progress {
          grid-column: 1 / -1;
          width: 100%;
          margin-top: 0;
        }

        .local-video-upload-progress-track,
        .ai-progress-track {
          height: var(--ui-progress-track-height);
          border: 0;
          background: rgba(60,60,67,.13);
          box-shadow: inset 0 1px 2px rgba(30,70,110,.08);
        }

        .ai-progress-head {
          gap: 10px;
          margin-bottom: 8px;
        }

        .ai-progress-title {
          font-size: 13px;
          font-weight: var(--ui-strong-weight);
          letter-spacing: 0;
        }

        .ai-progress-percent {
          font-size: 13px;
          font-weight: var(--ui-strong-weight);
          letter-spacing: 0;
        }

        .step-progress-slot {
          flex: 0 1 396px;
          min-width: 290px;
          max-width: 449px;
        }

        .result-progress-slot {
          width: 466px;
          max-width: 466px;
          min-width: 337px;
        }

        .comment-generator-layout,
        .comment-generator-layout > .card,
        .comment-flow-panel,
        .comment-flow-panel .flow,
        .comment-flow-panel .step-card,
        .comment-flow-panel .field,
        .comment-flow-panel .comment-video-input-grid,
        .comment-flow-panel .row-actions,
        .comment-flow-panel .rewrite-export-toolbar,
        .comment-flow-panel .comment-export-actions {
          min-width: 0;
          max-width: 100%;
        }

        .comment-flow-panel .flow,
        .comment-flow-panel .step-card,
        .comment-flow-panel .comment-video-input-grid,
        .comment-flow-panel .rewrite-export-toolbar,
        .comment-flow-panel .comment-export-actions {
          width: 100%;
        }

        .comment-flow-panel .comment-export-actions {
          grid-template-columns: 112px 168px 168px;
          width: auto;
          margin-left: auto;
          gap: 10px;
        }

        .comment-flow-panel .comment-export-actions .button:first-child {
          grid-column: auto;
        }

        .comment-flow-panel .comment-export-actions .button {
          min-width: 0;
          padding-inline: 16px;
        }

        @container (max-width: 520px) {
          .comment-flow-panel .comment-export-actions {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: 100%;
            margin-left: 0;
          }

          .comment-flow-panel .comment-export-actions .button:first-child {
            grid-column: 1 / -1;
          }

          .comment-flow-panel .comment-export-actions .button {
            padding-inline: 10px;
          }
        }

		        @media (max-width: 760px) {
	          .file-input,
	          .product-doc-file-input,
	          .training-upload-card,
	          .rewrite-video-upload,
          .comment-video-upload {
            grid-template-columns: minmax(0, 1fr) auto;
            min-height: 88px;
          }

          .file-action {
            min-width: 92px;
          }

          .local-video-delete-button,
          .training-upload-delete {
            grid-column: 2;
            grid-row: 1;
          }

	          .result-progress-slot,
	          .step-progress-slot {
	            width: 100%;
	            min-width: 0;
		            max-width: none;
		          }

	          .comment-flow-panel .comment-export-actions {
	            grid-template-columns: repeat(2, minmax(0, 1fr));
	            width: 100%;
	            margin-left: 0;
	          }

	          .comment-flow-panel .comment-export-actions .button:first-child {
	            grid-column: 1 / -1;
	          }

	          .comment-flow-panel .comment-export-actions .button {
	            padding-inline: 10px;
	          }
		        }

        /* System typography normalization. Chinese falls back to PingFang SC, English to SF. */
        body,
        button,
        input,
        select,
        textarea {
          font-family: var(--font-system) !important;
        }

        p,
        li,
        td,
        input,
        select,
        textarea,
        .hint,
        .muted,
        .pre-wrap,
        .comment-text,
        .structure-source,
        .structure-item span,
        .result-card p,
        .result-card li,
        .script-row p,
        .learning-result-card p,
        .recent-product-meta,
        .history-card,
        .favorite-card {
          font-weight: var(--font-body-weight) !important;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        th,
        label,
        .brand-copy strong,
        .sidebar-title,
        .page-title h2,
        .page-heading h1,
        .section-title h3,
        .card h3,
        .step-card h3,
        .modal-title,
        .login-card h1,
        .training-data-title,
        .rewrite-insight-section-head h4,
        .token-activity-head h4,
        .attachment-list-head,
        .model-config-header {
          font-weight: var(--font-title-weight) !important;
        }

        button,
        .button,
        .mini-button,
        .logout-button,
        .mobile-logout-button,
        .file-action,
        .token-range-tab,
        b,
        strong,
        .metric b,
        .qianchuan-metric-card b,
        .token-total-value,
        .ai-progress-title,
        .ai-progress-percent,
        .score-badge,
        .stat-value {
          font-weight: var(--font-strong-weight) !important;
        }

        /* Desktop fixed sidebar: align to viewport edge instead of floating as a card. */
        @media (min-width: 1121px) {
          .app {
            width: 100%;
            max-width: none;
            margin: 0;
            padding: var(--page-pad-y) var(--page-pad-x) 40px calc(var(--sidebar-width) + (var(--page-pad-x) * .8));
            grid-template-columns: minmax(0, 1fr);
            column-gap: 0;
          }

          .app.sidebar-collapsed {
            grid-template-columns: minmax(0, 1fr);
            padding-left: calc(76px + (var(--page-pad-x) * .8));
          }

          .sidebar,
          .sidebar.glass {
            position: fixed;
            inset: 0 auto 0 0;
            width: var(--sidebar-width);
            height: 100dvh;
            padding: 24px 18px 16px;
            border: 0;
            border-right: 0;
            border-radius: 0 !important;
            background: var(--nav-bg);
            box-shadow: none !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
          }

          .sidebar::before {
            display: none !important;
          }

          .sidebar::after {
            content: "";
            position: fixed;
            top: 0;
            bottom: 0;
            left: var(--sidebar-width);
            width: 14px;
            pointer-events: none;
            background: var(--nav-content-transition);
          }

          .main {
            grid-column: 1;
          }

          .brand {
            padding: 8px 0 18px;
          }

          .nav {
            gap: 4px;
          }

          .nav-button {
            min-height: 42px;
            border-radius: 10px;
            border-color: transparent;
            background: transparent;
            box-shadow: none !important;
          }

          .nav-button:hover:not(.active) {
            color: var(--text);
            background: rgba(60,60,67,.08);
            box-shadow: none !important;
          }

          .nav-button.active {
            color: var(--text);
            background: rgba(60,60,67,.10);
            border-color: transparent;
            box-shadow: none !important;
            transform: none;
          }

          .nav-button.active::before,
          .nav-button.active::after {
            display: none;
          }

          .side-card,
          .sidebar-token-card,
          .sidebar-session {
            background: rgba(255,255,255,.52);
            border-color: rgba(60,60,67,.10);
            box-shadow: none !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
          }

          .app.sidebar-collapsed .sidebar,
          .app.sidebar-collapsed .sidebar.glass {
            left: 0;
            top: 0;
            width: 76px;
            height: 100dvh;
            border-radius: 0 !important;
          }

          .app.sidebar-collapsed .sidebar::after {
            left: 76px;
          }

	          .app.sidebar-collapsed .nav-button.active {
	            box-shadow: none !important;
	          }
	        }

	        /* Global radius normalization for rectangular UI surfaces. */
	        :root {
	          --global-radius: 17px;
	          --global-layout-gap: 13.6px;
		          --global-card-padding: 20px;
		          --global-step-padding: 20.4px;
		          --global-result-padding: 18.4px;
		          --global-inner-padding: 16.3px;
	          --radius-card: var(--global-radius);
	          --radius-inner: var(--global-radius);
	          --radius-button: var(--global-radius);
	          --layout-gap: var(--global-layout-gap);
	          --sidebar-main-gap: calc(var(--global-layout-gap) * .8);
	          --card-padding: var(--global-card-padding);
	          --step-padding: var(--global-step-padding);
	          --result-padding: var(--global-result-padding);
	          --inner-card-padding: var(--global-inner-padding);
	          --ui-card-padding: var(--global-card-padding);
	          --ui-step-padding: var(--global-step-padding);
	          --ui-result-padding: var(--global-result-padding);
	          --ui-inner-padding: var(--global-inner-padding);
	          --ui-card-radius: var(--global-radius);
	          --ui-step-radius: var(--global-radius);
	          --ui-result-radius: var(--global-radius);
	          --ui-inner-radius: var(--global-radius);
	        }

	        @media (max-width: 1120px) {
	          :root {
		            --global-card-padding: 20px;
		            --global-step-padding: 18.4px;
		            --global-result-padding: 18.4px;
	          }
	        }

	        @media (max-width: 760px) {
	          :root {
	            --global-layout-gap: 13.6px;
			            --global-card-padding: 20px;
		            --global-step-padding: 16.3px;
		            --global-result-padding: 16.3px;
		            --global-inner-padding: 14.3px;
	          }
	        }

	        .main,
	        .workspace,
	        .history-layout,
	        .settings-grid,
	        .library-main-grid,
	        .create-agent-layout,
	        .comment-generator-layout,
	        .output-stack,
	        .flow,
	        .upload-list,
	        .favorite-list,
	        .product-doc-panel,
	        .learning-list-shell,
	        .learning-list,
	        .selected-doc-grid,
	        .product-doc-upload-row,
	        .product-doc-actions,
	        .metrics,
	        .grid-2,
	        .grid-3,
	        .form-grid,
	        .date-range-grid,
	        .history-record-grid,
	        .history-filter-grid,
	        .learning-filter-grid,
	        .settings-info-grid,
	        .product-insight-grid,
	        .structure-grid,
	        .learning-card-grid {
	          gap: var(--global-layout-gap) !important;
	        }

	        .card,
	        .topbar,
	        .modal-box {
	          padding: var(--global-card-padding) !important;
	        }

        .card.strong.create-flow-panel {
          padding: 20px !important;
        }

	        .step-card {
	          padding: var(--global-step-padding) !important;
	        }

	        .result-card,
	        .table-wrap,
	        .history-card,
	        .favorite-card,
	        .learning-card,
	        .recent-product-card {
	          padding: var(--global-result-padding) !important;
	        }

	        .inner-card,
	        .file-input,
	        .product-doc-panel,
	        .product-doc-upload-row,
	        .training-upload-card,
	        .rewrite-video-upload,
	        .comment-video-upload {
	          padding: var(--global-inner-padding) !important;
	        }

	        .section-title {
	          margin-bottom: 15.3px !important;
	        }

	        .create-flow-panel > .section-title.flow-title {
	          margin-bottom: 20.4px !important;
	        }

	        .step-result {
	          margin-top: 11.9px !important;
	          padding-top: 11.9px !important;
	        }

	        .glass,
	        .card,
	        .card.strong,
	        [class$="-card"],
	        [class*="-card "],
	        .topbar,
	        .side-card,
	        .result-card,
	        .history-card,
	        .favorite-card,
	        .learning-card,
	        .recent-product-card,
	        .ranking-card,
	        .product-insight-block,
	        .structure-panel,
	        .structure-item,
	        .learning-result-card,
	        .selected-doc-card,
	        .upload-file-card,
	        .selected-file-card,
	        .workbench-entry-card,
	        .home-ai-console,
	        .assistant-message,
	        .assistant-empty,
	        .split-note,
	        .compact-empty,
	        .empty,
	        .table-wrap,
	        .modal-box,
	        .file-input,
	        .product-doc-panel,
	        .product-doc-upload-row,
	        .training-upload-card,
	        .rewrite-video-upload,
	        .comment-video-upload,
	        .select-panel,
	        .date-picker-panel,
	        .model-service-card,
	        .runtime-status-card,
	        .history-filter-card,
	        .sidebar-token-card,
	        .sidebar-session {
	          border-radius: var(--global-radius) !important;
	        }

	        .button:not(.icon-only):not(.icon-action),
	        .mini-button:not(.icon-action),
	        .logout-button,
	        .mobile-logout-button,
	        .file-action,
	        .nav-button,
	        .mobile-more-item,
	        .token-range-tab,
	        .type-quick-filter,
	        .attachment-quick-filter,
	        .select-trigger,
	        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
	        select,
	        textarea {
	          border-radius: var(--global-radius) !important;
	        }

	        /* Unified card edge treatment: light blue hairline, clean white surface, soft colored shadow. */
	        :root {
	          --uniform-card-border: rgba(190, 222, 255, .76);
	          --uniform-card-border-soft: rgba(196, 229, 255, .62);
	          --uniform-card-bg:
	            linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(252,254,255,.72) 56%, rgba(245,251,255,.58) 100%),
	            rgba(255,255,255,.64);
	          --uniform-card-bg-strong:
	            linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(253,254,255,.78) 56%, rgba(242,250,255,.64) 100%),
	            rgba(255,255,255,.72);
	          --uniform-card-shadow:
	            0 10px 30px rgba(48,104,156,.08),
	            inset 0 1px 0 rgba(255,255,255,.92);
	          --uniform-card-shadow-strong:
	            0 12px 34px rgba(48,104,156,.10),
	            inset 0 1px 0 rgba(255,255,255,.94);
	        }

	        .glass,
	        .card,
	        .topbar,
	        .side-card,
	        .sidebar-token-card,
	        .sidebar-session,
	        .step-card,
	        .result-card,
	        .history-card,
	        .favorite-card,
	        .learning-card,
	        .recent-product-card,
	        .ranking-card,
	        .product-insight-block,
	        .structure-panel,
	        .structure-item,
	        .learning-result-card,
	        .selected-doc-card,
	        .upload-file-card,
	        .selected-file-card,
	        .workbench-entry-card,
	        .assistant-message,
	        .assistant-empty,
	        .split-note,
	        .compact-empty,
	        .empty,
	        .table-wrap,
	        .modal-box,
	        .file-input,
	        .product-doc-panel,
	        .product-doc-upload-row,
	        .training-upload-card,
	        .rewrite-video-upload,
	        .comment-video-upload,
	        .select-panel,
	        .date-picker-panel,
	        .model-service-card,
	        .runtime-status-card,
	        .history-filter-card,
	        .attachment-manager-card,
	        .attachment-list-card,
	        .settings-info-card,
	        [class$="-card"],
	        [class*="-card "] {
	          border: 1px solid var(--uniform-card-border-soft) !important;
	          background: var(--uniform-card-bg) !important;
	          box-shadow: var(--uniform-card-shadow) !important;
	          backdrop-filter: var(--frost-blur);
	          -webkit-backdrop-filter: var(--frost-blur);
	        }

	        .card.strong,
	        .card.strong.create-flow-panel,
	        .topbar,
	        .modal-box,
	        .table-wrap,
	        .file-input,
	        .upload-file-card,
	        .selected-file-card,
	        .selected-doc-card {
	          border-color: var(--uniform-card-border) !important;
	          background: var(--uniform-card-bg-strong) !important;
	          box-shadow: var(--uniform-card-shadow-strong) !important;
	        }

	        .metrics .metric.glass {
	          border-color: rgba(var(--metric-rgb, 8,119,255), .30) !important;
	          background:
	            linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.94) 34%, rgba(255,255,255,.82) 48%, rgba(var(--metric-rgb, 8,119,255), .055) 64%, rgba(var(--metric-rgb, 8,119,255), .12) 82%, rgba(var(--metric-rgb-2, 0,122,255), .14) 100%),
	            radial-gradient(ellipse at 16% 18%, rgba(255,255,255,.94), rgba(255,255,255,0) 40%),
	            radial-gradient(ellipse at 88% 32%, rgba(var(--metric-rgb, 8,119,255), .22), rgba(var(--metric-rgb, 8,119,255), 0) 48%),
	            rgba(255,255,255,.50) !important;
	          box-shadow: none !important;
	        }

	        .metrics .metric.glass::before {
	          background:
	            linear-gradient(115deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.28) 34%, rgba(255,255,255,0) 56%),
	            radial-gradient(circle at 84% 82%, rgba(var(--metric-rgb, 8,119,255), .14), rgba(var(--metric-rgb, 8,119,255), 0) 44%) !important;
	          opacity: .82 !important;
	        }

			        .step-card {
			          border-color: rgba(var(--step-rgb, 190,222,255), .30) !important;
			        }

			        /* Keep dropdown selected options visually aligned with the sidebar selected state. */
			        :root {
			          --nav-selected-bg: rgba(60,60,67,.10);
			          --nav-selected-bg-hover: rgba(60,60,67,.12);
			        }

			        .nav-button.active {
			          color: var(--text) !important;
			          background: var(--nav-selected-bg) !important;
			          border-color: transparent !important;
			          box-shadow: none !important;
			        }

			        .select-option.active,
			        .select-option[aria-selected="true"] {
			          color: var(--text) !important;
			          background: var(--nav-selected-bg) !important;
			          box-shadow: none !important;
			        }

			        .select-option.active:hover,
			        .select-option[aria-selected="true"]:hover {
			          color: var(--text) !important;
			          background: var(--nav-selected-bg-hover) !important;
			          box-shadow: none !important;
			        }

			        .rewrite-export-actions,
			        .comment-export-actions,
			        .comment-flow-panel .comment-export-actions {
			          grid-template-columns: minmax(112px, .82fr) minmax(154px, 1.08fr) minmax(162px, 1.12fr) !important;
			          align-items: stretch !important;
			          gap: 12px !important;
			          max-width: 500px !important;
			        }

			        .rewrite-export-actions .button,
			        .comment-export-actions .button,
			        .comment-flow-panel .comment-export-actions .button {
			          width: 100% !important;
			          min-width: 0 !important;
			          min-height: 46px !important;
			          padding-inline: 16px !important;
			          white-space: nowrap !important;
			          border-color: rgba(31, 41, 55, .08) !important;
			          background: rgba(255, 255, 255, .76) !important;
			          box-shadow: none !important;
			        }

			        .rewrite-export-actions .button:first-child,
			        .comment-export-actions .button:first-child,
			        .comment-flow-panel .comment-export-actions .button:first-child {
			          grid-column: auto !important;
			        }

			        .export-share-button {
			          color: var(--accent) !important;
			          border-color: rgba(0, 122, 255, .30) !important;
			          background: rgba(242, 248, 255, .88) !important;
			        }

			        .rewrite-export-actions .export-share-button,
			        .comment-export-actions .export-share-button,
			        .comment-flow-panel .comment-export-actions .export-share-button {
			          color: var(--accent) !important;
			          border-color: rgba(0, 122, 255, .34) !important;
			          background:
			            linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,247,255,.86)),
			            rgba(0,122,255,.08) !important;
			        }

			        .rewrite-export-toolbar .export-option-grid {
			          gap: 10px !important;
			        }

			        .rewrite-export-toolbar .export-option-pill {
			          flex: 0 0 auto !important;
			          min-width: 116px !important;
			          max-width: none !important;
			          justify-content: flex-start !important;
			          gap: 8px !important;
			          min-height: 44px !important;
			          padding: 0 10px !important;
			          border-color: rgba(0, 122, 255, .18) !important;
			          background: rgba(255, 255, 255, .72) !important;
			          box-shadow: none !important;
			          transition: border-color .16s ease, background .16s ease, color .16s ease;
			        }

			        .rewrite-export-toolbar .export-option-pill input[type="checkbox"] {
			          flex: 0 0 20px !important;
			          width: 20px !important;
			          height: 20px !important;
			          min-height: 20px !important;
			          border-width: 1.5px !important;
			          border-color: rgba(0, 122, 255, .40) !important;
			          border-radius: 6px !important;
			          background: rgba(255, 255, 255, .95) !important;
			          box-shadow: none !important;
			        }

			        .rewrite-export-toolbar .export-option-pill input[type="checkbox"]::after {
			          width: 5px !important;
			          height: 9px !important;
			          border-right-width: 2px !important;
			          border-bottom-width: 2px !important;
			        }

			        .rewrite-export-toolbar .export-option-pill input[type="checkbox"]:checked {
			          border-color: var(--accent) !important;
			          background: var(--accent) !important;
			          box-shadow: none !important;
			        }

			        .rewrite-export-toolbar .export-option-pill:has(input:checked) {
			          color: #075ec9 !important;
			          border-color: rgba(0, 122, 255, .46) !important;
			          background:
			            linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,249,255,.80)),
			            rgba(0,122,255,.08) !important;
			        }

			        .rewrite-export-toolbar .export-option-pill span {
			          line-height: 1.1 !important;
			          font-weight: 700 !important;
			        }

			        .home-ai-console.is-chat-mode .assistant-message:not(.user) {
			          justify-self: start !important;
			          width: min(760px, 100%) !important;
			          max-width: min(760px, 100%) !important;
			          padding: 0 !important;
			          border: 0 !important;
			          border-radius: 0 !important;
			          background: transparent !important;
			          box-shadow: none !important;
			          color: var(--text) !important;
			          font-size: 16px !important;
			          line-height: 1.8 !important;
			          font-weight: 500 !important;
			        }

			        .home-ai-console.is-chat-mode .assistant-message.user {
			          justify-self: end !important;
			          width: fit-content !important;
			          max-width: min(360px, 72%) !important;
			          padding: 10px 15px !important;
			          border: 0 !important;
			          border-radius: 18px !important;
			          background: rgba(118, 118, 128, .12) !important;
			          box-shadow: none !important;
			          color: var(--text) !important;
			          font-size: 16px !important;
			          line-height: 1.55 !important;
			          font-weight: 500 !important;
			        }

			        .home-ai-console.is-chat-mode .assistant-message:not(.user) > div {
			          max-width: 100%;
			          overflow-wrap: anywhere;
			        }

			        .modal.share-preview-modal .modal-box {
			          width: min(760px, calc(100vw - 44px));
			          max-height: min(82vh, 760px);
			        }

			        .share-preview-panel {
			          display: grid;
			          gap: 14px;
			        }

			        .share-preview-note {
			          margin: 0;
			          color: var(--muted);
			          font-size: var(--ui-body-size);
			          line-height: 1.65;
			        }

			        .share-preview-link-card {
			          display: grid;
			          gap: 8px;
			          padding: 14px 16px;
			          border: 1px solid rgba(8, 119, 255, .22);
			          border-radius: 16px;
			          background: rgba(8, 119, 255, .06);
			        }

			        .share-preview-link-card b {
			          color: var(--text);
			          font-size: var(--ui-body-size);
			        }

			        .share-preview-link-card a {
			          color: var(--blue);
			          font-weight: 700;
			          line-height: 1.55;
			          word-break: break-all;
			          text-decoration: none;
			        }

			        .share-preview-content {
			          max-height: min(48vh, 420px);
			          overflow: auto;
			          margin: 0;
			          padding: 16px;
			          border: 1px solid var(--separator-soft);
			          border-radius: 16px;
			          background: rgba(255, 255, 255, .72);
			          color: var(--text);
			          font: 500 14px/1.8 var(--font-system);
			          white-space: pre-wrap;
			          word-break: break-word;
			        }

			        select option:checked {
			          color: var(--text);
			          background: var(--nav-selected-bg);
			        }

			        .create-learning-step .learning-filter-grid {
			          margin-bottom: 0 !important;
			        }

        .create-learning-step .learning-actions {
          align-items: center;
          gap: 10px !important;
          margin: 18px 0 16px !important;
        }

		        .create-learning-step .learning-actions .button,
		        .create-learning-step .learning-actions .mini-button {
		          min-height: 40px;
		        }

			        .create-product-step .product-doc-panel {
			          gap: 8px !important;
			          margin: 12.6px 0 !important;
		          padding: 0 !important;
		          border: 0 !important;
		          background: transparent !important;
		          box-shadow: none !important;
		          backdrop-filter: none !important;
		          -webkit-backdrop-filter: none !important;
		        }

		        .create-product-step .product-doc-upload-row {
		          gap: 0 !important;
		          padding: 0 !important;
		          border: 0 !important;
		          background: transparent !important;
		          box-shadow: none !important;
		          backdrop-filter: none !important;
		          -webkit-backdrop-filter: none !important;
		        }

		        .create-product-step .product-doc-file-input {
		          display: grid;
		          grid-template-columns: minmax(0, 1fr) auto;
		          align-items: center;
		          width: 100%;
		          min-height: 76px;
		          margin: 0 !important;
		          padding: 16px 24px !important;
		        }

		        .create-product-step .product-doc-actions {
		          justify-content: flex-end;
		          flex-wrap: nowrap;
		          gap: 12px !important;
		        }

		        .create-product-step .product-doc-actions .file-action {
		          min-width: 112px;
		          min-height: 36px;
		        }

		        .create-product-step #analyzeCreateProduct {
		          margin-top: 0 !important;
		        }

		        @media (max-width: 760px) {
		          .rewrite-export-actions,
		          .comment-export-actions,
		          .comment-flow-panel .comment-export-actions {
		            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		            width: 100% !important;
		            margin-left: 0 !important;
		            max-width: none !important;
		            gap: 8px !important;
		          }

		          .rewrite-export-actions .button:first-child,
		          .comment-export-actions .button:first-child,
		          .comment-flow-panel .comment-export-actions .button:first-child {
		            grid-column: auto !important;
		          }

		          .rewrite-export-actions .button,
		          .comment-export-actions .button,
		          .comment-flow-panel .comment-export-actions .button {
		            gap: 5px !important;
		            padding-inline: 5px !important;
		            min-height: 42px !important;
		            font-size: 12.8px !important;
		          }

		          .rewrite-export-actions .button .icon,
		          .comment-export-actions .button .icon,
		          .comment-flow-panel .comment-export-actions .button .icon {
		            width: 15px !important;
		            height: 15px !important;
		          }

		          .rewrite-export-toolbar .export-option-grid {
		            display: grid !important;
		            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		            width: 100% !important;
		          }

		          .rewrite-export-toolbar .export-option-pill {
		            min-width: 0 !important;
		            width: 100% !important;
		            padding-inline: 11px !important;
		          }

		          .modal.share-preview-modal .modal-box {
		            width: calc(100vw - 24px);
		            max-height: calc(100vh - 32px);
		          }

		          .home-ai-console.is-chat-mode .assistant-message:not(.user) {
		            width: 100% !important;
		            max-width: 100% !important;
		            font-size: 14.5px !important;
		            line-height: 1.78 !important;
		          }

		          .home-ai-console.is-chat-mode .assistant-message.user {
		            max-width: 78% !important;
		            padding: 9px 12px !important;
		            font-size: 14.5px !important;
		            line-height: 1.55 !important;
		          }

		          .share-preview-content {
		            max-height: 52vh;
		            padding: 14px;
		            font-size: 13.5px;
		            line-height: 1.75;
		          }

          .create-learning-step .learning-actions {
            margin: 16px 0 14px !important;
          }

			          .create-product-step .product-doc-panel {
			            margin: 11.2px 0 !important;
		          }

		          .create-product-step .product-doc-file-input {
		            grid-template-columns: minmax(0, 1fr);
		            align-items: stretch;
		            padding: 15px 16px !important;
		          }

		          .create-product-step .product-doc-actions {
		            justify-content: flex-start;
		            flex-wrap: wrap;
		          }
		        }

		        @media (min-width: 1121px) {
		          .sidebar,
	          .sidebar.glass,
	          .app.sidebar-collapsed .sidebar,
	          .app.sidebar-collapsed .sidebar.glass {
	            border-radius: 0 !important;
	          }
	        }

	        /* Final chat typography and motion pass. */
	        :root {
	          --ui-title-size: 18px;
	          --ui-subtitle-size: 12px;
	          --ui-label-size: 12.5px;
	          --ui-control-size: 12.5px;
	          --ui-caption-size: 11px;
	          --ui-button-font-size: 12.5px;
	          --ui-upload-action-size: 11.5px;
	        }

	        html,
	        body,
	        button,
	        input,
	        select,
	        textarea,
	        .home-ai-message-content,
	        .assistant-message {
	          font-family: var(--font-system) !important;
	        }

	        body {
	          font-size: 13px !important;
	        }

	        .home-ai-console {
	          font-family: var(--font-system) !important;
	        }

	        .home-ai-title h3 {
	          font-size: clamp(26px, 2.9vw, 40px) !important;
	        }

	        .home-ai-title p {
	          font-size: clamp(17px, 1.45vw, 22px) !important;
	        }

		        .home-ai-composer textarea,
		        .home-ai-console.is-chat-mode .home-ai-composer textarea {
		          font-size: 14px !important;
		          padding-left: 14px !important;
		          padding-right: 8px !important;
		          text-indent: 0 !important;
		        }

		        @media (min-width: 1121px) {
		          .home-chat-shell {
		            grid-template-columns: minmax(196px, 230px) minmax(0, var(--home-chat-width)) !important;
		            justify-content: start !important;
		          }

		          .home-chat-shell .home-ai-console.is-chat-mode {
		            width: min(var(--home-chat-width), 100%) !important;
		            justify-self: start !important;
		            margin: 0 !important;
		          }
		        }

			        .home-ai-console.is-chat-mode .home-ai-thread,
			        .home-ai-console.is-chat-mode .home-ai-composer {
			          width: min(var(--home-chat-width), 100%) !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-composer {
			          align-self: end !important;
			          height: auto !important;
			          position: relative !important;
			          bottom: auto !important;
			          z-index: 2 !important;
			          border-radius: 17px !important;
			          background-clip: padding-box;
			          overflow: hidden !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-composer::before {
			          content: none !important;
			          display: none !important;
			          -webkit-backdrop-filter: none !important;
			          backdrop-filter: none !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-thread {
			          padding-bottom: 0 !important;
			          scrollbar-gutter: stable;
			        }

		        @media (max-width: 760px) {
		          .home-ai-console.is-chat-mode .home-ai-thread,
		          .home-ai-console.is-chat-mode .home-ai-composer {
		            width: 100% !important;
		          }
		        }

		        .home-ai-suggestion,
		        .workbench-entry-card .button,
		        .workbench-entry-card .chip {
	          font-size: 11.5px !important;
	        }

	        .workbench-entry-card h3 {
	          font-size: 16px !important;
	        }

	        .workbench-entry-card p {
	          font-size: 11px !important;
	        }

		        .home-ai-console.is-chat-mode .assistant-message:not(.user) {
		          font-size: 14px !important;
		          line-height: 1.68 !important;
		          font-weight: 500 !important;
		        }

		        .home-ai-console.is-chat-mode .assistant-message:not(.user) .home-ai-message-content {
		          display: grid;
		          gap: 10px;
		          max-width: 100%;
		        }

		        .home-ai-console.is-chat-mode .home-ai-followup {
		          display: flex;
		          align-items: center;
		          justify-content: space-between;
		          gap: 12px;
		          width: fit-content;
		          max-width: 100%;
		          margin-top: 8px;
		          padding: 10px 12px;
		          border: 1px solid rgba(8, 119, 255, .16);
		          border-radius: 16px;
		          background: rgba(247, 250, 255, .86);
		          box-shadow: 0 8px 28px rgba(48, 104, 156, .10);
		        }

		        .home-ai-console.is-chat-mode .home-ai-followup-title {
		          color: rgba(29, 29, 31, .78);
		          font-size: 13px;
		          line-height: 1.35;
		          font-weight: 650;
		        }

		        .home-ai-console.is-chat-mode .home-ai-followup-actions {
		          display: inline-flex;
		          align-items: center;
		          gap: 8px;
		          flex-shrink: 0;
		        }

		        .home-ai-console.is-chat-mode .home-ai-followup-action {
		          min-width: 52px;
		          height: 32px;
		          padding: 0 13px;
		          border: 1px solid rgba(8, 119, 255, .22);
		          border-radius: 999px;
		          color: #0877ff;
		          background: rgba(255, 255, 255, .88);
		          font: inherit;
		          font-size: 12.5px;
		          font-weight: 750;
		          cursor: pointer;
		          transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
		        }

		        .home-ai-console.is-chat-mode .home-ai-followup-action:hover {
		          color: #fff;
		          border-color: #0877ff;
		          background: #0877ff;
		          transform: translateY(-1px);
		        }

		        .home-ai-console.is-chat-mode .home-ai-message-content p {
		          margin: 0;
		        }

		        .home-ai-console.is-chat-mode .home-ai-message-content strong {
		          font-weight: 750;
		        }

		        .home-ai-console.is-chat-mode .home-ai-message-content code {
		          padding: 1px 5px;
		          border-radius: 6px;
		          background: rgba(118, 118, 128, .10);
		          font-size: .92em;
		        }

		        .home-ai-console.is-chat-mode .home-ai-heading {
		          margin: 4px 0 0;
		          color: var(--text);
		          font-size: 14.5px;
		          line-height: 1.45;
		          font-weight: 800;
		        }

		        .home-ai-console.is-chat-mode .home-ai-divider {
		          width: 100%;
		          height: 1px;
		          margin: 4px 0;
		          border: 0;
		          background: rgba(60, 60, 67, .12);
		        }

		        .home-ai-console.is-chat-mode .home-ai-list {
		          margin: 0;
		          padding-left: 19px;
		          display: grid;
		          gap: 6px;
		        }

		        .home-ai-console.is-chat-mode .home-ai-table-wrap {
		          max-width: 100%;
		          overflow-x: scroll;
		          overflow-y: hidden;
		          padding-bottom: 8px;
		          border: 1px solid rgba(60, 60, 67, .12);
		          border-radius: 12px;
		          background: rgba(255, 255, 255, .72);
		          scrollbar-gutter: stable;
		          scrollbar-width: thin;
		          scrollbar-color: rgba(8, 119, 255, .42) rgba(60, 60, 67, .08);
		        }

		        .home-ai-console.is-chat-mode .home-ai-table {
		          width: max-content;
		          min-width: 100%;
		          border-collapse: collapse;
		          font-size: 13px;
		          line-height: 1.55;
		        }

		        .home-ai-console.is-chat-mode .home-ai-table-wrap::-webkit-scrollbar {
		          height: 10px;
		        }

		        .home-ai-console.is-chat-mode .home-ai-table-wrap::-webkit-scrollbar-track {
		          margin: 0 12px;
		          border-radius: 999px;
		          background: rgba(60, 60, 67, .08);
		        }

		        .home-ai-console.is-chat-mode .home-ai-table-wrap::-webkit-scrollbar-thumb {
		          min-width: 44px;
		          border: 2px solid rgba(255, 255, 255, .72);
		          border-radius: 999px;
		          background: rgba(8, 119, 255, .42);
		        }

		        .home-ai-console.is-chat-mode .home-ai-table-wrap::-webkit-scrollbar-thumb:hover {
		          background: rgba(8, 119, 255, .58);
		        }

		        .home-ai-console.is-chat-mode .home-ai-table th,
		        .home-ai-console.is-chat-mode .home-ai-table td {
		          padding: 8px 10px;
		          border-bottom: 1px solid rgba(60, 60, 67, .10);
		          border-right: 1px solid rgba(60, 60, 67, .08);
		          text-align: left;
		          vertical-align: top;
		        }

		        .home-ai-console.is-chat-mode .home-ai-table th {
		          color: rgba(29, 29, 31, .86);
		          background: rgba(245, 247, 250, .92);
		          font-weight: 800;
		          white-space: nowrap;
		        }

		        .home-ai-console.is-chat-mode .home-ai-table td {
		          color: rgba(29, 29, 31, .82);
		          font-weight: 500;
		        }

		        .home-ai-console.is-chat-mode .home-ai-table tr:last-child td {
		          border-bottom: 0;
		        }

		        .home-ai-console.is-chat-mode .home-ai-table th:last-child,
		        .home-ai-console.is-chat-mode .home-ai-table td:last-child {
		          border-right: 0;
		        }

		        .home-ai-console.is-chat-mode .assistant-message.user {
		          font-size: 15px !important;
		          line-height: 1.52 !important;
	        }

	        .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user),
	        .home-ai-console.is-chat-mode .assistant-message.is-fresh.user {
	          animation: homeAiReplyIn .32s cubic-bezier(.2, .84, .28, 1) both;
	        }

	        .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user) {
	          animation: homeAiAnswerShellIn .36s cubic-bezier(.2, .84, .28, 1) both;
	          transform-origin: left top;
	          will-change: opacity, transform, filter;
	        }

	        .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user) .home-ai-message-content > * {
	          opacity: 0;
	          transform: translateY(7px);
	          animation: homeAiAnswerBlockIn .34s cubic-bezier(.2, .84, .28, 1) both;
	          animation-delay: calc(var(--home-ai-block-index, 0) * 58ms + 90ms);
	        }

	        .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user) .home-ai-message-content > :nth-child(1) { --home-ai-block-index: 0; }
	        .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user) .home-ai-message-content > :nth-child(2) { --home-ai-block-index: 1; }
	        .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user) .home-ai-message-content > :nth-child(3) { --home-ai-block-index: 2; }
	        .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user) .home-ai-message-content > :nth-child(4) { --home-ai-block-index: 3; }
	        .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user) .home-ai-message-content > :nth-child(5) { --home-ai-block-index: 4; }
	        .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user) .home-ai-message-content > :nth-child(6) { --home-ai-block-index: 5; }
	        .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user) .home-ai-message-content > :nth-child(n+7) { --home-ai-block-index: 6; }

	        .home-ai-console.is-chat-mode .assistant-message.is-fresh.user {
	          animation-duration: .22s;
	        }

	        .home-ai-console.is-chat-mode .home-ai-thinking {
	          display: inline-flex;
	          flex-direction: column;
	          align-items: flex-start;
	          gap: 8px;
	          width: fit-content !important;
	          max-width: min(520px, 82%) !important;
	          min-height: 38px;
	          padding: 10px 12px 11px !important;
	          border-radius: 16px !important;
	          color: rgba(60, 60, 67, .72) !important;
	          background: rgba(118, 118, 128, .09) !important;
	          animation: homeAiWaitingIn .18s ease-out both, homeAiThinkingSoft 1.4s ease-in-out infinite;
	        }

	        .home-ai-thinking-head {
	          display: inline-flex;
	          align-items: center;
	          gap: 9px;
	        }

	        .home-ai-thinking-label {
	          font-size: 12.5px;
	          font-weight: 600;
	          white-space: nowrap;
	        }

	        .home-ai-thinking-dots {
	          display: inline-flex;
	          align-items: center;
	          gap: 4px;
	        }

	        .home-ai-thinking-dots span {
	          width: 5px;
	          height: 5px;
	          border-radius: 50%;
	          background: currentColor;
	          opacity: .32;
	          transform: translateY(0);
	          animation: homeAiThinkingDot .9s ease-in-out infinite;
	        }

	        .home-ai-thinking-dots span:nth-child(2) {
	          animation-delay: .14s;
	        }

	        .home-ai-thinking-dots span:nth-child(3) {
	          animation-delay: .28s;
	        }

	        .home-ai-thinking-meta {
	          display: grid;
	          gap: 5px;
	          min-width: min(360px, 100%);
	          color: rgba(60, 60, 67, .62);
	          font-size: 12px;
	          line-height: 1.45;
	        }

	        .home-ai-thinking-row {
	          display: flex;
	          align-items: flex-start;
	          gap: 7px;
	          white-space: normal;
	          word-break: break-word;
	        }

	        .home-ai-thinking-row::before {
	          content: "";
	          flex: 0 0 auto;
	          width: 6px;
	          height: 6px;
	          margin-top: .55em;
	          border-radius: 50%;
	          background: rgba(10, 132, 255, .66);
	          box-shadow: 0 0 0 4px rgba(10, 132, 255, .08);
	        }

	        .home-ai-thinking-eta {
	          font-weight: 600;
	          color: rgba(10, 132, 255, .82);
	        }

	        @keyframes homeAiWaitingIn {
	          from {
	            opacity: 0;
	            transform: translateY(4px);
	          }
	          to {
	            opacity: 1;
	            transform: translateY(0);
	          }
	        }

	        @keyframes homeAiReplyIn {
	          from {
	            opacity: 0;
	            transform: translateY(8px);
	            filter: blur(2px);
	          }
	          70% {
	            opacity: 1;
	            filter: blur(.4px);
	          }
	          to {
	            opacity: 1;
	            transform: translateY(0);
	            filter: blur(0);
	          }
	        }

	        @keyframes homeAiAnswerShellIn {
	          from {
	            opacity: 0;
	            transform: translate3d(0, 10px, 0);
	            filter: blur(3px);
	          }
	          70% {
	            opacity: 1;
	            filter: blur(.6px);
	          }
	          to {
	            opacity: 1;
	            transform: translate3d(0, 0, 0);
	            filter: blur(0);
	          }
	        }

	        @keyframes homeAiAnswerBlockIn {
	          from {
	            opacity: 0;
	            transform: translate3d(0, 7px, 0);
	          }
	          to {
	            opacity: 1;
	            transform: translate3d(0, 0, 0);
	          }
	        }

	        @keyframes homeAiThinkingSoft {
	          0%, 100% {
	            background: rgba(118, 118, 128, .08);
	          }
	          50% {
	            background: rgba(118, 118, 128, .13);
	          }
	        }

	        @keyframes homeAiThinkingDot {
	          0%, 80%, 100% {
	            opacity: .28;
	            transform: translateY(0);
	          }
	          40% {
	            opacity: .92;
	            transform: translateY(-3px);
	          }
	        }

	        @media (prefers-reduced-motion: reduce) {
	          .home-ai-composer::after,
	          .home-ai-console.is-chat-mode .assistant-message.is-fresh,
	          .home-ai-console.is-chat-mode .assistant-message.is-fresh:not(.user) .home-ai-message-content > *,
	          .home-ai-console.is-chat-mode .home-ai-thinking,
	          .home-ai-thinking-dots span {
	            animation: none !important;
	            opacity: 1 !important;
	            transform: none !important;
	            filter: none !important;
	          }

	          .home-ai-composer::after {
	            opacity: .34;
	          }
	        }

	        /* Final export/share alignment guard. */
	        .create-export-toolbar,
	        .rewrite-export-toolbar,
	        .comment-export-toolbar {
	          display: grid !important;
	          grid-template-columns: minmax(0, 1fr) auto !important;
	          justify-items: stretch !important;
	          align-items: start !important;
	          width: 100% !important;
	          max-width: 100% !important;
	          min-width: 0 !important;
	          margin: 0 !important;
	          gap: 16px 24px !important;
	          overflow: visible !important;
	        }

	        .create-export-toolbar .export-option-panel,
	        .rewrite-export-toolbar .export-option-panel,
	        .comment-export-toolbar .export-option-panel {
	          display: grid !important;
	          justify-items: start !important;
	          width: 100% !important;
	          max-width: 100% !important;
	          min-width: 0 !important;
	          margin: 0 !important;
	        }

	        .create-export-toolbar .export-option-grid,
	        .rewrite-export-toolbar .export-option-grid,
	        .comment-export-toolbar .export-option-grid {
	          display: flex !important;
	          flex-wrap: wrap !important;
	          justify-content: flex-start !important;
	          align-items: center !important;
	          width: 100% !important;
	          max-width: 100% !important;
	          gap: 10px !important;
	        }

	        .create-export-toolbar .export-option-pill,
	        .rewrite-export-toolbar .export-option-pill,
	        .comment-export-toolbar .export-option-pill {
	          flex: 0 0 auto !important;
	          width: auto !important;
	          min-width: 116px !important;
	          max-width: 100% !important;
	          justify-content: flex-start !important;
	          gap: 8px !important;
	          padding-inline: 10px !important;
	          overflow: hidden !important;
	        }

	        .create-export-toolbar .export-option-pill span,
	        .rewrite-export-toolbar .export-option-pill span,
	        .comment-export-toolbar .export-option-pill span {
	          flex: 0 1 auto !important;
	          min-width: 0 !important;
	          max-width: 100% !important;
	          overflow: hidden !important;
	          text-overflow: ellipsis !important;
	          white-space: nowrap !important;
	        }

	        .create-export-actions,
	        .rewrite-export-actions,
	        .comment-export-actions,
	        .comment-flow-panel .comment-export-actions {
	          display: grid !important;
	          grid-template-columns: 101px 130px 138px !important;
	          justify-content: end !important;
	          align-items: stretch !important;
	          width: auto !important;
	          max-width: 100% !important;
	          min-width: 0 !important;
	          margin: 0 0 0 auto !important;
	          gap: 12px !important;
	        }

	        .create-export-actions .button,
	        .rewrite-export-actions .button,
	        .comment-export-actions .button,
	        .comment-flow-panel .comment-export-actions .button {
	          width: 100% !important;
	          min-width: 0 !important;
	          max-width: none !important;
	          min-height: 44px !important;
	          justify-content: center !important;
	          padding-inline: 14px !important;
	          white-space: nowrap !important;
	        }

	        .create-export-actions .export-share-button,
	        .rewrite-export-actions .export-share-button,
	        .comment-export-actions .export-share-button,
	        .comment-flow-panel .comment-export-actions .export-share-button {
	          padding-inline: 12px !important;
	        }

	        .create-export-actions .button:first-child,
	        .rewrite-export-actions .button:first-child,
	        .comment-export-actions .button:first-child,
	        .comment-flow-panel .comment-export-actions .button:first-child {
	          grid-column: auto !important;
	        }

	        @container (max-width: 360px) {
	          .create-export-actions,
	          .rewrite-export-actions,
	          .comment-export-actions,
	          .comment-flow-panel .comment-export-actions {
	            grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)) !important;
	          }
	        }

	        @media (max-width: 760px) {
	          .create-export-toolbar,
	          .rewrite-export-toolbar,
	          .comment-export-toolbar {
	            grid-template-columns: minmax(0, 1fr) !important;
	            gap: 14px !important;
	          }

	          .create-export-toolbar .export-option-grid,
	          .rewrite-export-toolbar .export-option-grid,
	          .comment-export-toolbar .export-option-grid {
	            display: grid !important;
	            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	            width: 100% !important;
	          }

	          .create-export-toolbar .export-option-pill,
	          .rewrite-export-toolbar .export-option-pill,
	          .comment-export-toolbar .export-option-pill {
	            width: 100% !important;
	            min-width: 0 !important;
	            max-width: none !important;
	            padding-inline: 10px !important;
	          }

	          .create-export-actions,
	          .rewrite-export-actions,
	          .comment-export-actions,
	          .comment-flow-panel .comment-export-actions {
	            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	            width: 100% !important;
	            margin: 0 !important;
	            gap: 8px !important;
	          }

		          .create-export-actions .button,
		          .rewrite-export-actions .button,
		          .comment-export-actions .button,
		          .comment-flow-panel .comment-export-actions .button {
		            min-height: 42px !important;
		            padding-inline: 6px !important;
		            font-size: 12.5px !important;
		          }
		        }

		        .comment-flow-panel .comment-export-toolbar {
		          grid-template-columns: minmax(0, 1fr) auto !important;
		          align-items: center !important;
		          justify-content: stretch !important;
		          gap: 16px 24px !important;
		        }

		        .comment-flow-panel .comment-export-toolbar .export-option-panel {
		          width: 100% !important;
		          justify-items: start !important;
		        }

		        .comment-flow-panel .comment-export-toolbar .export-option-grid {
		          display: grid !important;
		          grid-template-columns: repeat(2, minmax(0, 228px)) !important;
		          justify-content: start !important;
		          width: min(100%, 468px) !important;
		          gap: 12px !important;
		        }

		        .comment-flow-panel .comment-export-toolbar .export-option-pill {
		          width: 100% !important;
		          max-width: none !important;
		          min-width: 0 !important;
		          justify-content: flex-start !important;
		          padding-inline: 16px !important;
		        }

		        .comment-flow-panel .comment-export-toolbar .comment-export-actions {
		          grid-template-columns: 101px 130px 138px !important;
		          justify-content: end !important;
		          width: auto !important;
		          max-width: 100% !important;
		          margin: 0 0 0 auto !important;
		          gap: 12px !important;
		        }

		        .comment-flow-panel .comment-export-toolbar .comment-export-actions .button {
		          min-width: 0 !important;
		          width: 100% !important;
		        }

		        @container (max-width: 560px) {
		          .comment-flow-panel .comment-export-toolbar {
		            grid-template-columns: minmax(0, 1fr) !important;
		            align-items: start !important;
		            gap: 14px !important;
		          }

		          .comment-flow-panel .comment-export-toolbar .export-option-panel {
		            width: 100% !important;
		          }

		          .comment-flow-panel .comment-export-toolbar .export-option-grid {
		            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		            width: 100% !important;
		          }

		          .comment-flow-panel .comment-export-toolbar .comment-export-actions {
		            grid-template-columns: minmax(70px, .8fr) minmax(0, 1fr) minmax(0, 1fr) !important;
		            width: 100% !important;
		            margin: 0 !important;
		            gap: 8px !important;
		          }

		          .comment-flow-panel .comment-export-toolbar .comment-export-actions .button {
		            gap: 4px !important;
		            padding-inline: 5px !important;
		            font-size: 12px !important;
		          }

		          .comment-flow-panel .comment-export-toolbar .comment-export-actions .button .icon {
		            width: 14px !important;
		            height: 14px !important;
		          }
		        }

		        @media (max-width: 760px) {
		          .comment-flow-panel .comment-export-toolbar .export-option-grid {
		            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		          }

		          .comment-flow-panel .comment-export-toolbar .comment-export-actions {
		            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		            gap: 8px !important;
		          }
		        }

	        /* Hero-to-workspace rhythm: keep the top hero card separated from the first content card. */
	        body:not(.home-screen):not(.login-active) .topbar.has-hero ~ .workspace {
	          margin-top: 32px !important;
	        }

	        .comment-flow-panel .comment-export-toolbar .export-option-grid {
	          grid-template-columns: repeat(2, minmax(0, 116px)) !important;
	          width: min(100%, 244px) !important;
	          gap: 12px !important;
	        }

	        .comment-flow-panel .comment-export-toolbar .export-option-pill {
	          min-width: 0 !important;
	          width: 116px !important;
	          max-width: 116px !important;
	          justify-content: flex-start !important;
	          padding-inline: 10px !important;
	        }

	        @media (max-width: 760px) {
	          body:not(.home-screen):not(.login-active) .topbar.has-hero ~ .workspace {
	            margin-top: 16px !important;
	          }

	          .comment-flow-panel .comment-export-toolbar .export-option-grid {
	            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	            width: 100% !important;
	          }

	          .comment-flow-panel .comment-export-toolbar .export-option-pill {
	            width: 100% !important;
	            max-width: none !important;
	          }
	        }

		        /* Final AI progress integration guard. Keep progress bars embedded in the parent card. */
		        .top-progress-slot,
	        .result-progress-slot,
	        .step-progress-slot,
	        .ai-progress-slot,
	        .ai-progress-slot:not(:empty) {
	          border: 0 !important;
	          outline: 0 !important;
	          background: transparent !important;
	          box-shadow: none !important;
	        }

	        .top-progress-slot .ai-progress-card,
	        .result-progress-slot .ai-progress-card,
	        .step-progress-slot .ai-progress-card,
	        .ai-progress-card {
	          width: 100% !important;
	          padding: 0 !important;
	          border: 0 !important;
	          outline: 0 !important;
	          border-radius: 0 !important;
	          background: transparent !important;
	          box-shadow: none !important;
	          backdrop-filter: none !important;
	          -webkit-backdrop-filter: none !important;
	        }

	        .top-progress-slot .ai-progress-head,
	        .result-progress-slot .ai-progress-head,
	        .step-progress-slot .ai-progress-head,
	        .ai-progress-head {
	          margin: 0 0 6px !important;
	          padding: 0 !important;
	        }

	        .top-progress-slot .ai-progress-track,
	        .result-progress-slot .ai-progress-track,
	        .step-progress-slot .ai-progress-track,
	        .ai-progress-track {
	          height: 6px !important;
	          border: 0 !important;
	          outline: 0 !important;
	          border-radius: 999px !important;
	          background: rgba(60,60,67,.12) !important;
	          box-shadow: none !important;
	        }

	        .top-progress-slot .ai-progress-fill,
	        .result-progress-slot .ai-progress-fill,
	        .step-progress-slot .ai-progress-fill,
	        .ai-progress-fill {
	          box-shadow: none !important;
	        }

	        .top-progress-slot:not(:empty),
	        .result-progress-slot .ai-progress-slot:not(:empty),
	        .step-progress-slot .ai-progress-slot:not(:empty) {
	          width: 100% !important;
	          max-width: 100% !important;
	          min-width: 0 !important;
	          box-sizing: border-box !important;
	          overflow: hidden !important;
	        }

	        .step-progress-slot .ai-progress-slot:not(:empty) {
	          max-width: 100% !important;
	        }

	        .ai-progress-head,
	        .top-progress-slot .ai-progress-head,
	        .result-progress-slot .ai-progress-head,
	        .step-progress-slot .ai-progress-head {
	          display: grid !important;
	          grid-template-columns: max-content minmax(0, 1fr) max-content !important;
	          align-items: center !important;
	          justify-content: flex-start !important;
	          gap: 12px !important;
	          width: 100% !important;
	          max-width: 100% !important;
	          min-width: 0 !important;
	          overflow: hidden !important;
	          white-space: nowrap !important;
	        }

	        .ai-progress-title,
	        .top-progress-slot .ai-progress-title,
	        .result-progress-slot .ai-progress-title,
	        .step-progress-slot .ai-progress-title {
	          flex: 0 0 auto !important;
	          min-width: max-content !important;
	          max-width: 100% !important;
	          color: rgba(29,29,31,.94) !important;
	          font-size: 14px !important;
	          font-weight: 800 !important;
	        }

	        .ai-progress-inline-meta,
	        .top-progress-slot .ai-progress-inline-meta,
	        .result-progress-slot .ai-progress-inline-meta,
	        .step-progress-slot .ai-progress-inline-meta {
	          flex: 1 1 auto !important;
	          min-width: 0 !important;
	          max-width: 100% !important;
	          overflow: hidden !important;
	          color: rgba(60,60,67,.66) !important;
	          font-size: 13px !important;
	          font-weight: 700 !important;
	        }

	        .ai-progress-step,
	        .top-progress-slot .ai-progress-step,
	        .result-progress-slot .ai-progress-step,
	        .step-progress-slot .ai-progress-step {
	          display: block !important;
	          min-width: 0 !important;
	          overflow: hidden !important;
	          text-overflow: ellipsis !important;
	          white-space: nowrap !important;
	        }

	        .ai-progress-eta,
	        .top-progress-slot .ai-progress-eta,
	        .result-progress-slot .ai-progress-eta,
	        .step-progress-slot .ai-progress-eta {
	          flex: 0 0 auto !important;
	          min-width: 0 !important;
	          max-width: min(210px, 34vw) !important;
	          overflow: hidden !important;
	          text-overflow: ellipsis !important;
	          font-size: 13px !important;
	          font-weight: 800 !important;
	          line-height: 1.35 !important;
	          white-space: nowrap !important;
	        }

	        .ai-progress-percent,
	        .top-progress-slot .ai-progress-percent,
	        .result-progress-slot .ai-progress-percent,
	        .step-progress-slot .ai-progress-percent {
	          display: none !important;
	          color: #0877ff !important;
	        }

	        .ai-progress-eta,
	        .top-progress-slot .ai-progress-eta,
	        .result-progress-slot .ai-progress-eta,
	        .step-progress-slot .ai-progress-eta {
	          color: rgba(8,119,255,.78) !important;
	        }

	        @media (max-width: 760px) {
	          .top-progress-slot:not(:empty),
	          .result-progress-slot .ai-progress-slot:not(:empty),
	          .step-progress-slot .ai-progress-slot:not(:empty) {
	            width: 100% !important;
	            max-width: 100% !important;
	          }

	          .ai-progress-head,
	          .top-progress-slot .ai-progress-head,
	          .result-progress-slot .ai-progress-head,
	          .step-progress-slot .ai-progress-head {
	            grid-template-columns: max-content minmax(0, 1fr) max-content !important;
	            gap: 8px !important;
	          }

	          .ai-progress-title,
	          .top-progress-slot .ai-progress-title,
	          .result-progress-slot .ai-progress-title,
	          .step-progress-slot .ai-progress-title,
	          .ai-progress-inline-meta,
	          .top-progress-slot .ai-progress-inline-meta,
	          .result-progress-slot .ai-progress-inline-meta,
	          .step-progress-slot .ai-progress-inline-meta,
	          .ai-progress-eta,
	          .top-progress-slot .ai-progress-eta,
	          .result-progress-slot .ai-progress-eta,
	          .step-progress-slot .ai-progress-eta {
	            font-size: 12px !important;
	          }
	        }

	        /* Final hook option list guard. Keep generated hook options flat; selected state carries the emphasis. */
	        .hook-list {
	          gap: 0 !important;
	        }

	        .hook-list .hook-card {
	          position: relative !important;
	          margin: 0 !important;
	          padding: 10px 24px !important;
	          border: 0 !important;
	          border-radius: 0 !important;
	          background: transparent !important;
	          box-shadow: none !important;
	          backdrop-filter: none !important;
	          -webkit-backdrop-filter: none !important;
	          transform: none !important;
	        }

	        .hook-list .hook-card::before {
	          display: none !important;
	        }

	        .hook-list .hook-card + .hook-card {
	          border-top: 1px solid rgba(60,60,67,.08) !important;
	        }

	        .hook-list .hook-card:hover {
	          background: rgba(0,122,255,.025) !important;
	          box-shadow: none !important;
	          transform: none !important;
	        }

	        .hook-list .hook-card.selected {
	          margin: 2px 0 !important;
	          border-top: 0 !important;
	          border-radius: 18px !important;
	          background:
	            linear-gradient(90deg, rgba(0,122,255,.10), rgba(0,122,255,.035) 44%, rgba(255,255,255,0) 82%) !important;
	          box-shadow: none !important;
	        }

	        .hook-list .hook-card.selected::after {
	          content: "";
	          position: absolute;
	          left: 0;
	          top: 10px;
	          bottom: 10px;
	          width: 4px;
	          border-radius: 999px;
	          background: linear-gradient(180deg, #007aff, #32b8ff);
	        }

	        .hook-list .hook-card h4 {
	          margin: 0 0 4px !important;
	        }

	        .hook-list .hook-card .hook-content-row {
	          margin-top: 0 !important;
	        }

	        .hook-list .hook-selected-badge {
	          color: #007aff;
	          background: rgba(0,122,255,.11);
	          box-shadow: none;
	        }

	        /* Final product analysis readability guard. Wider section cards with nested point cards. */
	        .product-analysis-embedded .product-insight-grid,
	        .result-card.product-analysis-card .product-insight-grid {
	          display: grid !important;
	          grid-template-columns: repeat(auto-fit, minmax(317px, 1fr)) !important;
	          gap: 18px !important;
	          margin-top: 18px !important;
	        }

	        @media (min-width: 1600px) {
	          .product-analysis-embedded .product-insight-grid,
	          .result-card.product-analysis-card .product-insight-grid {
	            grid-template-columns: repeat(auto-fit, minmax(390px, 412px)) !important;
	            justify-content: start !important;
	          }
	        }

	        .product-analysis-embedded .product-insight-block,
	        .result-card.product-analysis-card .product-insight-block {
	          min-width: 0 !important;
	          padding: 18px 20px !important;
	          border: 1px solid #e5e7eb !important;
	          border-radius: 8px !important;
	          background: #fff !important;
	          box-shadow: none !important;
	          filter: none !important;
	          text-shadow: none !important;
	          backdrop-filter: none !important;
	          -webkit-backdrop-filter: none !important;
	        }

	        .product-analysis-embedded .product-insight-block.key,
	        .result-card.product-analysis-card .product-insight-block.key {
	          border-color: #e5e7eb !important;
	          background: #fff !important;
	        }

	        .product-analysis-embedded .product-highlight,
	        .result-card.product-analysis-card .product-highlight {
	          border: 1px solid #e5e7eb !important;
	          border-radius: 8px !important;
	          background: #fff !important;
	          color: rgba(29,29,31,.92) !important;
	          box-shadow: none !important;
	          backdrop-filter: none !important;
	          -webkit-backdrop-filter: none !important;
	        }

	        .product-analysis-embedded .product-highlight span,
	        .result-card.product-analysis-card .product-highlight span {
	          color: rgba(60,60,67,.68) !important;
	        }

	        .product-analysis-embedded .product-highlight strong,
	        .result-card.product-analysis-card .product-highlight strong {
	          color: rgba(29,29,31,.94) !important;
	        }

	        .product-analysis-embedded .product-insight-block h5,
	        .result-card.product-analysis-card .product-insight-block h5 {
	          display: inline-flex !important;
	          align-items: center !important;
	          gap: 7px !important;
	          margin: 0 0 12px !important;
	          color: rgba(29,29,31,.96) !important;
	          font-size: 17px !important;
	          font-weight: 800 !important;
	          line-height: 1.35 !important;
	        }

	        .product-analysis-embedded .product-insight-block h5 .icon,
	        .result-card.product-analysis-card .product-insight-block h5 .icon {
	          width: 17px !important;
	          height: 17px !important;
	          color: #0a84ff !important;
	          stroke-width: 2.2 !important;
	          flex: 0 0 auto !important;
	        }

	        .product-analysis-embedded .product-insight-rule,
	        .result-card.product-analysis-card .product-insight-rule {
	          display: none !important;
	        }

	        .product-analysis-embedded .product-insight-list,
	        .result-card.product-analysis-card .product-insight-list {
	          display: grid !important;
	          gap: 12px !important;
	          margin: 0 !important;
	          padding: 0 !important;
	          list-style: none !important;
	        }

	        .product-analysis-embedded .product-insight-list li,
	        .result-card.product-analysis-card .product-insight-list li {
	          display: grid !important;
	          grid-template-columns: 18px minmax(0, 1fr) !important;
	          gap: 6px !important;
	          align-items: start !important;
	          padding: 0 !important;
	          border: 0 !important;
	          border-radius: 0 !important;
	          background: transparent !important;
	          box-shadow: none !important;
	        }

	        .product-analysis-embedded .product-insight-block.key .product-insight-list li,
	        .result-card.product-analysis-card .product-insight-block.key .product-insight-list li {
	          border-color: transparent !important;
	          background: transparent !important;
	        }

	        .product-analysis-embedded .product-insight-index,
	        .result-card.product-analysis-card .product-insight-index {
	          color: rgba(29,29,31,.96) !important;
	          font-size: 14px !important;
	          font-weight: 800 !important;
	          line-height: 1.68 !important;
	        }

	        .product-analysis-embedded .product-insight-text,
	        .result-card.product-analysis-card .product-insight-text {
	          color: rgba(29,29,31,.86) !important;
	          font-size: 14px !important;
	          font-weight: 600 !important;
	          line-height: 1.68 !important;
	          overflow-wrap: anywhere !important;
	          word-break: break-word !important;
	        }

	        /* P0/P1 audit fixes: mobile overflow containment, neutral workflow cards, and guided empty states. */
	        [hidden],
	        .user-table tr[hidden],
	        .user-search-empty[hidden] {
	          display: none !important;
	        }

	        .create-flow-panel .step-card,
	        .rewrite-full-layout .step-card,
	        .comment-flow-panel .step-card {
	          border-color: rgba(190,222,255,.62) !important;
	          background: var(--uniform-card-bg) !important;
	          box-shadow: var(--uniform-card-shadow) !important;
	        }

	        .create-flow-panel .step-card::before,
	        .rewrite-full-layout .step-card::before,
	        .comment-flow-panel .step-card::before {
	          opacity: .08 !important;
	        }

	        .create-flow-panel .step-card .step-head,
	        .rewrite-full-layout .step-card .step-head,
	        .comment-flow-panel .step-card .step-head {
	          padding-bottom: 10px !important;
	          margin-bottom: 14px !important;
	          border-bottom: 1px solid rgba(60,60,67,.075) !important;
	        }

	        .create-flow-panel .step-card .step-index,
	        .rewrite-full-layout .step-card .step-index,
	        .comment-flow-panel .step-card .step-index {
	          color: var(--accent) !important;
	          border-color: rgba(0,122,255,.24) !important;
	          background: rgba(242,248,255,.92) !important;
	          box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
	        }

	        .create-flow-panel .step-card:hover,
	        .rewrite-full-layout .step-card:hover,
	        .comment-flow-panel .step-card:hover,
	        .create-flow-panel .step-card:focus-within,
	        .rewrite-full-layout .step-card:focus-within,
	        .comment-flow-panel .step-card:focus-within {
	          border-color: rgba(0,122,255,.32) !important;
	        }

	        .create-flow-panel .step-result,
	        .rewrite-full-layout .step-result,
	        .comment-flow-panel .step-result {
	          border-top-color: rgba(60,60,67,.08) !important;
	        }

	        .guided-empty {
	          display: grid !important;
	          grid-template-columns: auto minmax(0, 1fr) auto !important;
	          align-items: center !important;
	          gap: 14px !important;
	          min-height: 0 !important;
	          padding: 18px !important;
	          text-align: left !important;
	        }

	        .guided-empty-icon {
	          display: inline-flex !important;
	          align-items: center !important;
	          justify-content: center !important;
	          width: 42px !important;
	          height: 42px !important;
	          border-radius: 14px !important;
	          color: #0a84ff !important;
	          border: 1px solid rgba(0,122,255,.16) !important;
	          background: rgba(238,248,255,.86) !important;
	          box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
	        }

	        .guided-empty-icon .icon {
	          width: 20px !important;
	          height: 20px !important;
	        }

	        .guided-empty-copy {
	          display: grid !important;
	          gap: 5px !important;
	          min-width: 0 !important;
	        }

	        .guided-empty-copy b {
	          color: rgba(29,29,31,.92) !important;
	          font-size: 15px !important;
	          line-height: 1.35 !important;
	        }

	        .guided-empty-copy p {
	          margin: 0 !important;
	          color: rgba(60,60,67,.72) !important;
	          font-size: 13px !important;
	          line-height: 1.58 !important;
	        }

	        .guided-empty-preview {
	          grid-column: 2 / -1 !important;
	          display: flex !important;
	          flex-wrap: wrap !important;
	          gap: 8px !important;
	          min-width: 0 !important;
	        }

	        .guided-empty-preview span {
	          display: inline-flex !important;
	          align-items: center !important;
	          min-height: 30px !important;
	          padding: 6px 10px !important;
	          border-radius: 999px !important;
	          color: rgba(29,29,31,.72) !important;
	          font-size: 12px !important;
	          font-weight: 700 !important;
	          background: rgba(255,255,255,.68) !important;
	          border: 1px solid rgba(190,222,255,.58) !important;
	        }

	        .guided-empty .button {
	          justify-self: end !important;
	          white-space: nowrap !important;
	        }

	        .is-card-depth-flattened {
	          border-color: transparent !important;
	          border-radius: 0 !important;
	          background: transparent !important;
	          box-shadow: none !important;
	          backdrop-filter: none !important;
	          -webkit-backdrop-filter: none !important;
	        }

	        .is-card-depth-flattened::before,
	        .is-card-depth-flattened::after {
	          display: none !important;
	        }

	        .is-card-depth-flattened:hover,
	        .is-card-depth-flattened:focus-within {
	          border-color: transparent !important;
	          background: transparent !important;
	          box-shadow: none !important;
	          transform: none !important;
	        }

	        .history-record-grid > .guided-empty.favorites-empty-state {
	          grid-column: 1 / -1 !important;
	          grid-template-columns: auto minmax(0, 1fr) auto !important;
	          align-items: center !important;
	          min-height: 94px !important;
	          padding: 18px 24px !important;
	        }

	        .history-record-grid > .guided-empty.favorites-empty-state .guided-empty-copy {
	          gap: 6px !important;
	        }

	        .history-record-grid > .guided-empty.favorites-empty-state .guided-empty-preview {
	          grid-column: 2 / 3 !important;
	          justify-content: flex-start !important;
	          margin-top: 2px !important;
	        }

	        .history-record-grid > .guided-empty.favorites-empty-state .button {
	          min-width: 132px !important;
	          justify-self: end !important;
	        }

	        @media (max-width: 760px) {
	          html,
	          body {
	            max-width: 100% !important;
	            overflow-x: hidden !important;
	          }

	          body {
	            padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
	          }

	          .app,
	          .main,
	          .workspace,
	          .topbar,
	          .card,
	          .card.strong,
	          .output-stack,
	          .flow,
	          .create-agent-layout,
	          .rewrite-full-layout,
	          .comment-generator-layout,
	          .settings-grid,
	          .library-main-grid,
	          .history-layout,
	          .step-card,
	          .result-card,
	          .history-card,
	          .creative-kb-card,
	          .model-service-card,
	          .attachment-manager-card,
	          .attachment-list-card,
	          .token-activity-card {
	            min-width: 0 !important;
	            max-width: 100% !important;
	            overflow-wrap: anywhere !important;
	          }

	          .grid-2,
	          .grid-3,
	          .form-grid,
	          .filter-grid,
	          .history-filter-grid,
	          .library-filter-grid,
	          .learning-filter-grid,
	          .creative-kb-form-grid,
	          .creative-kb-source-grid,
	          .training-name-grid,
	          .training-product-grid,
	          .date-range-grid,
	          .create-product-meta-grid,
	          .rewrite-product-meta-grid,
	          .comment-video-input-grid,
	          .rewrite-video-input-grid,
	          .viral-video-input-grid,
	          .attachment-filter-row,
	          .attachment-filter-row.compact,
	          .runtime-status-grid,
	          .settings-info-grid,
	          .model-service-fields,
	          .model-service-bottom,
	          .model-service-actions,
	          .user-form-grid {
	            grid-template-columns: minmax(0, 1fr) !important;
	            width: 100% !important;
	            min-width: 0 !important;
	          }

	          .form-grid > *,
	          .filter-grid > *,
	          .history-filter-grid > *,
	          .library-filter-grid > *,
	          .learning-filter-grid > *,
	          .date-range-grid > *,
	          .attachment-filter-row > *,
	          .attachment-filter-row.compact > *,
	          .model-service-fields > *,
	          .model-service-bottom > *,
	          .model-service-actions > * {
	            min-width: 0 !important;
	            width: 100% !important;
	          }

	          input,
	          textarea,
	          select,
	          .field,
	          .select-shell,
	          .select-trigger,
	          .select-panel,
	          .date-input-shell,
	          .date-picker-panel,
	          .file-input,
	          .training-upload-card,
	          .product-doc-file-input,
	          .rewrite-video-upload,
	          .comment-video-upload,
	          .button,
	          .mini-button {
	            max-width: 100% !important;
	            min-width: 0 !important;
	          }

	          .select-panel,
	          .date-picker-panel {
	            max-width: calc(100vw - 32px) !important;
	          }

	          .creative-kb-list-head,
	          .user-list-title,
	          .attachment-title-row,
	          .token-activity-head,
	          .section-title {
	            align-items: stretch !important;
	          }

	          .creative-kb-list-head .chip-row,
	          .attachment-quick-filters,
	          .type-quick-filters {
	            width: 100% !important;
	            justify-content: flex-start !important;
	          }

	          .row-actions,
	          .create-export-actions,
	          .rewrite-export-actions,
	          .comment-export-actions,
	          .comment-flow-panel .comment-export-actions,
	          .creative-kb-actions,
	          .attachment-list-actions,
	          .record-actions {
	            display: grid !important;
	            grid-template-columns: minmax(0, 1fr) !important;
	            width: 100% !important;
	            gap: 8px !important;
	          }

	          .row-actions .button,
	          .row-actions .mini-button,
	          .create-export-actions .button,
	          .rewrite-export-actions .button,
	          .comment-export-actions .button,
	          .creative-kb-actions .mini-button,
	          .attachment-list-actions .icon-action,
	          .record-actions .button,
	          .record-actions .mini-button {
	            width: 100% !important;
	            min-width: 0 !important;
	          }

	          .token-heatmap-scroll {
	            max-width: 100% !important;
	            overflow-x: auto !important;
	            -webkit-overflow-scrolling: touch;
	          }

	          .token-heatmap-track {
	            width: max-content !important;
	            min-width: 0 !important;
	            max-width: none !important;
	          }

	          .token-heatmap-grid,
	          .token-month-labels {
	            width: max-content !important;
	            min-width: 0 !important;
	            max-width: none !important;
	          }

	          .token-heatmap-grid {
	            grid-template-columns: repeat(var(--token-weeks, 53), 10px) !important;
	            grid-template-rows: repeat(7, 10px) !important;
	            gap: 3px !important;
	            justify-content: start !important;
	          }

	          .token-cell {
	            width: 10px !important;
	            height: 10px !important;
	            border-radius: 4px !important;
	          }

	          .user-table-wrap,
	          .user-table,
	          .user-table tbody,
	          .user-table tr,
	          .user-table td {
	            max-width: 100% !important;
	            min-width: 0 !important;
	          }

	          .user-table td {
	            grid-template-columns: 64px minmax(0, 1fr) !important;
	          }

	          .user-account-cell,
	          .user-note,
	          .user-search,
	          .user-search input,
	          .user-table code {
	            min-width: 0 !important;
	            max-width: 100% !important;
	            overflow-wrap: anywhere !important;
	          }

	          .attachment-list-table,
	          .attachment-list-row,
	          .attachment-file-cell {
	            min-width: 0 !important;
	            max-width: 100% !important;
	          }

	          .guided-empty {
	            grid-template-columns: minmax(0, 1fr) !important;
	            align-items: stretch !important;
	            padding: 16px !important;
	          }

	          .guided-empty-icon,
	          .guided-empty .button {
	            justify-self: start !important;
	          }

	          .guided-empty-preview {
	            grid-column: 1 !important;
	          }
	        }

	        @media (max-width: 420px) {
	          .step-title h3,
	          .section-title h3 {
	            font-size: 17px !important;
	          }

	          .card,
	          .card.strong,
	          .step-card,
	          .result-card {
	            padding: 14px !important;
	          }
	        }

	        /* P2: admin information architecture and login/home typography polish. */
	        .admin-page-summary {
	          display: grid !important;
	          gap: 16px !important;
	        }

	        .admin-kpi-strip {
	          display: grid;
	          grid-template-columns: repeat(3, minmax(0, 1fr));
	          gap: 12px;
	        }

	        .admin-kpi-strip article {
	          min-width: 0;
	          padding: 14px 16px;
	          border: 1px solid rgba(190,222,255,.56);
	          border-radius: 16px;
	          background: rgba(255,255,255,.66);
	          box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
	        }

	        .admin-kpi-strip span {
	          display: block;
	          color: rgba(60,60,67,.68);
	          font-size: 12px;
	          font-weight: 700;
	          line-height: 1.35;
	        }

	        .admin-kpi-strip b {
	          display: block;
	          margin-top: 7px;
	          color: rgba(29,29,31,.94);
	          font-size: 22px;
	          font-weight: 700;
	          line-height: 1.1;
	          overflow-wrap: anywhere;
	        }

	        .model-provider-tabs {
	          display: grid;
	          grid-template-columns: repeat(3, minmax(0, 1fr));
	          gap: 10px;
	          margin: 4px 0 16px;
	        }

	        .model-provider-tab {
	          min-width: 0;
	          min-height: 58px;
	          display: grid;
	          align-content: center;
	          gap: 4px;
	          padding: 10px 13px;
	          border: 1px solid rgba(190,222,255,.52);
	          border-radius: 16px;
	          color: rgba(60,60,67,.72);
	          background: rgba(255,255,255,.58);
	          box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
	          cursor: pointer;
	          text-align: left;
	          transition: color .18s ease, border-color .18s ease, background .18s ease;
	        }

	        .model-provider-tab b {
	          color: rgba(29,29,31,.88);
	          font-size: 14px;
	          line-height: 1.25;
	        }

	        .model-provider-tab span {
	          font-size: 12px;
	          font-weight: 700;
	          line-height: 1.3;
	          overflow-wrap: anywhere;
	        }

	        .model-provider-tab.active {
	          color: #0a66d5;
	          border-color: rgba(0,122,255,.30);
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.88), rgba(241,248,255,.72)),
	            rgba(0,122,255,.08);
	        }

	        .model-provider-tab.active b {
	          color: #075fbd;
	        }

	        .model-service-list[data-active-model-tab="main"] .model-service-card:not([data-model-scope="main"]),
	        .model-service-list[data-active-model-tab="doubao"] .model-service-card:not([data-model-scope="doubao"]),
	        .model-service-list[data-active-model-tab="qwen"] .model-service-card:not([data-model-scope="qwen"]) {
	          display: none !important;
	        }

	        .settings-token-disclosure {
	          display: grid;
	          gap: 12px;
	        }

	        .settings-token-disclosure > summary {
	          cursor: pointer;
	          list-style: none;
	        }

	        .settings-token-disclosure > summary::-webkit-details-marker {
	          display: none;
	        }

	        .settings-token-summary {
	          display: flex !important;
	          align-items: center;
	          justify-content: space-between;
	          gap: 12px;
	          min-height: 66px;
	        }

	        .settings-token-summary span {
	          display: inline-flex;
	          align-items: center;
	          gap: 9px;
	          color: rgba(29,29,31,.92);
	          font-size: 17px;
	          font-weight: 700;
	          line-height: 1.3;
	        }

	        .settings-token-summary small {
	          color: rgba(60,60,67,.66);
	          font-size: 12px;
	          font-weight: 700;
	          line-height: 1.45;
	          text-align: right;
	        }

	        .row-compact-actions {
	          display: inline-grid !important;
	          grid-template-columns: minmax(78px, auto) 36px !important;
	          align-items: center !important;
	          gap: 8px !important;
	          width: auto !important;
	          position: relative;
	        }

        .user-inline-actions {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: flex-start !important;
          flex-wrap: nowrap !important;
          gap: 8px !important;
          width: auto !important;
        }

	        .user-inline-actions .mini-button {
	          white-space: nowrap !important;
	        }

	        .row-primary-action {
	          min-width: 78px !important;
	          width: auto !important;
	        }

	        .row-primary-action.disabled {
	          color: rgba(60,60,67,.46) !important;
	          background: rgba(118,118,128,.08) !important;
	          border-color: rgba(60,60,67,.08) !important;
	          box-shadow: none !important;
	        }

	        .row-more-actions {
	          position: relative;
	          min-width: 0;
	        }

	        .row-more-toggle {
	          width: 36px !important;
	          min-width: 36px !important;
	          height: 36px !important;
	          min-height: 36px !important;
	          padding: 0 !important;
	        }

	        .row-more-menu {
	          position: absolute;
	          right: 0;
	          top: calc(100% + 8px);
	          z-index: 35;
	          width: 172px;
	          display: grid;
	          gap: 4px;
	          padding: 7px;
	          border: 1px solid rgba(60,60,67,.10);
	          border-radius: 16px;
	          background: rgba(255,255,255,.96);
	          box-shadow: 0 18px 38px rgba(48,104,156,.16), inset 0 1px 0 rgba(255,255,255,.82);
	        }

	        .row-more-menu[hidden] {
	          display: none !important;
	        }

	        .row-more-menu button {
	          width: 100%;
	          min-height: 36px;
	          justify-content: flex-start;
	          gap: 8px;
	          padding: 0 10px;
	          border: 0;
	          border-radius: 11px;
	          color: rgba(29,29,31,.86);
	          background: transparent;
	          box-shadow: none;
	          font-size: 13px;
	          font-weight: 700;
	          text-align: left;
	        }

	        .row-more-menu button:hover {
	          background: rgba(118,118,128,.10);
	        }

	        .row-more-menu button.danger {
	          color: var(--rose);
	        }

	        .attachment-quick-filter span {
	          display: inline-flex;
	          align-items: center;
	          justify-content: center;
	          min-width: 22px;
	          height: 22px;
	          padding: 0 7px;
	          border-radius: 999px;
	          background: rgba(255,255,255,.62);
	          color: inherit;
	          font-size: 11px;
	          font-weight: 800;
	        }

	        .login-hero h1 {
	          font-size: clamp(34px, 3.6vw, 50px) !important;
	          line-height: 1.14 !important;
	          letter-spacing: 0 !important;
	          font-weight: 650 !important;
	        }

	        .login-hero p {
	          max-width: 500px !important;
	          font-size: clamp(15px, 1.25vw, 18px) !important;
	          letter-spacing: 0 !important;
	          line-height: 1.62 !important;
	          font-weight: 500 !important;
	        }

	        .login-hero-wordmark {
	          width: 176px !important;
	          max-width: min(176px, 54vw) !important;
	        }

	        .login-card h2 {
	          font-size: 20px !important;
	          font-weight: 650 !important;
	          letter-spacing: 0 !important;
	        }

	        .login-card p,
	        .login-field label {
	          letter-spacing: 0 !important;
	        }

	        .home-ai-console:not(.is-chat-mode) {
	          gap: 28px !important;
	          margin-top: clamp(96px, 17vh, 188px) !important;
	        }

	        .home-ai-title {
	          gap: 10px !important;
	        }

	        .home-ai-kicker {
	          display: inline-flex;
	          align-items: center;
	          min-height: 28px;
	          padding: 0 10px;
	          border: 1px solid rgba(0,122,255,.14);
	          border-radius: 999px;
	          color: #075fbd;
	          background: rgba(238,248,255,.72);
	          font-size: 13px;
	          font-weight: 700;
	          line-height: 1;
	        }

	        .home-ai-title h3 {
	          font-size: clamp(24px, 2.45vw, 34px) !important;
	          line-height: 1.2 !important;
	          font-weight: 600 !important;
	          letter-spacing: 0 !important;
	        }

	        .home-ai-title p {
	          font-size: clamp(15px, 1.15vw, 18px) !important;
	          line-height: 1.58 !important;
	          font-weight: 500 !important;
	          letter-spacing: 0 !important;
	        }

	        .home-ai-composer {
	          min-height: 188px !important;
	          padding: 20px 24px 16px !important;
	        }

	        .home-ai-composer textarea {
	          min-height: 108px !important;
	        }

	        .workbench-entry-grid {
	          width: min(78%, 1120px) !important;
	        }

	        @media (max-width: 760px) {
	          .admin-kpi-strip,
	          .model-provider-tabs {
	            grid-template-columns: 1fr !important;
	          }

	          .settings-token-summary {
	            align-items: flex-start !important;
	            flex-direction: column !important;
	          }

	          .settings-token-summary small {
	            text-align: left !important;
	          }

	          .history-record-grid > .guided-empty.favorites-empty-state {
	            grid-template-columns: auto minmax(0, 1fr) !important;
	            padding: 16px !important;
	          }

	          .history-record-grid > .guided-empty.favorites-empty-state .guided-empty-preview {
	            grid-column: 1 / -1 !important;
	          }

	          .history-record-grid > .guided-empty.favorites-empty-state .button {
	            grid-column: 1 / -1 !important;
	            width: 100% !important;
	            justify-self: stretch !important;
	          }

	          .user-inline-actions {
	            display: grid !important;
	            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	            width: 100% !important;
	          }

	          .user-inline-actions .mini-button {
	            width: 100% !important;
	            min-width: 0 !important;
	          }

	          .row-compact-actions {
	            grid-template-columns: minmax(0, 1fr) 40px !important;
	            width: 100% !important;
	          }

	          .row-primary-action {
	            width: 100% !important;
	          }

	          .row-more-toggle {
	            width: 40px !important;
	            min-width: 40px !important;
	            height: 40px !important;
	            min-height: 40px !important;
	          }

	          .row-more-menu {
	            right: 0;
	            top: auto;
	            bottom: calc(100% + 8px);
	          }

	          .attachment-list-table {
	            display: grid !important;
	            gap: 10px !important;
	            border: 0 !important;
	            background: transparent !important;
	            box-shadow: none !important;
	            overflow: visible !important;
	          }

	          .attachment-list-head {
	            display: none !important;
	          }

	          .attachment-list-row {
	            display: grid !important;
	            grid-template-columns: minmax(0, 1fr) !important;
	            gap: 9px !important;
	            min-width: 0 !important;
	            width: 100% !important;
	            padding: 14px !important;
	            border: 1px solid rgba(190,222,255,.62) !important;
	            border-radius: 17px !important;
	            background: var(--uniform-card-bg) !important;
	            box-shadow: var(--uniform-card-shadow) !important;
	          }

	          .attachment-list-row > span {
	            display: grid !important;
	            grid-template-columns: 72px minmax(0, 1fr) !important;
	            gap: 8px !important;
	            color: rgba(29,29,31,.78) !important;
	            font-size: 13px !important;
	            line-height: 1.45 !important;
	            overflow-wrap: anywhere !important;
	          }

	          .attachment-list-row > span::before {
	            color: rgba(60,60,67,.58);
	            font-size: 12px;
	            font-weight: 800;
	          }

	          .attachment-list-row > span:nth-of-type(1)::before { content: "类型"; }
	          .attachment-list-row > span:nth-of-type(2)::before { content: "来源"; }
	          .attachment-list-row > span:nth-of-type(3)::before { content: "用户"; }
	          .attachment-list-row > span:nth-of-type(4)::before { content: "大小"; }
	          .attachment-list-row > span:nth-of-type(5)::before { content: "上传"; }

	          .attachment-list-actions {
	            justify-self: stretch !important;
	          }

	          .login-screen {
	            padding: 28px 20px !important;
	          }

	          .login-layout {
	            gap: 28px !important;
	          }

	          .login-hero {
	            gap: 10px !important;
	          }

	          .login-hero h1 {
	            font-size: clamp(28px, 8.2vw, 34px) !important;
	            white-space: normal !important;
	          }

	          .login-hero p {
	            font-size: 14px !important;
	          }

	          .home-ai-console:not(.is-chat-mode) {
	            gap: 22px !important;
	            margin-top: clamp(48px, 10vh, 84px) !important;
	          }

	          .home-ai-title h3 {
	            font-size: 25px !important;
	          }

	          .home-ai-title p {
	            font-size: 15px !important;
	          }

	          .home-ai-composer {
	            min-height: 166px !important;
	            padding: 18px 18px 14px !important;
	            border-radius: 24px !important;
	          }

	          .home-ai-composer textarea {
	            min-height: 94px !important;
	          }

	          .workbench-entry-grid {
	            width: 100% !important;
	          }
	        }

	        /* P1/P2 execution: input-filled states, filter clarity, mobile nav avoidance. */
	        .field.is-filled input,
	        .field.is-filled textarea,
	        .field.is-filled .select-trigger,
	        .model-field.is-filled input {
	          border-color: rgba(0,122,255,.24) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,251,255,.78)),
	            rgba(0,122,255,.045) !important;
	          box-shadow:
	            0 0 0 1px rgba(0,122,255,.035),
	            inset 0 1px 0 rgba(255,255,255,.94),
	            0 10px 22px rgba(0,122,255,.045) !important;
	        }

	        .field.is-filled > label,
	        .model-field.is-filled > label {
	          display: flex;
	          align-items: center;
	          justify-content: space-between;
	          gap: 8px;
	        }

	        .field.is-filled > label::after,
	        .model-field.is-filled > label::after {
	          content: "已填写";
	          flex: 0 0 auto;
	          min-height: 20px;
	          display: inline-flex;
	          align-items: center;
	          padding: 0 7px;
	          border: 1px solid rgba(0,122,255,.16);
	          border-radius: 999px;
	          color: #075fbd;
	          background: rgba(238,248,255,.78);
	          font-size: 10.5px;
	          font-weight: 800;
	          line-height: 1;
	        }

	        .field.is-long-value input,
	        .model-field.is-long-value input {
	          padding-right: 46px !important;
	          overflow: hidden;
	          text-overflow: ellipsis;
	          white-space: nowrap;
	        }

	        .field-copy-button {
	          position: absolute;
	          right: 8px;
	          bottom: 7px;
	          z-index: 4;
	          width: 30px;
	          height: 30px;
	          min-width: 30px;
	          min-height: 30px;
	          display: inline-flex;
	          align-items: center;
	          justify-content: center;
	          padding: 0;
	          border: 1px solid rgba(0,122,255,.14);
	          border-radius: 12px;
	          color: var(--accent);
	          background: rgba(255,255,255,.78);
	          box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(31,78,121,.055);
	        }

	        .field-copy-button .icon {
	          width: 15px;
	          height: 15px;
	        }

	        .link-input {
	          color: rgba(29,29,31,.88);
	        }

	        .link-input:not(:placeholder-shown) {
	          min-height: 104px;
	        }

	        .filter-state-bar {
	          display: flex;
	          align-items: center;
	          justify-content: space-between;
	          gap: 12px;
	          margin-top: 12px;
	          padding: 10px 12px;
	          border: 1px solid rgba(0,122,255,.12);
	          border-radius: 16px;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.82), rgba(244,250,255,.58)),
	            rgba(0,122,255,.035);
	        }

	        .filter-state-chips {
	          min-width: 0;
	          display: flex;
	          flex-wrap: wrap;
	          gap: 7px;
	        }

	        .filter-state-chip {
	          max-width: 260px;
	          min-height: 26px;
	          display: inline-flex;
	          align-items: center;
	          gap: 5px;
	          padding: 0 9px;
	          border: 1px solid rgba(0,122,255,.14);
	          border-radius: 999px;
	          color: rgba(29,29,31,.78);
	          background: rgba(255,255,255,.72);
	          font-size: 11.5px;
	          font-weight: 700;
	          line-height: 1;
	        }

	        .filter-state-chip b {
	          color: #075fbd;
	          font-weight: 800;
	        }

	        .filter-state-chip span {
	          min-width: 0;
	          overflow: hidden;
	          text-overflow: ellipsis;
	          white-space: nowrap;
	        }

	        .filter-clear-button {
	          flex: 0 0 auto;
	          min-height: 30px;
	          padding: 0 10px;
	          border: 1px solid rgba(0,122,255,.16);
	          border-radius: 999px;
	          color: var(--accent);
	          background: rgba(255,255,255,.72);
	          font-size: 12px;
	          font-weight: 800;
	          box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
	        }

	        .empty.guided-empty.is-filtered-empty {
	          border-style: solid !important;
	          border-color: rgba(0,122,255,.18) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.86), rgba(241,248,255,.64)),
	            rgba(0,122,255,.035) !important;
	        }

	        .learning-empty-inline.is-filtered-empty,
	        .library-empty-plain.is-filtered-empty {
	          border: 1px solid rgba(0,122,255,.16) !important;
	          border-radius: 16px !important;
	          color: #075fbd !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.82), rgba(241,248,255,.62)),
	            rgba(0,122,255,.035) !important;
	          font-weight: 800 !important;
	        }

	        .empty.guided-empty.is-filtered-empty .guided-empty-copy b::after {
	          content: "筛选无结果";
	          display: inline-flex;
	          align-items: center;
	          min-height: 22px;
	          margin-left: 8px;
	          padding: 0 8px;
	          border: 1px solid rgba(0,122,255,.16);
	          border-radius: 999px;
	          color: #075fbd;
	          background: rgba(238,248,255,.78);
	          font-size: 11px;
	          font-weight: 800;
	          vertical-align: middle;
	        }

		        .workflow-dependency-note {
		          display: inline-flex;
		          align-items: center;
		          gap: 6px;
		          min-height: 28px;
		          margin: 8px 0 12px;
		          padding: 0 10px;
		          border: 1px solid rgba(255,159,10,.22);
		          border-radius: 999px;
	          color: #9a5a00;
	          background: rgba(255,246,218,.72);
	          font-size: 12px;
		          font-weight: 800;
		        }

		        .workflow-dependency-note + .step-subtitle,
		        .workflow-dependency-note + .field,
		        .workflow-dependency-note + .row-actions,
		        .workflow-dependency-note + .create-script-controls,
		        .workflow-dependency-note + .rewrite-export-toolbar,
		        .workflow-dependency-note + .export-option-panel {
		          margin-top: 0 !important;
		        }

	        .export-card-status {
	          display: flex;
	          align-items: center;
	          justify-content: flex-start;
	          margin: 4px 0 14px;
	        }

	        .step-card.is-step-locked {
	          border-color: rgba(255,159,10,.18) !important;
	        }

	        .step-card.is-step-locked .button.primary {
	          box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 10px 20px rgba(255,159,10,.08);
	        }

	        .model-service-card.is-dirty {
	          border-color: rgba(255,159,10,.30) !important;
	          box-shadow:
	            0 0 0 1px rgba(255,159,10,.10),
	            0 18px 42px rgba(255,159,10,.08),
	            var(--uniform-card-shadow, var(--shadow-card-soft)) !important;
	        }

	        .model-service-card.is-dirty .model-service-title h4::after {
	          content: "未保存";
	          display: inline-flex;
	          align-items: center;
	          min-height: 22px;
	          margin-left: 8px;
	          padding: 0 8px;
	          border: 1px solid rgba(255,159,10,.26);
	          border-radius: 999px;
	          color: #9a5a00;
	          background: rgba(255,246,218,.78);
	          font-size: 11px;
	          font-weight: 800;
	        }

	        .model-service-actions {
	          padding: 8px;
	          border-radius: 18px;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.48)),
	            rgba(255,255,255,.46);
	          border: 1px solid rgba(255,255,255,.64);
	          box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
	        }

	        .model-key-row input {
	          letter-spacing: .08em;
	        }

	        .file-input.has-file,
	        .training-upload-card.has-file,
	        .product-doc-file-input.has-file {
	          border-color: rgba(52,199,89,.28) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,250,244,.72)),
	            rgba(52,199,89,.07) !important;
	        }

	        @media (max-width: 760px) {
	          body {
	            padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
	          }

	          .workspace,
	          .output-stack,
	          .history-layout,
	          .create-agent-layout,
	          .rewrite-full-layout,
	          .comment-generator-layout,
	          .library-main-grid {
	            padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
	          }

	          .mobile-tabbar {
	            transition:
	              opacity .2s ease,
	              transform .24s cubic-bezier(.2,.84,.22,1),
	              min-height .24s cubic-bezier(.2,.84,.22,1);
	            will-change: transform, opacity;
	          }

	          body.input-focus-mode .mobile-tabbar {
	            opacity: .76;
	            pointer-events: none;
	            transform: translateY(calc(100% - 20px));
	          }

	          body.input-focus-mode .mobile-more-menu {
	            opacity: 0 !important;
	            pointer-events: none !important;
	            transform: translateY(10px) scale(.98) !important;
	          }

	          .field-copy-button {
	            bottom: 8px;
	          }

	          .filter-state-bar {
	            align-items: stretch;
	            flex-direction: column;
	          }

	          .filter-state-chip {
	            max-width: 100%;
	          }

	          .filter-clear-button {
	            width: 100%;
	          }

	          .model-service-bottom {
	            position: sticky;
	            bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	            z-index: 8;
	            padding-top: 8px;
	            border-radius: 20px;
	            background:
	              linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.90) 26%, rgba(255,255,255,.78)),
	              rgba(246,252,255,.82);
	            backdrop-filter: blur(18px) saturate(170%);
	            -webkit-backdrop-filter: blur(18px) saturate(170%);
	          }

	          .file-input,
	          .training-upload-card,
	          .product-doc-file-input,
	          .creative-kb-upload {
	            min-height: 58px !important;
	            grid-template-columns: minmax(0, 1fr) auto !important;
	          }

	          .file-copy small {
	            display: -webkit-box;
	            -webkit-line-clamp: 2;
	            -webkit-box-orient: vertical;
	            overflow: hidden;
	            white-space: normal !important;
	          }

	          .flow > .step-card .step-head,
	          .viral-agent-panel > .step-card .step-head {
	            width: 100%;
	          }

	          .flow > .step-card .step-head-actions,
	          .viral-agent-panel > .step-card .step-head-actions {
	            width: 100%;
	            flex-wrap: wrap;
	            justify-content: flex-start;
	            margin-left: 0;
	          }

	          .flow > .step-card .step-progress-slot,
	          .viral-agent-panel > .step-card .step-progress-slot,
	          .flow > .step-card .step-head-actions .step-progress-slot,
	          .viral-agent-panel > .step-card .step-head-actions .step-progress-slot {
	            flex: 0 0 100% !important;
	            width: 100% !important;
	            min-width: 0 !important;
	            max-width: none !important;
	            margin: 0 !important;
	          }

	          .flow > .step-card .step-progress-slot .ai-progress-card,
	          .viral-agent-panel > .step-card .step-progress-slot .ai-progress-card,
	          .flow > .step-card .step-progress-slot .ai-progress-track,
	          .viral-agent-panel > .step-card .step-progress-slot .ai-progress-track {
	            width: 100% !important;
	            max-width: 100% !important;
	          }

		          .workflow-dependency-note {
		            margin: 6px 0 12px;
		          }

	          .script-action-row {
	            display: grid !important;
	            grid-template-columns: repeat(4, minmax(44px, 1fr)) !important;
	            justify-items: center !important;
	            align-items: center !important;
	            width: 100% !important;
	            max-width: 100% !important;
	            margin: 14px 0 0 !important;
	            gap: 8px !important;
	          }

	          .script-action-row .button.icon-action {
	            width: 44px !important;
	            min-width: 44px !important;
	            max-width: 44px !important;
	            height: 44px !important;
	            min-height: 44px !important;
	            padding: 0 !important;
	            justify-self: center !important;
	          }
	        }

	        /* P1/P2 follow-up: readable AI output, explicit upload success, and keyboard focus. */
	        .home-ai-console.is-chat-mode .home-ai-table-wrap {
	          overflow-x: visible !important;
	          overflow-y: visible !important;
	          padding-bottom: 0 !important;
	          border-color: rgba(60,60,67,.10) !important;
	          background: rgba(255,255,255,.78) !important;
	        }

	        .home-ai-console.is-chat-mode .home-ai-table {
	          width: 100% !important;
	          min-width: 0 !important;
	          table-layout: fixed !important;
	        }

	        .home-ai-console.is-chat-mode .home-ai-table th,
	        .home-ai-console.is-chat-mode .home-ai-table td {
	          white-space: normal !important;
	          overflow-wrap: anywhere !important;
	          word-break: break-word !important;
	        }

	        .home-ai-console.is-chat-mode .home-ai-table th:first-child,
	        .home-ai-console.is-chat-mode .home-ai-table td:first-child {
	          width: 88px;
	        }

	        .product-doc-file-input.is-complete {
	          border-color: rgba(52,199,89,.30) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.90), rgba(237,250,242,.76)),
	            rgba(52,199,89,.08) !important;
	          box-shadow:
	            0 0 0 3px rgba(52,199,89,.08),
	            inset 0 1px 0 rgba(255,255,255,.88) !important;
	        }

	        .product-doc-file-input.is-complete .file-copy b::after {
	          content: "已完成";
	          display: inline-flex;
	          align-items: center;
	          min-height: 22px;
	          margin-left: 8px;
	          padding: 0 8px;
	          border: 1px solid rgba(52,199,89,.26);
	          border-radius: 999px;
	          color: #1b7f3a;
	          background: rgba(52,199,89,.10);
	          font-size: 11px;
	          font-weight: 800;
	        }

	        .selected-doc-card.is-complete {
	          border-color: rgba(52,199,89,.24) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.86), rgba(239,250,244,.72)),
	            rgba(52,199,89,.07) !important;
	        }

	        .selected-doc-card.is-complete .selected-doc-progress span {
	          background: linear-gradient(90deg, #34c759, #1fb66a) !important;
	        }

	        .selected-doc-card.is-complete .selected-doc-meta span {
	          display: inline-flex;
	          align-items: center;
	          gap: 5px;
	          color: #1b7f3a;
	          font-weight: 800;
	        }

	        .selected-doc-card.is-complete .selected-doc-meta .icon {
	          width: 14px;
	          height: 14px;
	          stroke-width: 2.4;
	        }

	        /* Workflow motion pack B: state-driven motion for creation workflows. */
	        #workspace.workflow-motion-page .flow > .step-card,
	        #workspace.workflow-motion-page .viral-agent-panel > .step-card,
	        #workspace.workflow-motion-page .comment-result-panel,
	        #workspace.workflow-motion-page .viral-agent-panel > .result-card {
	          transform: translateZ(0);
	          transition:
	            border-color .22s cubic-bezier(.2,.8,.2,1),
	            box-shadow .22s cubic-bezier(.2,.8,.2,1),
	            background .22s cubic-bezier(.2,.8,.2,1),
	            transform .22s cubic-bezier(.2,.8,.2,1);
	        }

	        #workspace.workflow-motion-page.motion-page-enter .flow > .step-card,
	        #workspace.workflow-motion-page.motion-page-enter .viral-agent-panel > .step-card,
	        #workspace.workflow-motion-page.motion-page-enter .comment-result-panel,
	        #workspace.workflow-motion-page.motion-page-enter .viral-agent-panel > .result-card {
	          animation: workflowStepEnter .34s cubic-bezier(.2,.84,.22,1) both;
	          animation-delay: calc(var(--motion-index, 0) * 34ms);
	        }

	        #workspace.workflow-motion-page .flow > .step-card.is-motion-active,
	        #workspace.workflow-motion-page .viral-agent-panel > .step-card.is-motion-active,
	        #workspace.workflow-motion-page.workflow-motion-running .comment-result-panel {
	          border-color: rgba(0,122,255,.30) !important;
	          box-shadow:
	            0 0 0 1px rgba(0,122,255,.08),
	            0 18px 42px rgba(0,122,255,.08),
	            var(--uniform-card-shadow) !important;
	        }

	        #workspace.workflow-motion-page .flow > .step-card.is-motion-active .step-index,
	        #workspace.workflow-motion-page .viral-agent-panel > .step-card.is-motion-active .step-index {
	          position: relative;
	          animation: workflowStepActivePulse 1.35s cubic-bezier(.45,0,.2,1) infinite;
	        }

	        #workspace.workflow-motion-page .flow > .step-card.is-motion-complete .step-index,
	        #workspace.workflow-motion-page .viral-agent-panel > .step-card.is-motion-complete .step-index {
	          position: relative;
	          color: #1b7f3a !important;
	          border-color: rgba(52,199,89,.34) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.90), rgba(237,250,242,.78)),
	            rgba(52,199,89,.12) !important;
	        }

	        #workspace.workflow-motion-page.motion-result-reveal .flow > .step-card.is-motion-complete .step-index::after,
	        #workspace.workflow-motion-page.motion-result-reveal .viral-agent-panel > .step-card.is-motion-complete .step-index::after {
	          content: "";
	          position: absolute;
	          inset: -6px;
	          border: 1px solid rgba(52,199,89,.32);
	          border-radius: inherit;
	          pointer-events: none;
	          animation: workflowCompleteRing .48s ease-out both;
	        }

	        #workspace.workflow-motion-page .ai-progress-card {
	          position: relative;
	          overflow: hidden;
	        }

	        #workspace.workflow-motion-page .ai-progress-card.is-running::after {
	          content: "";
	          position: absolute;
	          inset: 0;
	          pointer-events: none;
	          background: linear-gradient(110deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.38) 42%, rgba(255,255,255,0) 66%);
	          opacity: .42;
	          transform: translateX(-120%);
	          animation: workflowProgressSweep 5.2s cubic-bezier(.45,0,.25,1) infinite;
	        }

	        #workspace.workflow-motion-page .ai-progress-fill {
	          position: relative;
	          overflow: hidden;
	        }

	        #workspace.workflow-motion-page .ai-progress-fill::after {
	          content: "";
	          position: absolute;
	          inset: 0;
	          background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.52), rgba(255,255,255,0));
	          opacity: .36;
	          transform: translateX(-100%);
	          animation: workflowProgressFillSheen 3.8s ease-in-out infinite;
	        }

	        #workspace.workflow-motion-page .viral-result-section,
	        #workspace.workflow-motion-page .viral-agent-panel > .result-card {
	          min-width: 0;
	          max-width: 100%;
	        }

	        .viral-result-section .viral-insight-card,
	        #workspace.workflow-motion-page .viral-result-section .viral-insight-card {
	          padding: 16px 18px !important;
	          border: 1px solid rgba(187, 218, 255, .62) !important;
	          border-radius: 14px !important;
	          background: rgba(255,255,255,.86) !important;
	          box-shadow: none !important;
	        }

	        #workspace.workflow-motion-page .viral-analysis-table {
	          width: 100%;
	          max-width: 100%;
	          table-layout: fixed;
	        }

	        #workspace.workflow-motion-page .viral-analysis-table th,
	        #workspace.workflow-motion-page .viral-analysis-table td,
	        #workspace.workflow-motion-page .viral-shot-title,
	        #workspace.workflow-motion-page .viral-shot-visual,
	        #workspace.workflow-motion-page .viral-shot-analysis {
	          min-width: 0;
	          overflow-wrap: anywhere;
	          word-break: break-word;
	        }

	        #workspace.workflow-motion-page .comment-result-panel {
	          min-width: 0;
	          overflow: hidden;
	        }

	        #workspace.workflow-motion-page .comment-result-panel .result-progress-slot {
	          min-width: 0;
	          overflow: hidden;
	        }

	        #workspace.workflow-motion-page .comment-result-panel .result-progress-slot .ai-progress-card {
	          width: 100%;
	          margin-left: 0;
	        }

	        #workspace.workflow-motion-page .comment-result-panel .result-progress-slot .ai-progress-head {
	          width: 100%;
	        }

	        #workspace.workflow-motion-page .comment-result-panel .result-progress-slot .ai-progress-inline-meta {
	          flex: 1 1 0;
	        }

	        #workspace.workflow-motion-page.motion-result-reveal .step-result,
	        #workspace.workflow-motion-page.motion-result-reveal .product-doc-file-input.is-complete,
	        #workspace.workflow-motion-page.motion-result-reveal .selected-doc-card.is-complete,
	        #workspace.workflow-motion-page.motion-result-reveal .comment-result-panel .result-card,
	        #workspace.workflow-motion-page.motion-result-reveal .viral-agent-panel > .result-card {
	          animation: workflowResultReveal .38s cubic-bezier(.2,.84,.22,1) both;
	          animation-delay: calc(var(--motion-index, 0) * 26ms);
	        }

	        #workspace.workflow-motion-page.motion-result-reveal .product-doc-file-input.is-complete,
	        #workspace.workflow-motion-page.motion-result-reveal .selected-doc-card.is-complete {
	          animation-name: workflowUploadSuccess;
	        }

	        @keyframes workflowStepEnter {
	          from {
	            opacity: .001;
	            transform: translate3d(0, 10px, 0) scale(.992);
	          }
	          to {
	            opacity: 1;
	            transform: translate3d(0, 0, 0) scale(1);
	          }
	        }

	        @keyframes workflowStepActivePulse {
	          0%, 100% {
	            box-shadow:
	              0 10px 20px rgba(var(--step-rgb, 8,119,255), .08),
	              0 0 0 0 rgba(0,122,255,.18),
	              inset 0 1px 0 rgba(255,255,255,.88);
	          }
	          50% {
	            box-shadow:
	              0 10px 20px rgba(var(--step-rgb, 8,119,255), .10),
	              0 0 0 7px rgba(0,122,255,.07),
	              inset 0 1px 0 rgba(255,255,255,.92);
	          }
	        }

	        @keyframes workflowCompleteRing {
	          from {
	            opacity: .72;
	            transform: scale(.78);
	          }
	          to {
	            opacity: 0;
	            transform: scale(1.28);
	          }
	        }

	        @keyframes workflowProgressSweep {
	          0% {
	            transform: translateX(-120%);
	          }
	          56%, 100% {
	            transform: translateX(120%);
	          }
	        }

	        @keyframes workflowProgressFillSheen {
	          0% {
	            transform: translateX(-100%);
	          }
	          100% {
	            transform: translateX(100%);
	          }
	        }

	        @keyframes workflowResultReveal {
	          from {
	            opacity: .001;
	            transform: translate3d(0, 8px, 0) scale(.996);
	            filter: saturate(.92);
	          }
	          to {
	            opacity: 1;
	            transform: translate3d(0, 0, 0) scale(1);
	            filter: saturate(1);
	          }
	        }

	        @keyframes workflowUploadSuccess {
	          0% {
	            transform: translate3d(0, 6px, 0) scale(.992);
	            box-shadow: 0 0 0 0 rgba(52,199,89,.18), inset 0 1px 0 rgba(255,255,255,.88);
	          }
	          58% {
	            transform: translate3d(0, -1px, 0) scale(1.004);
	            box-shadow: 0 0 0 6px rgba(52,199,89,.10), inset 0 1px 0 rgba(255,255,255,.92);
	          }
	          100% {
	            transform: translate3d(0, 0, 0) scale(1);
	          }
	        }

	        /* Global flat action-button system. Primary buttons follow the AI analysis CTA style. */
	        .button,
	        .mini-button,
	        .file-action,
	        .home-ai-send,
	        .login-submit-button,
	        .assistant-send-button,
	        .assistant-tools .assistant-send-button,
	        .sidebar-toggle,
	        .field-copy-button,
	        .workbench-entry-card,
	        .selected-doc-remove,
	        .script-doc-reupload,
	        .content-analysis-copy-button,
	        .runtime-failure-remove,
	        .local-video-delete-button,
	        .attachment-quick-filter,
	        .type-quick-filter,
	        .token-range-tab,
	        .token-activity-tab,
	        .model-provider-tab,
	        .filter-clear-button,
	        .logout-button,
	        .token-cell,
	        .row-more-menu button {
	          box-shadow: none !important;
	          text-shadow: none !important;
	          transform: none !important;
	          background-image: none !important;
	        }

	        .button::before,
	        .button::after,
	        .mini-button::before,
	        .mini-button::after,
	        .file-action::before,
	        .file-action::after,
	        .home-ai-send::before,
	        .home-ai-send::after,
	        .login-submit-button::before,
	        .login-submit-button::after,
	        .assistant-send-button::before,
	        .assistant-send-button::after,
	        .sidebar-toggle::before,
	        .sidebar-toggle::after,
	        .field-copy-button::before,
	        .field-copy-button::after,
	        .workbench-entry-card::before,
	        .workbench-entry-card::after,
	        .selected-doc-remove::before,
	        .selected-doc-remove::after,
	        .script-doc-reupload::before,
	        .script-doc-reupload::after,
	        .content-analysis-copy-button::before,
	        .content-analysis-copy-button::after,
	        .runtime-failure-remove::before,
	        .runtime-failure-remove::after,
	        .local-video-delete-button::before,
	        .local-video-delete-button::after,
	        .attachment-quick-filter::before,
	        .attachment-quick-filter::after,
	        .type-quick-filter::before,
	        .type-quick-filter::after {
	          display: none !important;
	        }

	        .button.primary,
	        .mini-button.primary,
	        .file-input.has-file .file-action,
	        .product-doc-actions .file-action,
	        .home-ai-send.is-ready,
	        .login-submit-button,
	        .assistant-send-button.is-ready,
	        .assistant-tools .assistant-send-button.is-ready,
	        .row-primary-action.primary {
	          color: #fff !important;
	          background: #0877ff !important;
	          border-color: #0877ff !important;
	          box-shadow: none !important;
	        }

	        .button.primary:hover,
	        .mini-button.primary:hover,
	        .file-input.has-file .file-action:hover,
	        .product-doc-actions .file-action:hover,
	        .home-ai-send.is-ready:hover,
	        .login-submit-button:hover,
	        .assistant-send-button.is-ready:hover,
	        .assistant-tools .assistant-send-button.is-ready:hover,
	        .row-primary-action.primary:hover {
	          color: #fff !important;
	          background: #0a84ff !important;
	          border-color: #0a84ff !important;
	          box-shadow: none !important;
	          transform: none !important;
	        }

	        .button.primary:active,
	        .mini-button.primary:active,
	        .file-input.has-file .file-action:active,
	        .product-doc-actions .file-action:active,
	        .home-ai-send.is-ready:active,
	        .login-submit-button:active,
	        .assistant-send-button.is-ready:active,
	        .assistant-tools .assistant-send-button.is-ready:active,
	        .row-primary-action.primary:active {
	          color: #fff !important;
	          background: #066ee8 !important;
	          border-color: #066ee8 !important;
	          box-shadow: none !important;
	          transform: none !important;
	        }

	        .button:not(.primary):not(.danger):not(.success),
	        .mini-button:not(.primary):not(.danger),
	        .file-action,
	        .assistant-send-button:not(.is-ready),
	        .assistant-tools .assistant-send-button:not(.is-ready),
	        .sidebar-toggle,
	        .field-copy-button,
	        .workbench-entry-card,
	        .attachment-quick-filter,
	        .type-quick-filter,
	        .token-range-tab,
	        .token-activity-tab,
	        .model-provider-tab,
	        .filter-clear-button,
	        .logout-button,
	        .row-more-menu button {
	          color: rgba(29,29,31,.82) !important;
	          background: rgba(255,255,255,.82) !important;
	          border-color: rgba(8,119,255,.22) !important;
	          box-shadow: none !important;
	        }

	        .button:not(.primary):not(.danger):not(.success):hover,
	        .mini-button:not(.primary):not(.danger):hover,
	        .file-action:hover,
	        .assistant-send-button:not(.is-ready):hover,
	        .assistant-tools .assistant-send-button:not(.is-ready):hover,
	        .sidebar-toggle:hover,
	        .field-copy-button:hover,
	        .workbench-entry-card:hover,
	        .attachment-quick-filter:hover,
	        .type-quick-filter:hover,
	        .token-range-tab:hover,
	        .token-activity-tab:hover,
	        .model-provider-tab:hover,
	        .filter-clear-button:hover,
	        .logout-button:hover,
	        .row-more-menu button:hover {
	          color: #0877ff !important;
	          background: rgba(238,248,255,.88) !important;
	          border-color: rgba(8,119,255,.30) !important;
	          box-shadow: none !important;
	          transform: none !important;
	        }

	        .selected-doc-remove,
	        .script-doc-reupload,
	        .content-analysis-copy-button,
	        .runtime-failure-remove,
	        .local-video-delete-button,
	        .selected-doc-remove:hover,
	        .script-doc-reupload:hover,
	        .content-analysis-copy-button:hover,
	        .runtime-failure-remove:hover,
	        .local-video-delete-button:hover {
	          box-shadow: none !important;
	          text-shadow: none !important;
	          transform: none !important;
	        }

	        .button.danger,
	        .mini-button.danger,
	        .row-more-menu button.danger {
	          color: var(--rose) !important;
	          background: rgba(255,255,255,.82) !important;
	          border-color: rgba(255,55,95,.26) !important;
	          box-shadow: none !important;
	        }

	        .button.success {
	          color: var(--green) !important;
	          background: rgba(255,255,255,.82) !important;
	          border-color: rgba(35,177,77,.26) !important;
	          box-shadow: none !important;
	        }

	        .button.active-soft,
	        .mini-button.active-soft,
	        .script-action-row .button.active-soft,
	        .attachment-quick-filter.active,
	        .type-quick-filter.active,
	        .token-range-tab.active,
	        .token-activity-tab.active,
	        .model-provider-tab.active {
	          color: #0877ff !important;
	          background: rgba(238,248,255,.92) !important;
	          border-color: rgba(8,119,255,.34) !important;
	          box-shadow: none !important;
	        }

	        .button.icon-action.active-soft,
	        .mini-button.icon-action.active-soft,
	        .home-ai-assistant-action.is-active {
	          color: #0877ff !important;
	          background: rgba(238,248,255,.92) !important;
	          border-color: rgba(8,119,255,.34) !important;
	          box-shadow: none !important;
	        }

	        .button.icon-action.active-soft .icon,
	        .mini-button.icon-action.active-soft .icon,
	        .home-ai-assistant-action.is-active .icon {
	          color: inherit !important;
	          stroke: currentColor !important;
	        }

	        .token-cell.selected {
	          box-shadow: none !important;
	          outline-color: rgba(8,119,255,.82) !important;
	          outline-offset: 2px !important;
	        }

	        .system-token-rank-card.token-activity-card,
	        .modal.token-usage-modal .system-token-rank-card.token-activity-card {
	          padding: 0 !important;
	          border: 0 !important;
	          border-radius: 0 !important;
	          background: transparent !important;
	          box-shadow: none !important;
	          overflow: visible !important;
	        }

	        .comment-generator-layout:not(:has(.comment-result-panel)) {
	          grid-template-columns: minmax(0, 1fr) !important;
	        }

	        .button:disabled,
	        .button[disabled],
	        .mini-button:disabled,
	        .mini-button[disabled],
	        .home-ai-send:disabled,
	        .assistant-send-button:disabled,
	        .login-submit-button[disabled],
	        .row-primary-action.disabled {
	          color: rgba(60,60,67,.42) !important;
	          background: rgba(118,118,128,.10) !important;
	          border-color: rgba(60,60,67,.10) !important;
	          box-shadow: none !important;
	          cursor: not-allowed !important;
	        }

	        /* Luxury beauty homepage preview: pearl surface, champagne hairlines, scoped to the first screen only. */
	        .luxury-home-preview:not(.home-chat-active) {
	          --luxury-ink: #161412;
	          --luxury-muted: rgba(42,39,35,.62);
	          --luxury-pearl: #fbfaf7;
	          --luxury-champagne: #c6a15f;
	          --luxury-rose: #c9898b;
	          --luxury-sage: #9eb8aa;
	          position: relative !important;
	          isolation: isolate !important;
	          overflow: hidden !important;
	          background:
	            linear-gradient(180deg, #ffffff 0%, var(--luxury-pearl) 46%, #f7f6f2 100%),
	            repeating-linear-gradient(116deg, rgba(198,161,95,.045) 0 1px, transparent 1px 18px) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active)::before,
	        .luxury-home-preview:not(.home-chat-active)::after {
	          content: "";
	          position: absolute;
	          pointer-events: none;
	          z-index: 0;
	        }

	        .luxury-home-preview:not(.home-chat-active)::before {
	          width: 92%;
	          height: clamp(260px, 36vh, 430px);
	          left: 4%;
	          top: clamp(86px, 12vh, 150px);
	          opacity: .72;
	          background:
	            linear-gradient(104deg,
	              rgba(255,255,255,0) 0 18%,
	              rgba(255,255,255,.72) 30%,
	              rgba(226,211,188,.30) 42%,
	              rgba(201,137,139,.12) 53%,
	              rgba(158,184,170,.13) 64%,
	              rgba(255,255,255,0) 82%),
	            linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
	          transform: translate3d(0, 0, 0) skewY(-7deg);
	          animation: luxuryPearlVeil 18s cubic-bezier(.32,.72,.18,1) infinite alternate;
	        }

	        .luxury-home-preview:not(.home-chat-active)::after {
	          left: clamp(28px, 11vw, 190px);
	          right: clamp(28px, 11vw, 190px);
	          top: clamp(344px, 42vh, 560px);
	          height: 1px;
	          background: linear-gradient(90deg,
	            rgba(22,20,18,0),
	            rgba(22,20,18,.18),
	            rgba(198,161,95,.46),
	            rgba(158,184,170,.28),
	            rgba(22,20,18,0));
	          opacity: .58;
	          transform-origin: center;
	          animation: luxuryHairlinePulse 6.8s cubic-bezier(.32,.72,.18,1) infinite;
	        }

	        .luxury-home-preview:not(.home-chat-active) > * {
	          position: relative;
	          z-index: 1;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-console:not(.is-chat-mode) {
	          width: min(1180px, 100%) !important;
	          gap: 32px !important;
	          margin-top: clamp(164px, 24vh, 286px) !important;
	          margin-bottom: 0 !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-console:not(.is-chat-mode) {
	          animation: luxuryHeroSettle .62s cubic-bezier(.16,1,.3,1) both;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-head {
	          width: 90% !important;
	          justify-self: center !important;
	          justify-content: space-between !important;
	          gap: clamp(32px, 7vw, 104px) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-title {
	          flex: 1 1 auto !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ip-mascot {
	          display: grid !important;
	          place-items: center !important;
	          width: clamp(230px, 25vw, 360px) !important;
	          min-height: clamp(132px, 15vw, 194px) !important;
	          justify-self: end !important;
	          margin-right: clamp(0px, 1.4vw, 18px) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-kicker {
	          min-height: 30px !important;
	          padding-inline: 12px !important;
	          color: rgba(22,20,18,.76) !important;
	          border-color: rgba(198,161,95,.34) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,244,235,.72)),
	            rgba(255,255,255,.74) !important;
	          box-shadow:
	            inset 0 1px 0 rgba(255,255,255,.88),
	            0 8px 24px rgba(67,51,25,.045) !important;
	          letter-spacing: 0 !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-title h3 {
	          color: var(--luxury-ink) !important;
	          text-shadow: 0 1px 0 rgba(255,255,255,.62);
	          text-wrap: balance;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-title p {
	          color: var(--luxury-muted) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-composer {
	          width: 90% !important;
	          justify-self: center !important;
	          min-height: 248px !important;
	          padding: 24px 28px 20px !important;
	          border-color: rgba(198,161,95,.34) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,248,242,.88)),
	            linear-gradient(112deg, rgba(198,161,95,.10), rgba(255,255,255,0) 34%, rgba(201,137,139,.075) 64%, rgba(158,184,170,.085)) !important;
	          box-shadow:
	            0 0 0 1px rgba(255,255,255,.80),
	            0 28px 86px rgba(54,43,29,.085),
	            inset 0 1px 0 rgba(255,255,255,.96) !important;
	          animation: luxuryComposerSettle .68s cubic-bezier(.16,1,.3,1) .04s both;
	          overflow: hidden !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-composer textarea {
	          min-height: 154px !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-composer::before {
	          content: "";
	          position: absolute;
	          inset: 1px;
	          z-index: 0;
	          border-radius: calc(30px - 1px);
	          pointer-events: none;
	          background:
	            linear-gradient(108deg,
	              rgba(255,255,255,0) 0 36%,
	              rgba(255,255,255,.52) 46%,
	              rgba(255,255,255,0) 58%),
	            linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
	          opacity: .54;
	          transform: translate3d(-38%, 0, 0);
	          animation: luxurySurfaceGleam 9.4s cubic-bezier(.16,1,.3,1) infinite;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-composer::after {
	          background:
	            conic-gradient(
	              from var(--home-composer-light-angle, 0deg),
	              rgba(22,20,18,0) 0deg,
	              rgba(22,20,18,.28) 38deg,
	              rgba(198,161,95,.58) 94deg,
	              rgba(255,255,255,.72) 148deg,
	              rgba(201,137,139,.38) 216deg,
	              rgba(158,184,170,.42) 286deg,
	              rgba(22,20,18,0) 360deg
	            ) !important;
	          opacity: .54 !important;
	          filter: saturate(.96) !important;
	          animation-duration: 11.2s !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-composer:hover,
	        .luxury-home-preview:not(.home-chat-active) .home-ai-composer:focus-within {
	          border-color: rgba(198,161,95,.46) !important;
	          box-shadow:
	            0 0 0 1px rgba(255,255,255,.84),
	            0 32px 96px rgba(54,43,29,.105),
	            inset 0 1px 0 rgba(255,255,255,.98) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-composer:hover::after,
	        .luxury-home-preview:not(.home-chat-active) .home-ai-composer:focus-within::after {
	          opacity: .68 !important;
	          animation-duration: 8.4s !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-suggestion {
	          color: rgba(22,20,18,.68) !important;
	          border-color: rgba(198,161,95,.22) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,248,242,.72)),
	            rgba(255,255,255,.70) !important;
	          box-shadow: inset 0 1px 0 rgba(255,255,255,.84) !important;
	          transition:
	            color .28s cubic-bezier(.16,1,.3,1),
	            border-color .28s cubic-bezier(.16,1,.3,1),
	            background .28s cubic-bezier(.16,1,.3,1) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .home-ai-suggestion:hover {
	          color: var(--luxury-ink) !important;
	          border-color: rgba(198,161,95,.42) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,243,233,.82)),
	            rgba(255,255,255,.82) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .workbench-entry-card {
	          border-color: rgba(198,161,95,.25) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,248,242,.82)),
	            linear-gradient(135deg, rgba(198,161,95,.075), rgba(255,255,255,0) 48%, rgba(var(--entry-rgb, 8,119,255), .035)) !important;
	          box-shadow:
	            0 18px 52px rgba(54,43,29,.052),
	            inset 0 1px 0 rgba(255,255,255,.92) !important;
	          opacity: 0;
	          animation: luxuryCardReveal .58s cubic-bezier(.16,1,.3,1) both;
	          animation-delay: calc(var(--luxury-card-index, 0) * 92ms + 160ms);
	          transition:
	            transform .42s cubic-bezier(.16,1,.3,1),
	            border-color .32s cubic-bezier(.16,1,.3,1),
	            background .32s cubic-bezier(.16,1,.3,1),
	            box-shadow .32s cubic-bezier(.16,1,.3,1) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .workbench-entry-card:nth-child(1) { --luxury-card-index: 0; }
	        .luxury-home-preview:not(.home-chat-active) .workbench-entry-card:nth-child(2) { --luxury-card-index: 1; }
	        .luxury-home-preview:not(.home-chat-active) .workbench-entry-card:nth-child(3) { --luxury-card-index: 2; }

	        .luxury-home-preview:not(.home-chat-active) .workbench-entry-card::after {
	          display: block !important;
	          content: "" !important;
	          position: absolute;
	          left: 18px;
	          right: 18px;
	          top: 0;
	          height: 1px;
	          border-radius: 999px;
	          background: linear-gradient(90deg,
	            rgba(198,161,95,0),
	            rgba(198,161,95,.62),
	            rgba(255,255,255,.86),
	            rgba(158,184,170,.36),
	            rgba(198,161,95,0));
	          opacity: .56;
	          transform: translate3d(-16%, 0, 0);
	          animation: luxuryCardEdge 7.2s cubic-bezier(.16,1,.3,1) infinite;
	          pointer-events: none;
	        }

	        .luxury-home-preview:not(.home-chat-active) .workbench-entry-card:hover {
	          transform: translateY(-3px) !important;
	          border-color: rgba(198,161,95,.38) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,248,241,.88)),
	            linear-gradient(135deg, rgba(198,161,95,.10), rgba(255,255,255,0) 48%, rgba(var(--entry-rgb, 8,119,255), .045)) !important;
	          box-shadow:
	            0 22px 64px rgba(54,43,29,.075),
	            inset 0 1px 0 rgba(255,255,255,.96) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .workbench-entry-icon {
	          border-color: rgba(198,161,95,.28) !important;
	          background:
	            linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,243,233,.78)),
	            rgba(255,255,255,.72) !important;
	          color: rgb(var(--entry-rgb, 8,119,255)) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .workbench-entry-card .button.primary {
	          color: #fff !important;
	          background: #171512 !important;
	          border-color: #171512 !important;
	          box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
	        }

	        .luxury-home-preview:not(.home-chat-active) .workbench-entry-card .chip {
	          background: rgba(255,255,255,.72) !important;
	          border-color: rgba(198,161,95,.20) !important;
	          box-shadow: none !important;
	        }

	        @keyframes luxuryPearlVeil {
	          from { transform: translate3d(-1.2%, -1%, 0) skewY(-7deg); opacity: .56; }
	          to { transform: translate3d(1.2%, 1.4%, 0) skewY(-7deg); opacity: .78; }
	        }

	        @keyframes luxuryHairlinePulse {
	          0%, 100% { opacity: .32; transform: scaleX(.86); }
	          50% { opacity: .68; transform: scaleX(1); }
	        }

	        @keyframes luxuryHeroSettle {
	          from { opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(3px); }
	          to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
	        }

	        @keyframes luxuryComposerSettle {
	          from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.994); }
	          to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
	        }

	        @keyframes luxurySurfaceGleam {
	          0%, 52% { opacity: 0; transform: translate3d(-42%, 0, 0); }
	          64% { opacity: .56; }
	          100% { opacity: 0; transform: translate3d(42%, 0, 0); }
	        }

	        @keyframes luxuryCardReveal {
	          from { opacity: 0; filter: blur(3px) saturate(.92); }
	          to { opacity: 1; filter: blur(0) saturate(1); }
	        }

	        @keyframes luxuryCardEdge {
	          0%, 100% { opacity: .34; transform: translate3d(-16%, 0, 0); }
	          50% { opacity: .66; transform: translate3d(16%, 0, 0); }
	        }

	        @media (max-width: 760px) {
	          .luxury-home-preview:not(.home-chat-active) .home-ai-console:not(.is-chat-mode) {
	            width: 100% !important;
	            gap: 22px !important;
	            margin-top: clamp(72px, 14vh, 124px) !important;
	          }

	          .luxury-home-preview:not(.home-chat-active) .home-ai-head {
	            width: 100% !important;
	            justify-content: flex-start !important;
	          }

	          .luxury-home-preview:not(.home-chat-active) .home-ip-mascot {
	            display: none !important;
	          }

	          .luxury-home-preview:not(.home-chat-active) .home-ai-composer {
	            width: 100% !important;
	            min-height: 188px !important;
	            padding: 18px 18px 14px !important;
	          }

	          .luxury-home-preview:not(.home-chat-active) .home-ai-composer textarea {
	            min-height: 106px !important;
	          }

	          .luxury-home-preview:not(.home-chat-active)::before {
	            left: -18%;
	            width: 136%;
	            top: 54px;
	            height: 260px;
	            opacity: .54;
	          }

	          .luxury-home-preview:not(.home-chat-active)::after {
	            left: 24px;
	            right: 24px;
	            top: 330px;
	          }
	        }

	        @media (prefers-reduced-motion: reduce) {
	          body:not(.login-active):not(.home-screen) .main::before,
	          body:not(.login-active):not(.home-screen) .main::after,
	          .luxury-home-preview:not(.home-chat-active)::before,
	          .luxury-home-preview:not(.home-chat-active)::after,
	          .luxury-home-preview:not(.home-chat-active) .home-ai-console:not(.is-chat-mode),
	          .luxury-home-preview:not(.home-chat-active) .home-ip-stage,
	          .luxury-home-preview:not(.home-chat-active) .home-ip-stage img,
	          .luxury-home-preview:not(.home-chat-active) .home-ip-glow,
	          .luxury-home-preview:not(.home-chat-active) .home-ai-composer,
	          .luxury-home-preview:not(.home-chat-active) .home-ai-composer::before,
	          .luxury-home-preview:not(.home-chat-active) .home-ai-composer::after,
	          .luxury-home-preview:not(.home-chat-active) .workbench-entry-card,
	          .luxury-home-preview:not(.home-chat-active) .workbench-entry-card::after {
	            animation: none !important;
	          }

	          .luxury-home-preview:not(.home-chat-active) .workbench-entry-card {
	            opacity: 1 !important;
	            filter: none !important;
	          }
	        }

	        /* Global form-control radius normalization. Inputs, filters, and selects use 10px corners. */
	        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
	        textarea,
	        select,
	        .select-trigger,
	        .date-input-shell input,
	        .file-input,
	        .product-doc-file-input,
	        .link-input,
	        .search-input,
	        .search-field,
	        .search-box,
	        .filter-input,
	        .filter-select,
	        .attachment-quick-filter,
	        .type-quick-filter,
	        .token-range-tab,
	        .token-activity-tab,
	        .model-provider-tab,
	        .home-ai-composer,
	        .home-ai-composer textarea,
	        .home-ai-suggestion {
	          border-radius: 10px !important;
	        }

	        .select-menu {
	          border-radius: 10px !important;
	        }

	        .select-option {
	          border-radius: 8px !important;
	        }

	        .date-picker-panel {
	          border-radius: 10px !important;
	        }

	        .home-ai-send.is-ready:not(:disabled) {
	          color: #fff !important;
	          background: #0877ff !important;
	          border-color: #0877ff !important;
	        }

	        input:focus-visible,
	        textarea:focus-visible,
	        select:focus-visible,
	        button:focus-visible,
	        .button:focus-visible,
	        .mini-button:focus-visible,
	        .file-action:focus-visible,
	        .select-trigger:focus-visible,
	        .selected-doc-remove:focus-visible,
	        .home-ai-suggestion:focus-visible,
	        .home-ai-send:focus-visible,
	        .nav-button:focus-visible,
	        .mobile-tab-button:focus-visible,
	        .mobile-more-item:focus-visible {
	          outline: 2px solid rgba(0,122,255,.24) !important;
	          outline-offset: 2px !important;
	          box-shadow:
	            0 0 0 3px rgba(0,122,255,.08),
	            inset 0 1px 0 rgba(255,255,255,.90) !important;
	        }

	        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus-visible,
	        textarea:focus-visible,
	        select:focus-visible,
	        .select-trigger:focus-visible,
	        .search-input:focus-visible,
	        .filter-input:focus-visible,
	        .link-input:focus-visible,
	        .date-input-shell input:focus-visible {
	          border-color: rgba(8,119,255,.32) !important;
	          outline: 1px solid rgba(8,119,255,.24) !important;
	          outline-offset: 2px !important;
	          box-shadow:
	            0 0 0 3px rgba(8,119,255,.07),
	            inset 0 1px 0 rgba(255,255,255,.92) !important;
	        }

	        .home-ai-composer textarea:focus-visible {
	          outline: none !important;
	          box-shadow: none !important;
	        }

	        .select-shell .native-select {
	          tab-size: 0;
	        }

	        @media (max-width: 760px) {
	          .workbench-home.home-chat-active {
	            padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
	          }

	          .create-agent-layout,
	          .rewrite-full-layout,
	          .comment-generator-layout {
	            padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
	          }

	          .home-ai-console.is-chat-mode .home-ai-table-wrap {
	            display: block !important;
	            border: 0 !important;
	            border-radius: 0 !important;
	            background: transparent !important;
	          }

	          .home-ai-console.is-chat-mode .home-ai-table,
	          .home-ai-console.is-chat-mode .home-ai-table thead,
	          .home-ai-console.is-chat-mode .home-ai-table tbody,
	          .home-ai-console.is-chat-mode .home-ai-table tr,
	          .home-ai-console.is-chat-mode .home-ai-table th,
	          .home-ai-console.is-chat-mode .home-ai-table td {
	            display: block !important;
	            width: 100% !important;
	          }

	          .home-ai-console.is-chat-mode .home-ai-table thead {
	            position: absolute !important;
	            width: 1px !important;
	            height: 1px !important;
	            overflow: hidden !important;
	            clip: rect(0 0 0 0) !important;
	          }

	          .home-ai-console.is-chat-mode .home-ai-table tbody {
	            display: grid !important;
	            gap: 10px !important;
	          }

	          .home-ai-console.is-chat-mode .home-ai-table tr {
	            display: grid !important;
	            gap: 8px !important;
	            padding: 12px !important;
	            border: 1px solid rgba(60,60,67,.10) !important;
	            border-radius: 14px !important;
	            background: rgba(255,255,255,.78) !important;
	            box-shadow: inset 0 1px 0 rgba(255,255,255,.86) !important;
	          }

	          .home-ai-console.is-chat-mode .home-ai-table td {
	            display: grid !important;
	            grid-template-columns: minmax(72px, 28%) minmax(0, 1fr) !important;
	            gap: 9px !important;
	            padding: 0 !important;
	            border: 0 !important;
	            font-size: 13px !important;
	            line-height: 1.58 !important;
	          }

	          .home-ai-console.is-chat-mode .home-ai-table td::before {
	            content: attr(data-label);
	            color: rgba(60,60,67,.62);
	            font-size: 12px;
	            font-weight: 800;
	            line-height: 1.5;
	          }

	          .product-doc-actions {
	            display: grid !important;
	            grid-template-columns: 1fr 1fr !important;
	            width: 100% !important;
	          }

	          .product-doc-actions .file-action {
	            justify-content: center;
	            width: 100% !important;
	          }

	          .selected-doc-grid {
	            grid-template-columns: 1fr !important;
	          }

	          #workspace.workflow-motion-page.motion-page-enter .flow > .step-card,
	          #workspace.workflow-motion-page.motion-page-enter .viral-agent-panel > .step-card,
	          #workspace.workflow-motion-page.motion-page-enter .comment-result-panel,
	          #workspace.workflow-motion-page.motion-page-enter .viral-agent-panel > .result-card {
	            animation-duration: .26s;
	            animation-delay: calc(var(--motion-index, 0) * 22ms);
	          }

	          #workspace.workflow-motion-page.motion-result-reveal .step-result,
	          #workspace.workflow-motion-page.motion-result-reveal .product-doc-file-input.is-complete,
	          #workspace.workflow-motion-page.motion-result-reveal .selected-doc-card.is-complete,
	          #workspace.workflow-motion-page.motion-result-reveal .comment-result-panel .result-card,
	          #workspace.workflow-motion-page.motion-result-reveal .viral-agent-panel > .result-card {
	            animation-duration: .30s;
	            animation-delay: calc(var(--motion-index, 0) * 18ms);
	          }
	        }

	        @media (prefers-reduced-motion: reduce) {
	          #workspace.workflow-motion-page *,
	          #workspace.workflow-motion-page *::before,
	          #workspace.workflow-motion-page *::after {
	            animation: none !important;
	            transition-duration: .01ms !important;
	            scroll-behavior: auto !important;
	          }

		          #workspace.workflow-motion-page .ai-progress-card::after,
		          #workspace.workflow-motion-page .ai-progress-fill::after,
		          #workspace.workflow-motion-page .step-index::after {
		            display: none !important;
		          }
		        }

		        /* Home chat answer width and user/assistant spacing. */
		        .home-chat-shell {
		          width: 100% !important;
		        }

		        @media (min-width: 1121px) {
		          .home-chat-shell {
		            grid-template-columns: minmax(176px, 210px) minmax(0, 1fr) !important;
		            gap: clamp(24px, 4vw, 72px) !important;
		          }

		          .home-chat-shell .home-ai-console.is-chat-mode {
		            width: 100% !important;
		            max-width: none !important;
		          }
		        }

			        .home-ai-console.is-chat-mode .home-ai-thread,
			        .home-ai-console.is-chat-mode .home-ai-composer {
			          width: 100% !important;
			          max-width: none !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-composer {
			          min-height: 92px !important;
			          padding: 11px 16px 10px !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-composer textarea {
			          min-height: 40px !important;
			          padding-right: 58px !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-input-shell,
			        .home-ai-console.is-chat-mode .home-ai-input-highlight {
			          min-height: 40px !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-input-highlight {
			          padding-right: 58px !important;
			          box-sizing: border-box !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-composer textarea,
			        .home-ai-console.is-chat-mode .home-ai-input-highlight {
			          line-height: 1.5 !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-composer-foot {
			          position: absolute !important;
			          right: 16px !important;
			          bottom: 10px !important;
			          margin-top: 0 !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-composer::before {
			          height: clamp(52px, 8vh, 88px) !important;
			        }

			        .home-ai-console.is-chat-mode .assistant-message:not(.user) {
			          justify-self: stretch !important;
			          width: 100% !important;
			          max-width: none !important;
			        }

			        .home-ai-console.is-chat-mode .assistant-message,
			        .home-ai-console.is-chat-mode .home-ai-message-content,
			        .home-ai-console.is-chat-mode .home-ai-message-content p,
			        .home-ai-console.is-chat-mode .home-ai-list,
			        .home-ai-console.is-chat-mode .home-ai-list li,
			        .home-ai-console.is-chat-mode .home-ai-table,
			        .home-ai-console.is-chat-mode .home-ai-table th,
			        .home-ai-console.is-chat-mode .home-ai-table td {
			          font-family: var(--font-system) !important;
			          font-size: 16px !important;
			          font-weight: 400 !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-message-content {
			          line-height: 1.72 !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-message-content strong,
			        .home-ai-console.is-chat-mode .home-ai-table strong,
			        .home-ai-console.is-chat-mode .home-ai-list strong {
			          font-family: var(--font-system) !important;
			          font-size: 16px !important;
			          font-weight: 600 !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-table th {
			          font-weight: 600 !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-heading {
			          margin: 10px 0 4px !important;
			          font-family: var(--font-system) !important;
			          line-height: 1.34 !important;
			          font-weight: 600 !important;
			          color: #1d1d1f !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-heading-1 {
			          font-size: 24px !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-heading-2 {
			          font-size: 22px !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-heading-3 {
			          font-size: 20px !important;
			        }

			        .home-ai-console.is-chat-mode .home-ai-heading-4 {
			          font-size: 18px !important;
			        }

			        .home-ai-assistant-actions {
			          display: inline-flex;
			          align-items: center;
			          justify-content: flex-start;
			          gap: 18px;
			          margin-top: 12px;
			        }

			        .home-ai-assistant-action {
			          width: 24px;
			          height: 24px;
			          min-width: 24px;
			          min-height: 24px;
			          display: grid;
			          place-items: center;
			          padding: 0;
			          border: 0;
			          border-radius: 8px;
			          color: rgba(60, 60, 67, .72);
			          background: transparent;
			          box-shadow: none;
			        }

			        .home-ai-assistant-action:hover,
			        .home-ai-assistant-action.is-active {
			          color: var(--accent);
			          background: rgba(0, 122, 255, .08);
			        }

			        .home-ai-assistant-action .icon {
			          width: 19px;
			          height: 19px;
			          stroke-width: 2.2;
			        }

			        @media (min-width: 761px) {
			          .home-ai-console.is-chat-mode .home-ai-table {
			            line-height: 1.78 !important;
			          }

			          .home-ai-console.is-chat-mode .home-ai-table th,
			          .home-ai-console.is-chat-mode .home-ai-table td {
			            padding: 14px 16px !important;
			            line-height: 1.82 !important;
			          }

			          .home-ai-console.is-chat-mode .home-ai-table th {
			            padding-top: 12px !important;
			            padding-bottom: 12px !important;
			          }

			          .home-ai-console.is-chat-mode .home-ai-table td {
			            vertical-align: top !important;
			          }

			          .home-ai-console.is-chat-mode .home-ai-table-wrap {
			            border-radius: 14px !important;
			          }
			        }

			        .home-ai-console.is-chat-mode .assistant-message.user + .assistant-message:not(.user) {
			          margin-top: clamp(18px, 2.4vh, 32px) !important;
			        }

			        .home-ai-console.is-chat-mode .assistant-message:not(.user) + .assistant-message.user {
			          margin-top: clamp(28px, 3.2vh, 44px) !important;
			        }

		        .home-ai-console.is-chat-mode .assistant-message.user {
		          justify-self: end !important;
		          display: grid !important;
		          justify-items: end !important;
		          gap: 10px !important;
		          width: fit-content !important;
		          max-width: min(1000px, calc(100% - 24px)) !important;
		          padding: 0 !important;
		          border: 0 !important;
		          border-radius: 0 !important;
		          background: transparent !important;
		          box-shadow: none !important;
		        }

		        .home-ai-console.is-chat-mode .assistant-message.user .home-ai-message-content {
		          width: fit-content !important;
		          max-width: 100% !important;
		          padding: 14px 24px !important;
		          border-radius: 22px !important;
		          background: rgba(118, 118, 128, .12) !important;
		          color: #1d1d1f !important;
		          font-size: 16px !important;
		          line-height: 1.62 !important;
		          font-weight: 700 !important;
		          box-shadow: none !important;
		          overflow-wrap: anywhere;
		          word-break: break-word;
		        }

		        .home-ai-console.is-chat-mode .assistant-message.user .home-ai-message-content p {
		          margin: 0;
		        }

		        .home-ai-user-actions {
		          display: inline-flex;
		          align-items: center;
		          justify-content: flex-end;
		          gap: 18px;
		          padding-right: 8px;
		        }

		        .home-ai-user-action {
		          width: 24px;
		          height: 24px;
		          min-width: 24px;
		          min-height: 24px;
		          display: grid;
		          place-items: center;
		          padding: 0;
		          border: 0;
		          border-radius: 8px;
		          color: rgba(60, 60, 67, .72);
		          background: transparent;
		          box-shadow: none;
		        }

		        .home-ai-user-action:hover {
		          color: var(--accent);
		          background: rgba(0, 122, 255, .08);
		        }

			        .home-ai-user-action .icon {
			          width: 19px;
			          height: 19px;
			          stroke-width: 2.2;
			        }

			        .home-ai-console.is-chat-mode .assistant-message.user .home-ai-message-content {
			          font-family: var(--font-system) !important;
			          font-size: 16px !important;
			          font-weight: 400 !important;
			        }

			        .home-ai-console.is-chat-mode .assistant-message.user .home-ai-message-content strong {
			          font-family: var(--font-system) !important;
			          font-size: 16px !important;
			          font-weight: 600 !important;
			        }

			        @media (max-width: 760px) {
			          .home-ai-console.is-chat-mode .assistant-message.user {
		            width: fit-content !important;
		            max-width: 88% !important;
		          }

			          .home-ai-console.is-chat-mode .assistant-message.user .home-ai-message-content {
			            padding: 11px 14px !important;
			            border-radius: 18px !important;
			            line-height: 1.58 !important;
			          }

			          .home-ai-user-actions {
			            gap: 14px;
			            padding-right: 4px;
			          }

			          .home-ai-console.is-chat-mode .home-ai-composer {
			            min-height: 77px !important;
			            padding: 9px 12px 8px !important;
			          }

			          .home-ai-console.is-chat-mode .home-ai-composer textarea {
			            min-height: 35px !important;
			            padding-right: 52px !important;
			          }

			          .home-ai-console.is-chat-mode .home-ai-input-shell,
			          .home-ai-console.is-chat-mode .home-ai-input-highlight {
			            min-height: 35px !important;
			          }

			          .home-ai-console.is-chat-mode .home-ai-input-highlight {
			            padding-right: 52px !important;
			          }

			          .home-ai-console.is-chat-mode .home-ai-composer-foot {
			            right: 12px !important;
			            bottom: 8px !important;
			          }
			        }

			        /* Keep the visible prompt highlight layer exactly aligned with the transparent textarea text. */
			        .home-ai-composer {
			          --home-ai-input-font-size: 16px;
			          --home-ai-input-line-height: 1.65;
			          --home-ai-input-pad-left: 14px;
			          --home-ai-input-pad-right: 8px;
			        }

			        .home-ai-composer textarea,
			        .home-ai-input-highlight {
			          box-sizing: border-box !important;
			          font-size: var(--home-ai-input-font-size) !important;
			          line-height: var(--home-ai-input-line-height) !important;
			          padding-left: var(--home-ai-input-pad-left) !important;
			          padding-right: var(--home-ai-input-pad-right) !important;
			          letter-spacing: 0 !important;
			        }

			        .home-ai-input-highlight {
			          padding-top: 0 !important;
			          padding-bottom: 0 !important;
			        }

				        .home-ai-composer textarea::selection {
				          color: #0877ff !important;
				          -webkit-text-fill-color: #0877ff !important;
				          background: transparent !important;
				        }

				        .home-ai-paste-token.is-native-selected {
				          color: transparent !important;
				          -webkit-text-fill-color: transparent !important;
				        }

				        .home-ai-console.is-chat-mode .home-ai-composer {
				          --home-ai-input-line-height: 1.5;
				          --home-ai-input-pad-right: 58px;
				          min-height: 92px !important;
				          padding: 11px 16px 10px !important;
				        }

				        .home-ai-console.is-chat-mode .home-ai-composer textarea,
				        .home-ai-console.is-chat-mode .home-ai-input-shell,
				        .home-ai-console.is-chat-mode .home-ai-input-highlight {
				          min-height: 40px !important;
				        }

				        .home-ai-console.is-chat-mode .home-ai-composer-foot {
				          position: absolute !important;
				          right: 16px !important;
				          bottom: 10px !important;
				          margin-top: 0 !important;
				        }

				        @media (max-width: 760px) {
				          .home-ai-console.is-chat-mode .home-ai-composer {
				            --home-ai-input-pad-right: 52px;
				            min-height: 77px !important;
				            padding: 9px 12px 8px !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-composer textarea,
				          .home-ai-console.is-chat-mode .home-ai-input-shell,
				          .home-ai-console.is-chat-mode .home-ai-input-highlight {
				            min-height: 35px !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-composer-foot {
				            right: 12px !important;
				            bottom: 8px !important;
				          }
				        }

				        .home-ai-console.is-chat-mode .assistant-message.user,
				        .home-ai-console.is-chat-mode .assistant-message.user .home-ai-message-content,
				        .home-ai-console.is-chat-mode .assistant-message.user .home-ai-message-content p {
				          font-family: var(--font-system) !important;
				          font-size: 16px !important;
				          font-weight: 400 !important;
				          letter-spacing: 0 !important;
				        }

				        /* AI answer tables: give the title column enough room before wrapping. */
				        @media (min-width: 761px) {
				          .home-ai-console.is-chat-mode .home-ai-table-wrap {
				            max-width: 100% !important;
				            overflow-x: auto !important;
				            overflow-y: hidden !important;
				            scrollbar-gutter: stable !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table {
				            width: max-content !important;
				            min-width: 100% !important;
				            table-layout: auto !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table th:first-child,
				          .home-ai-console.is-chat-mode .home-ai-table td:first-child {
				            width: clamp(156px, 15vw, 230px) !important;
				            min-width: clamp(156px, 15vw, 230px) !important;
				            max-width: 280px !important;
				            white-space: nowrap !important;
				            word-break: keep-all !important;
				            overflow-wrap: normal !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table td:first-child {
				            font-weight: 600 !important;
				          }
				        }

				        @media (max-width: 760px) {
				          .home-ai-console.is-chat-mode .home-ai-table-wrap {
				            overflow-x: visible !important;
				            overflow-y: visible !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table th:first-child,
				          .home-ai-console.is-chat-mode .home-ai-table td:first-child {
				            width: 100% !important;
				            min-width: 0 !important;
				            max-width: none !important;
				            white-space: normal !important;
				            word-break: normal !important;
				            overflow-wrap: anywhere !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table td::before {
				            min-width: 88px !important;
				            white-space: nowrap !important;
				            word-break: keep-all !important;
				          }
				        }

				        /* AI chat output typography: keep generated content compact at 14px. */
				        .home-ai-console.is-chat-mode .assistant-message,
				        .home-ai-console.is-chat-mode .assistant-message.user,
				        .home-ai-console.is-chat-mode .assistant-message:not(.user),
				        .home-ai-console.is-chat-mode .assistant-message.user .home-ai-message-content,
				        .home-ai-console.is-chat-mode .assistant-message.user .home-ai-message-content p,
				        .home-ai-console.is-chat-mode .home-ai-message-content,
				        .home-ai-console.is-chat-mode .home-ai-message-content p,
				        .home-ai-console.is-chat-mode .home-ai-message-content li,
				        .home-ai-console.is-chat-mode .home-ai-message-content strong,
				        .home-ai-console.is-chat-mode .home-ai-list,
				        .home-ai-console.is-chat-mode .home-ai-list li,
				        .home-ai-console.is-chat-mode .home-ai-list strong,
				        .home-ai-console.is-chat-mode .home-ai-table,
				        .home-ai-console.is-chat-mode .home-ai-table th,
				        .home-ai-console.is-chat-mode .home-ai-table td,
				        .home-ai-console.is-chat-mode .home-ai-table strong,
				        .home-ai-console.is-chat-mode .home-ai-heading,
				        .home-ai-console.is-chat-mode .home-ai-heading-1,
				        .home-ai-console.is-chat-mode .home-ai-heading-2,
				        .home-ai-console.is-chat-mode .home-ai-heading-3,
				        .home-ai-console.is-chat-mode .home-ai-heading-4 {
				          font-size: 14px !important;
				          letter-spacing: 0 !important;
				        }

				        .home-ai-console.is-chat-mode .home-ai-message-content,
				        .home-ai-console.is-chat-mode .home-ai-table th,
				        .home-ai-console.is-chat-mode .home-ai-table td {
				          line-height: 1.68 !important;
				        }

				        /* AI answer tables: compact columns and wrap long generated content. */
				        @media (min-width: 761px) {
				          .home-ai-console.is-chat-mode .home-ai-table-wrap {
				            display: block !important;
				            width: fit-content !important;
				            min-width: 0 !important;
				            max-width: 100% !important;
				            overflow-x: auto !important;
				            overflow-y: hidden !important;
				            padding-bottom: 0 !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table {
				            width: auto !important;
				            min-width: 0 !important;
				            max-width: 100% !important;
				            table-layout: auto !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table th,
				          .home-ai-console.is-chat-mode .home-ai-table td {
				            max-width: min(520px, 42vw) !important;
				            white-space: normal !important;
				            word-break: break-word !important;
				            overflow-wrap: anywhere !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table th:first-child,
				          .home-ai-console.is-chat-mode .home-ai-table td:first-child {
				            width: auto !important;
				            min-width: 86px !important;
				            max-width: min(190px, 20vw) !important;
				            white-space: normal !important;
				            word-break: break-word !important;
				            overflow-wrap: anywhere !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table--numbered th:first-child,
				          .home-ai-console.is-chat-mode .home-ai-table--numbered td:first-child {
				            width: 1% !important;
				            min-width: 48px !important;
				            max-width: 64px !important;
				            white-space: nowrap !important;
				            text-align: center !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table--script th:nth-child(2),
				          .home-ai-console.is-chat-mode .home-ai-table--script td:nth-child(2),
				          .home-ai-console.is-chat-mode .home-ai-table--numbered.home-ai-table--storyboard th:nth-child(2),
				          .home-ai-console.is-chat-mode .home-ai-table--numbered.home-ai-table--storyboard td:nth-child(2) {
				            width: 1% !important;
				            min-width: 96px !important;
				            max-width: 132px !important;
				            white-space: nowrap !important;
				            word-break: keep-all !important;
				            overflow-wrap: normal !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table--script th:nth-child(3),
				          .home-ai-console.is-chat-mode .home-ai-table--script td:nth-child(3) {
				            min-width: min(420px, 44vw) !important;
				            max-width: min(820px, 58vw) !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table--storyboard th:nth-child(3),
				          .home-ai-console.is-chat-mode .home-ai-table--storyboard td:nth-child(3) {
				            min-width: 160px !important;
				            max-width: min(280px, 20vw) !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table--storyboard th:nth-child(4),
				          .home-ai-console.is-chat-mode .home-ai-table--storyboard td:nth-child(4) {
				            min-width: min(280px, 26vw) !important;
				            max-width: min(440px, 30vw) !important;
				          }

				          .home-ai-console.is-chat-mode .home-ai-table--storyboard th:nth-child(5),
				          .home-ai-console.is-chat-mode .home-ai-table--storyboard td:nth-child(5),
				          .home-ai-console.is-chat-mode .home-ai-table--wide th:nth-child(n+4),
				          .home-ai-console.is-chat-mode .home-ai-table--wide td:nth-child(n+4) {
				            min-width: min(300px, 28vw) !important;
				            max-width: min(520px, 34vw) !important;
				          }
				        }

				        .viral-analysis-table th,
				        .viral-analysis-table td,
				        .viral-oral-cell,
				        .viral-oral-text,
				        .viral-shot-visual,
				        .viral-shot-analysis,
				        .viral-shot-analysis span {
				          white-space: normal !important;
				          word-break: break-word !important;
				          overflow-wrap: anywhere !important;
				        }

				        .viral-script-table .col-index,
				        .viral-storyboard-table .col-index {
				          width: 52px !important;
				        }

				        .viral-script-table .col-time {
				          width: 112px !important;
				        }

				        .viral-storyboard-table .col-time {
				          width: 104px !important;
				        }

				        .viral-storyboard-table .col-shot {
				          width: 188px !important;
				        }

				        .viral-storyboard-table .col-oral {
				          width: 28% !important;
				        }

				        .home-ai-console.is-chat-mode .home-ai-heading {
				          line-height: 1.45 !important;
				          font-weight: 700 !important;
				        }

				        /* Sidebar utility cards: reduce corner radius by 50%. */
				        .side-card,
				        .sidebar-token-card,
				        .sidebar-session {
				          border-radius: 8.5px !important;
				        }

				        /* Top page cards: reduce corner radius by 50%. */
				        .topbar {
				          border-radius: 8.5px !important;
				        }

				        /* Workflow panels and step cards: match top page card radius. */
					        .card.strong.create-flow-panel,
					        .card.strong.comment-flow-panel,
					        .card.strong.viral-agent-panel,
					        .rewrite-full-layout,
					        .comment-flow-panel,
					        .viral-agent-panel,
					        .step-card {
					          border-radius: 8.5px !important;
					        }

					        /* Script creation only: remove the workflow shell and title card. */
					        .create-agent-layout > .create-page-flow-panel {
					          padding: 0 !important;
					          border: 0 !important;
					          border-radius: 0 !important;
					          background: transparent !important;
					          box-shadow: none !important;
					          backdrop-filter: none !important;
					          -webkit-backdrop-filter: none !important;
					        }

					        .create-agent-layout > .create-page-flow-panel::before {
					          display: none !important;
					        }

					        .create-agent-layout > .create-page-flow-panel > .section-title.flow-title {
					          display: none !important;
					        }

				        /* Home chat dialog: cap the conversation and composer width. */
				        .home-chat-shell .home-ai-console.is-chat-mode,
				        .home-ai-console.is-chat-mode .home-ai-thread,
				        .home-ai-console.is-chat-mode .home-ai-composer {
				          width: min(var(--home-chat-width), 100%) !important;
				          max-width: var(--home-chat-width) !important;
				        }

				        .home-chat-shell .home-ai-console.is-chat-mode {
				          justify-self: center !important;
				        }

				        /* Spacing rhythm: 14px within groups, 20px between modules, 24px page-level breathing room. */
				        :root {
				          --space-group: 14px;
				          --space-module: 20px;
				          --space-page: 24px;
				          --page-pad-x: var(--space-page);
				          --page-pad-y: var(--space-page);
				          --layout-gap: var(--space-module);
				          --global-layout-gap: var(--space-module);
				          --sidebar-main-gap: var(--space-module);
				          --global-card-padding: var(--space-page);
				          --global-step-padding: var(--space-page);
				          --global-result-padding: var(--space-page);
				          --global-inner-padding: var(--space-group);
				          --card-padding: var(--space-page);
				          --step-padding: var(--space-page);
				          --result-padding: var(--space-page);
				          --inner-card-padding: var(--space-group);
				          --ui-card-padding: var(--space-page);
				          --ui-step-padding: var(--space-page);
				          --ui-result-padding: var(--space-page);
				          --ui-inner-padding: var(--space-group);
				        }

				        .app,
				        .workspace,
				        .output-stack,
				        .flow,
				        .create-agent-layout,
				        .rewrite-full-layout,
				        .comment-generator-layout,
				        .history-layout,
				        .settings-grid,
				        .library-main-grid,
				        .learning-list,
				        .learning-list-shell,
				        .upload-list,
				        .favorite-list,
				        .selected-doc-grid,
				        .product-doc-actions {
				          gap: var(--space-module) !important;
				        }

				        body:not(.home-screen):not(.login-active) .app {
				          padding-top: 0 !important;
				        }

				        .topbar,
				        .topbar.has-hero,
				        .section-title,
				        .page-heading {
				          gap: var(--space-group) !important;
				        }

				        .card,
				        .topbar,
				        .modal-box,
				        .table-wrap,
				        .step-card,
				        .result-card,
				        .history-card,
				        .favorite-card,
				        .learning-card,
				        .recent-product-card {
				          padding: var(--space-page) !important;
				        }

				        .inner-card,
				        .file-input,
				        .product-doc-panel,
				        .product-doc-upload-row,
				        .training-upload-card,
				        .rewrite-video-upload,
				        .comment-video-upload,
				        .admin-kpi-strip article {
				          padding: var(--space-group) !important;
				        }

				        .section-title,
				        .section-title.flow-title,
				        .create-flow-panel > .section-title.flow-title,
				        .user-list-title,
				        .attachment-title-row,
				        .model-manager-head {
				          margin-bottom: var(--space-group) !important;
				        }

				        .form-grid,
				        .grid-2,
				        .grid-3,
				        .date-range-grid,
				        .history-record-grid,
				        .history-filter-grid,
				        .learning-filter-grid,
				        .settings-info-grid,
				        .product-insight-grid,
				        .structure-grid,
				        .learning-card-grid,
				        .admin-kpi-strip,
				        .chip-row,
				        .row-actions,
				        .record-actions,
				        .user-inline-actions,
				        .product-doc-upload-row,
				        .product-doc-upload-actions,
				        .attachment-filter-row,
				        .attachment-filter-row.compact,
				        .comment-export-actions,
				        .rewrite-export-actions,
				        .create-export-actions,
				        .export-option-grid {
				          gap: var(--space-group) !important;
				        }

				        .user-admin-summary,
				        .user-create-card {
				          display: grid;
				          gap: var(--space-group) !important;
				        }

				        .step-result {
				          margin-top: var(--space-group) !important;
				          padding-top: var(--space-group) !important;
				        }

				        body:not(.home-screen):not(.login-active) .topbar.has-hero ~ .workspace {
				          margin-top: var(--space-page) !important;
				        }

				        @media (max-width: 760px) {
				          body:not(.home-screen):not(.login-active) .app {
				            padding-left: var(--space-page) !important;
				            padding-right: var(--space-page) !important;
				          }

				          .user-table td.user-actions-cell {
				            grid-template-columns: minmax(0, 1fr) !important;
				          }

				          .user-table td.user-actions-cell::before {
				            display: none !important;
				          }

				          .user-table td.user-actions-cell .user-inline-actions {
				            grid-template-columns: minmax(0, 1fr) !important;
				            width: 100% !important;
				          }

				          .user-table td.user-actions-cell .mini-button {
				            width: 100% !important;
				            min-width: 0 !important;
				          }
				        }

					        .script-action-row .button.icon-action.active-soft,
					        .script-action-row .button.icon-action.active-soft:hover {
					          color: #0877ff !important;
					          background: rgba(238,248,255,.92) !important;
					          border-color: rgba(8,119,255,.34) !important;
					          box-shadow: none !important;
					        }

					        .script-action-row .button.icon-action.active-soft .icon,
					        .script-action-row .button.icon-action.active-soft:hover .icon {
					          color: inherit !important;
					          stroke: currentColor !important;
					        }

					        /* Global card shadow cancellation. Cards keep structure through borders and background only. */
					        :root {
					          --shadow-card-soft: none;
					          --shadow-card: none;
					          --shadow-card-strong: none;
					          --shadow-card-hover: none;
					          --shadow-1: none;
					          --shadow-2: none;
					          --shadow-3: none;
					          --frost-shadow: none;
					          --frost-shadow-strong: none;
					        }

					        .card,
					        .topbar,
					        .table-wrap,
					        .step-card,
					        .result-card,
					        .history-card,
					        .favorite-card,
					        .learning-card,
					        .recent-product-card,
					        .home-entry-card,
					        .workbench-card,
					        .workbench-entry-card,
					        .side-card,
					        .sidebar-token-card,
					        .sidebar-session,
					        .guided-empty,
					        .empty,
					        .inner-card,
					        .creative-kb-card,
					        .model-service-card,
					        .attachment-manager-card,
					        .attachment-list-card,
					        .token-activity-card,
					        .token-rank-card,
					        .user-token-stat,
					        .runtime-status-item,
					        .selected-doc-card,
					        .content-analysis-card,
					        .conversion-preview-card,
					        .script-doc-status-card,
							          .video-analysis-card,
							          .comment-card,
							          .product-insight-block,
							          .product-analysis-card,
							          .qianchuan-metric-card,
							          .admin-kpi-strip article {
							          box-shadow: none !important;
							        }

					        .card:hover,
					        .topbar:hover,
					        .table-wrap:hover,
					        .step-card:hover,
					        .result-card:hover,
					        .history-card:hover,
					        .favorite-card:hover,
					        .learning-card:hover,
					        .recent-product-card:hover,
					        .home-entry-card:hover,
					        .workbench-card:hover,
					        .workbench-entry-card:hover,
					        .side-card:hover,
					        .sidebar-token-card:hover,
					        .sidebar-session:hover,
					        .guided-empty:hover,
					        .empty:hover,
					        .inner-card:hover,
					        .creative-kb-card:hover,
					        .model-service-card:hover,
					        .attachment-manager-card:hover,
					        .attachment-list-card:hover,
					        .token-activity-card:hover,
					        .token-rank-card:hover,
					        .user-token-stat:hover,
					        .runtime-status-item:hover,
					        .selected-doc-card:hover,
					        .content-analysis-card:hover,
					        .conversion-preview-card:hover,
					        .script-doc-status-card:hover,
							          .video-analysis-card:hover,
							          .comment-card:hover,
							          .product-insight-block:hover,
							          .product-analysis-card:hover,
							          .qianchuan-metric-card:hover,
							          .admin-kpi-strip article:hover {
							          box-shadow: none !important;
							        }

					        .card::before,
					        .card::after,
					        .topbar::before,
					        .topbar::after,
					        .table-wrap::before,
					        .table-wrap::after,
					        .step-card::before,
					        .step-card::after,
					        .result-card::before,
					        .result-card::after,
					        .history-card::before,
					        .history-card::after,
					        .favorite-card::before,
					        .favorite-card::after,
					        .learning-card::before,
					        .learning-card::after,
					        .recent-product-card::before,
					        .recent-product-card::after,
					        .home-entry-card::before,
					        .home-entry-card::after,
					        .workbench-card::before,
					        .workbench-card::after,
					        .workbench-entry-card::before,
					        .workbench-entry-card::after,
					        .side-card::before,
					        .side-card::after,
					        .sidebar-token-card::before,
					        .sidebar-token-card::after,
					        .sidebar-session::before,
					        .sidebar-session::after,
					        .guided-empty::before,
					        .guided-empty::after,
					        .empty::before,
					        .empty::after,
					        .inner-card::before,
					        .inner-card::after,
					        .creative-kb-card::before,
					        .creative-kb-card::after,
					        .model-service-card::before,
					        .model-service-card::after,
					        .attachment-manager-card::before,
					        .attachment-manager-card::after,
					        .attachment-list-card::before,
					        .attachment-list-card::after,
					        .token-activity-card::before,
					        .token-activity-card::after,
					        .token-rank-card::before,
					        .token-rank-card::after,
					        .user-token-stat::before,
					        .user-token-stat::after,
					        .runtime-status-item::before,
					        .runtime-status-item::after,
					        .selected-doc-card::before,
					        .selected-doc-card::after,
					        .content-analysis-card::before,
					        .content-analysis-card::after,
					        .conversion-preview-card::before,
					        .conversion-preview-card::after,
					        .script-doc-status-card::before,
					        .script-doc-status-card::after,
					        .video-analysis-card::before,
					        .video-analysis-card::after,
					        .comment-card::before,
					        .comment-card::after,
					        .product-insight-block::before,
					        .product-insight-block::after,
					        .product-analysis-card::before,
					        .product-analysis-card::after,
					        .admin-kpi-strip article::before,
					        .admin-kpi-strip article::after {
					          box-shadow: none !important;
					        }

					        body:not(.login-active) .card,
					        body:not(.login-active) .topbar,
					        body:not(.login-active) .table-wrap,
					        body:not(.login-active) .step-card,
					        body:not(.login-active) .result-card,
					        body:not(.login-active) .history-card,
					        body:not(.login-active) .favorite-card,
					        body:not(.login-active) .learning-card,
					        body:not(.login-active) .recent-product-card,
					        body:not(.login-active) .home-entry-card,
					        body:not(.login-active) .workbench-card,
					        body:not(.login-active) .workbench-entry-card,
					        body:not(.login-active) .side-card,
					        body:not(.login-active) .sidebar-token-card,
					        body:not(.login-active) .sidebar-session,
					        body:not(.login-active) .guided-empty,
					        body:not(.login-active) .empty,
					        body:not(.login-active) .inner-card,
					        body:not(.login-active) .creative-kb-card,
					        body:not(.login-active) .model-service-card,
					        body:not(.login-active) .attachment-manager-card,
					        body:not(.login-active) .attachment-list-card,
					        body:not(.login-active) .token-activity-card,
					        body:not(.login-active) .token-rank-card,
					        body:not(.login-active) .user-token-stat,
					        body:not(.login-active) .runtime-status-item,
					        body:not(.login-active) .selected-doc-card,
					        body:not(.login-active) .content-analysis-card,
					        body:not(.login-active) .conversion-preview-card,
					        body:not(.login-active) .script-doc-status-card,
					        body:not(.login-active) .video-analysis-card,
					        body:not(.login-active) .comment-card,
					        body:not(.login-active) .product-insight-block,
					        body:not(.login-active) .product-analysis-card,
					        body:not(.login-active) .admin-kpi-strip article,
					        body.login-active .login-card {
					          box-shadow: none !important;
					        }

					        body:not(.login-active) .card:hover,
					        body:not(.login-active) .topbar:hover,
					        body:not(.login-active) .table-wrap:hover,
					        body:not(.login-active) .step-card:hover,
					        body:not(.login-active) .result-card:hover,
					        body:not(.login-active) .history-card:hover,
					        body:not(.login-active) .favorite-card:hover,
					        body:not(.login-active) .learning-card:hover,
					        body:not(.login-active) .recent-product-card:hover,
					        body:not(.login-active) .home-entry-card:hover,
					        body:not(.login-active) .workbench-card:hover,
					        body:not(.login-active) .workbench-entry-card:hover,
					        body:not(.login-active) .side-card:hover,
					        body:not(.login-active) .sidebar-token-card:hover,
					        body:not(.login-active) .sidebar-session:hover,
					        body:not(.login-active) .guided-empty:hover,
					        body:not(.login-active) .empty:hover,
					        body:not(.login-active) .inner-card:hover,
					        body:not(.login-active) .creative-kb-card:hover,
					        body:not(.login-active) .model-service-card:hover,
					        body:not(.login-active) .attachment-manager-card:hover,
					        body:not(.login-active) .attachment-list-card:hover,
					        body:not(.login-active) .token-activity-card:hover,
					        body:not(.login-active) .token-rank-card:hover,
					        body:not(.login-active) .user-token-stat:hover,
					        body:not(.login-active) .runtime-status-item:hover,
					        body:not(.login-active) .selected-doc-card:hover,
					        body:not(.login-active) .content-analysis-card:hover,
					        body:not(.login-active) .conversion-preview-card:hover,
					        body:not(.login-active) .script-doc-status-card:hover,
					        body:not(.login-active) .video-analysis-card:hover,
					        body:not(.login-active) .comment-card:hover,
					        body:not(.login-active) .product-insight-block:hover,
					        body:not(.login-active) .product-analysis-card:hover,
						        body:not(.login-active) .admin-kpi-strip article:hover,
						        body.login-active .login-card:hover {
						          box-shadow: none !important;
						        }

						        /* Final override: script creation removes the workflow title and lowest wrapper card. */
						        .create-agent-layout > .card.strong.create-flow-panel.create-page-flow-panel {
						          min-width: 0 !important;
						          padding: 0 !important;
						          border: 0 !important;
						          border-radius: 0 !important;
						          background: transparent !important;
						          box-shadow: none !important;
						          backdrop-filter: none !important;
						          -webkit-backdrop-filter: none !important;
						        }

						        .create-agent-layout > .card.strong.create-flow-panel.create-page-flow-panel::before,
						        .create-agent-layout > .card.strong.create-flow-panel.create-page-flow-panel::after {
						          display: none !important;
						          content: none !important;
						        }

						        .create-agent-layout > .card.strong.create-flow-panel.create-page-flow-panel > .section-title.flow-title {
						          display: none !important;
						        }

						        .create-agent-layout > .card.strong.create-flow-panel.create-page-flow-panel > .section-title {
						          display: none !important;
						          height: 0 !important;
						          min-height: 0 !important;
						          margin: 0 !important;
						          padding: 0 !important;
						          border: 0 !important;
						          overflow: hidden !important;
					        }

						        /* Absolute final card shadow kill switch. */
						        #app :is(
						          .card,
						          .topbar,
						          .table-wrap,
						          .step-card,
						          .result-card,
						          .history-card,
						          .favorite-card,
						          .learning-card,
						          .recent-product-card,
						          .home-entry-card,
						          .workbench-card,
						          .workbench-entry-card,
						          .side-card,
						          .sidebar-token-card,
						          .sidebar-session,
						          .guided-empty,
						          .empty,
						          .inner-card,
						          .creative-kb-card,
						          .model-service-card,
						          .attachment-manager-card,
						          .attachment-list-card,
						          .token-activity-card,
						          .token-rank-card,
						          .user-token-stat,
						          .runtime-status-item,
						          .selected-doc-card,
						          .content-analysis-card,
						          .conversion-preview-card,
						          .script-doc-status-card,
						          .video-analysis-card,
						          .comment-card,
						          .product-insight-block,
						          .product-analysis-card,
						          .admin-kpi-strip article
						        ),
						        #modal :is(.modal-box, .card, .result-card),
						        #loginScreen .login-card {
						          box-shadow: none !important;
						        }

						        #app :is(
						          .card,
						          .topbar,
						          .table-wrap,
						          .step-card,
						          .result-card,
						          .history-card,
						          .favorite-card,
						          .learning-card,
						          .recent-product-card,
						          .home-entry-card,
						          .workbench-card,
						          .workbench-entry-card,
						          .side-card,
						          .sidebar-token-card,
						          .sidebar-session,
						          .guided-empty,
						          .empty,
						          .inner-card,
						          .creative-kb-card,
						          .model-service-card,
						          .attachment-manager-card,
						          .attachment-list-card,
						          .token-activity-card,
						          .token-rank-card,
						          .user-token-stat,
						          .runtime-status-item,
						          .selected-doc-card,
						          .content-analysis-card,
						          .conversion-preview-card,
						          .script-doc-status-card,
						          .video-analysis-card,
						          .comment-card,
						          .product-insight-block,
						          .product-analysis-card,
						          .admin-kpi-strip article
						        ):hover,
						        #modal :is(.modal-box, .card, .result-card):hover,
						        #loginScreen .login-card:hover {
						          box-shadow: none !important;
						        }

						        #app :is(
						          .card,
						          .topbar,
						          .table-wrap,
						          .step-card,
						          .result-card,
						          .history-card,
						          .favorite-card,
						          .learning-card,
						          .recent-product-card,
						          .home-entry-card,
						          .workbench-card,
						          .workbench-entry-card,
						          .side-card,
						          .sidebar-token-card,
						          .sidebar-session,
						          .guided-empty,
						          .empty,
						          .inner-card,
						          .creative-kb-card,
						          .model-service-card,
						          .attachment-manager-card,
						          .attachment-list-card,
						          .token-activity-card,
						          .token-rank-card,
						          .user-token-stat,
						          .runtime-status-item,
						          .selected-doc-card,
						          .content-analysis-card,
						          .conversion-preview-card,
						          .script-doc-status-card,
						          .video-analysis-card,
						          .comment-card,
						          .product-insight-block,
						          .product-analysis-card,
						          .admin-kpi-strip article
						        )::before,
						        #app :is(
						          .card,
						          .topbar,
						          .table-wrap,
						          .step-card,
						          .result-card,
						          .history-card,
						          .favorite-card,
						          .learning-card,
						          .recent-product-card,
						          .home-entry-card,
						          .workbench-card,
						          .workbench-entry-card,
						          .side-card,
						          .sidebar-token-card,
						          .sidebar-session,
						          .guided-empty,
						          .empty,
						          .inner-card,
						          .creative-kb-card,
						          .model-service-card,
						          .attachment-manager-card,
						          .attachment-list-card,
						          .token-activity-card,
						          .token-rank-card,
						          .user-token-stat,
						          .runtime-status-item,
						          .selected-doc-card,
						          .content-analysis-card,
						          .conversion-preview-card,
						          .script-doc-status-card,
						          .video-analysis-card,
						          .comment-card,
						          .product-insight-block,
						          .product-analysis-card,
						          .admin-kpi-strip article
						        )::after,
						        #modal :is(.modal-box, .card, .result-card)::before,
						        #modal :is(.modal-box, .card, .result-card)::after,
						        #loginScreen .login-card::before,
						        #loginScreen .login-card::after {
						          box-shadow: none !important;
						        }

						        /* Generated comments: compact row rhythm by 10% without touching script rows. */
						        .comment-panel .comment-row {
						          gap: 10.8px !important;
						          padding: 12.6px 16.2px !important;
						        }

						        .comment-panel .comment-text,
						        .comment-panel .comment-inline-editor {
						          line-height: 1.53 !important;
						        }

						        .comment-panel .comment-inline-editor {
						          min-height: 68.4px !important;
						        }

						        .comment-panel .comment-actions {
						          gap: 7.2px !important;
						        }

						        /* Final card spacing guard: 14px within groups, 20px between modules, 24px page-level space. */
						        :root {
						          --space-group: 14px;
						          --space-module: 20px;
						          --space-page: 24px;
						          --layout-gap: var(--space-module);
						          --global-layout-gap: var(--space-module);
						          --sidebar-main-gap: var(--space-module);
						          --card-padding: var(--space-page);
						          --step-padding: var(--space-page);
						          --result-padding: var(--space-page);
						          --inner-card-padding: var(--space-group);
						          --ui-card-padding: var(--space-page);
						          --ui-step-padding: var(--space-page);
						          --ui-result-padding: var(--space-page);
						          --ui-inner-padding: var(--space-group);
						        }

						        body:not(.home-screen):not(.login-active) #metrics.metrics:not(:empty) + .workspace {
						          margin-top: 0 !important;
						        }

						        #app :is(
						          .workspace,
						          .output-stack,
						          .flow,
						          .create-agent-layout,
						          .rewrite-full-layout,
						          .comment-generator-layout,
						          .history-layout,
						          .settings-grid,
						          .library-main-grid,
						          .learning-list,
						          .learning-list-shell,
						          .upload-list,
						          .favorite-list,
						          .selected-doc-grid,
						          .product-doc-actions,
						          .viral-results-surface,
						          .model-service-list,
						          .user-token-panel,
						          .system-token-panel
						        ) {
						          gap: var(--space-module) !important;
						        }

						        #app :is(
						          .form-grid,
						          .grid-2,
						          .grid-3,
						          .date-range-grid,
						          .history-record-grid,
						          .history-filter-grid,
						          .learning-filter-grid,
						          .settings-info-grid,
						          .product-insight-grid,
						          .structure-grid,
						          .learning-card-grid,
						          .admin-kpi-strip,
						          .chip-row,
						          .row-actions,
						          .record-actions,
						          .user-inline-actions,
						          .product-doc-upload-row,
						          .product-doc-upload-actions,
						          .attachment-filter-row,
						          .attachment-filter-row.compact,
						          .comment-export-actions,
						          .rewrite-export-actions,
						          .create-export-actions,
						          .export-option-grid
						        ) {
						          gap: var(--space-group) !important;
						        }

						        #app :is(
						          .grid-2.split-1-2,
						          .comment-generator-layout,
						          .library-main-grid,
						          .settings-grid,
						          .history-layout,
						          .create-agent-layout,
						          .rewrite-full-layout
						        ) {
						          gap: var(--space-module) !important;
						        }

						        #app :is(
						          .card,
						          .topbar,
						          .table-wrap,
						          .step-card,
						          .result-card,
						          .history-card,
						          .favorite-card,
						          .learning-card,
						          .recent-product-card,
						          .model-service-card,
						          .attachment-manager-card,
						          .attachment-list-card,
						          .creative-kb-card,
						          .token-activity-card,
						          .token-rank-card,
						          .selected-doc-card,
						          .content-analysis-card,
						          .conversion-preview-card,
						          .script-doc-status-card,
						          .video-analysis-card,
						          .product-analysis-card
						        ) {
						          padding: var(--space-page) !important;
						        }

						        #app .create-agent-layout > .card.strong.create-flow-panel.create-page-flow-panel {
						          padding: 0 !important;
						          border: 0 !important;
						          border-radius: 0 !important;
						          background: transparent !important;
						          box-shadow: none !important;
						          backdrop-filter: none !important;
						          -webkit-backdrop-filter: none !important;
						        }

							        #app .create-agent-layout > .card.strong.create-flow-panel.create-page-flow-panel > .section-title.flow-title {
							          display: none !important;
							        }

							        #app .create-agent-layout > .card.strong.comment-flow-panel.create-page-flow-panel {
							          position: relative !important;
							          top: auto !important;
							        }

							        #app :is(
						          .inner-card,
						          .file-input,
						          .product-doc-panel,
						          .product-doc-upload-row,
						          .training-upload-card,
						          .rewrite-video-upload,
						          .comment-video-upload,
						          .runtime-status-item,
						          .product-doc-summary-card,
						          .qianchuan-metric-card,
						          .admin-kpi-strip article
						        ) {
						          padding: var(--space-group) !important;
						        }

						        #app .viral-results-surface.is-empty {
						          gap: var(--space-group) !important;
						          margin-top: var(--space-module) !important;
						          padding: 0 !important;
						        }

							        #app .viral-results-surface.is-empty .viral-results-empty {
							          min-height: 0 !important;
							          padding: var(--space-group) !important;
							        }

							        /* Page card radius: match top hero cards, without changing buttons or form controls. */
							        :root {
							          --top-card-radius: 8.5px;
							          --page-card-radius: var(--top-card-radius);
							        }

							        #app :is(
							          .topbar,
							          .card,
							          .table-wrap,
							          .step-card,
							          .result-card,
							          .history-card,
							          .favorite-card,
							          .learning-card,
							          .recent-product-card,
							          .home-entry-card,
							          .workbench-card,
							          .workbench-entry-card,
							          .guided-empty,
							          .empty,
							          .inner-card,
							          .creative-kb-card,
							          .model-service-card,
							          .runtime-status-card,
							          .runtime-status-item,
							          .attachment-manager-card,
							          .attachment-list-card,
							          .token-activity-card,
							          .token-rank-card,
							          .user-admin-summary,
							          .user-create-card,
							          .user-token-stat,
							          .selected-doc-card,
							          .content-analysis-card,
							          .conversion-preview-card,
							          .script-doc-status-card,
							          .video-analysis-card,
							          .comment-card,
							          .product-insight-block,
							          .product-analysis-card,
							          .product-doc-panel,
							          .product-doc-upload-row,
							          .training-upload-card,
							          .product-doc-summary-card,
							          .qianchuan-metric-card,
							          .admin-kpi-strip article
							        ) {
							          border-radius: var(--page-card-radius) !important;
							        }

							        #app .create-agent-layout > .card.strong.create-flow-panel.create-page-flow-panel {
							          border-radius: 0 !important;
							        }

							        /* Product analysis upload row: align the upload card edges with the input fields. */
							        #app .create-product-step .product-doc-panel,
							        #app .create-product-step .product-doc-upload-row {
							          width: 100% !important;
							          max-width: 100% !important;
							          padding-left: 0 !important;
							          padding-right: 0 !important;
							          box-sizing: border-box !important;
							        }

								        #app .create-product-step .product-doc-file-input {
								          width: 100% !important;
								          max-width: 100% !important;
								          box-sizing: border-box !important;
								        }

								        /* Dashboard metric cards: remove the divider and let the trend curve blend into the card. */
								        @media (min-width: 721px) {
								          #app .metrics .metric.glass {
								            grid-template-columns: minmax(154px, .58fr) minmax(240px, 1fr) !important;
								            background:
								              linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.94) 28%, rgba(255,255,255,.78) 41%, rgba(var(--metric-rgb, 8,119,255), .07) 56%, rgba(var(--metric-rgb, 8,119,255), .14) 78%, rgba(var(--metric-rgb-2, 0,122,255), .16) 100%),
								              radial-gradient(ellipse at 16% 18%, rgba(255,255,255,.94), rgba(255,255,255,0) 40%),
								              radial-gradient(ellipse at 76% 42%, rgba(var(--metric-rgb, 8,119,255), .20), rgba(var(--metric-rgb, 8,119,255), 0) 54%),
								              rgba(255,255,255,.50) !important;
								          }

								          #app .metrics .metric.glass .metric-copy {
								            padding-right: 12px !important;
								          }

								          #app .metrics .metric.glass .metric-visual {
								            border-left: 0 !important;
								            margin-left: -20px !important;
								            padding-left: 38px !important;
								            background:
								              linear-gradient(90deg, rgba(255,255,255,0), rgba(var(--metric-rgb, 8,119,255), .065) 34%, rgba(var(--metric-rgb-2, 0,122,255), .10) 100%),
								              linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 52%),
								              radial-gradient(circle at 78% 20%, rgba(var(--metric-rgb, 8,119,255), .16), rgba(var(--metric-rgb, 8,119,255), 0) 48%) !important;
								          }

								          #app .metrics .metric.glass .metric-chart {
								            inset: 42px 0 0 -6px !important;
								          }
								        }

								        /* Comment workflow: keep progress and generated content inside the active step card. */
								        #app .comment-flow-panel .step-head > .step-progress-slot {
								          flex: 0 1 466px !important;
								          min-width: 320px !important;
								          max-width: 520px !important;
								        }

								        #app .comment-flow-panel .comment-step-result {
								          margin-top: var(--space-group) !important;
								          padding-top: var(--space-group) !important;
								          border-top: 1px solid rgba(60,60,67,.08) !important;
								        }

								        #app .comment-flow-panel .comment-inline-result {
								          width: 100% !important;
								          max-width: 100% !important;
								          padding: 16px !important;
								          border-color: rgba(190,222,255,.58) !important;
								          border-radius: var(--page-card-radius) !important;
								          background:
								            linear-gradient(135deg, rgba(255,255,255,.84), rgba(244,250,255,.62)),
								            rgba(255,255,255,.58) !important;
								          box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
								        }

								        #app .comment-flow-panel .comment-inline-result h4 {
								          margin-bottom: 10px !important;
								        }

								        #app .comment-flow-panel .comment-comments-inline-result .comment-panel {
								          margin-top: 2px !important;
								        }

								        @media (max-width: 760px) {
								          #app .comment-flow-panel .step-head > .step-progress-slot {
								            flex: 0 0 100% !important;
								            min-width: 0 !important;
								            max-width: none !important;
								          }
								        }

							        .ai-mark,
							        .ai-mark-key,
							        .ai-mark-data,
							        .ai-mark-risk,
							        .ai-mark-action,
							        .ai-mark-topic,
							        .comment-text .ai-mark,
							        .home-ai-message-content .ai-mark {
							          display: inline;
							          padding: 0 !important;
							          border-radius: 0 !important;
							          color: inherit !important;
							          background: transparent !important;
							          font: inherit !important;
							          font-weight: inherit !important;
							          text-decoration: none !important;
							          box-shadow: none !important;
							          -webkit-box-decoration-break: slice;
							          box-decoration-break: slice;
							        }

							        #app .qianchuan-metric-card,
							        #app .qianchuan-metric-card:hover {
							          box-shadow: none !important;
							          filter: none !important;
							          text-shadow: none !important;
							        }

							        @media (min-width: 761px) {
							          .script-table-row,
							          .script-table-row.head {
							            grid-template-columns: 32px 56px 112px minmax(220px, 1fr) minmax(240px, 1.08fr) minmax(180px, .74fr) !important;
							            column-gap: 4px !important;
							            row-gap: 4px !important;
							            padding: 12px 12px !important;
							          }

							          .script-table-row > span {
							            min-width: 0;
							            max-width: 100%;
							          }

							          .script-editable-cell {
							            max-width: 100%;
							            margin: -4px -5px;
							            padding: 4px 5px;
							            border-radius: 10px;
							          }

							          .script-editable-cell.script-editing-cell,
							          .script-editable-cell.script-editing-cell:hover {
							            margin: 0 !important;
							            padding: 0 !important;
							            min-width: 0;
							            max-width: 100%;
							            overflow: visible;
							          }

				          .script-cell-editor {
				            width: 100%;
							            min-width: 0 !important;
							            max-width: 100%;
							            min-height: 76px;
							            padding: 10px 12px;
				            border-radius: 12px;
				          }
				        }

				        /* Scheme A: explicit workflow states and responsive layout repairs. */
				        .export-option-pill:has(input:disabled) {
				          opacity: .48;
				          cursor: not-allowed;
				        }

				        .step-card.is-step-locked .button:disabled,
				        .step-card.is-step-locked .mini-button:disabled {
				          transform: none !important;
				        }

				        @media (max-width: 1120px) {
				          body:not(.home-screen):not(.login-active) #app .topbar:not([hidden]) {
				            position: relative !important;
				            top: auto !important;
				            display: flex !important;
				            min-height: 0 !important;
				            padding: 16px !important;
				            align-items: flex-start !important;
				            flex-wrap: wrap !important;
				          }

				          body:not(.home-screen):not(.login-active) #app .topbar.has-hero {
				            padding-right: 16px !important;
				          }

				          #app .topbar .hero-visual {
				            display: none !important;
				          }

				          #app .topbar .page-heading,
				          #app .topbar .page-title {
				            width: 100% !important;
				            min-width: 0 !important;
				            max-width: none !important;
				            padding-right: 0 !important;
				          }

				          #app .topbar .page-heading {
				            flex: 0 0 100% !important;
				          }

				          #app .topbar .page-title {
				            flex: 1 1 auto !important;
				          }

				          #app .topbar .page-title h2 {
				            font-size: 21px !important;
				            line-height: 1.25 !important;
				          }

				          #app .topbar .page-title p {
				            display: block !important;
				            margin-top: 6px !important;
				            font-size: 12.5px !important;
				            line-height: 1.55 !important;
				          }

				          #app .topbar .top-actions {
				            width: 100% !important;
				          }

				          body:not(.login-active) .toast {
				            z-index: 150 !important;
				            bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
				          }

				          body.login-active .toast {
				            z-index: 150 !important;
				            top: calc(16px + env(safe-area-inset-top, 0px)) !important;
				            bottom: auto !important;
				          }
				        }

				        @media (min-width: 901px) and (max-width: 1120px) {
				          #app {
				            padding-top: var(--space-page) !important;
				          }

				          #app > .sidebar {
				            display: none !important;
				          }

				          #app > .main {
				            width: 100% !important;
				            min-width: 0 !important;
				            margin: 0 !important;
				          }

				          #mobileTabbar.mobile-tabbar {
				            position: fixed !important;
				            left: 24px !important;
				            right: 24px !important;
				            bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
				            z-index: 90 !important;
				            display: flex !important;
				            min-height: 64px !important;
				            align-items: stretch !important;
				            gap: 4px !important;
				            padding: 5px 6px !important;
				            overflow: hidden !important;
				            border: 1px solid rgba(190, 222, 255, .72) !important;
				            border-radius: 20px !important;
				            background: rgba(255,255,255,.96) !important;
				            box-shadow: none !important;
				          }

				          #mobileTabbar .mobile-tab-button {
				            position: relative !important;
				            z-index: 1 !important;
				            min-width: 0 !important;
				            height: 52px !important;
				            flex: 1 1 0 !important;
				            display: grid !important;
				            grid-template-rows: 22px 16px !important;
				            place-items: center !important;
				            align-content: center !important;
				            gap: 4px !important;
				            padding: 5px 2px !important;
				            color: rgba(29,29,31,.72) !important;
				            background: transparent !important;
				            font-size: 10.5px !important;
				            line-height: 1 !important;
				          }

				          #mobileTabbar .mobile-tab-button.active {
				            color: var(--accent) !important;
				          }

				          #mobileTabbar .mobile-tab-indicator {
				            position: absolute !important;
				            top: 5px !important;
				            bottom: 5px !important;
				            left: 0 !important;
				            z-index: 0 !important;
				            width: var(--mobile-indicator-width, 0px) !important;
				            height: auto !important;
				            border-radius: 14px !important;
				            background: rgba(238,248,255,.92) !important;
				            transform: translateX(var(--mobile-indicator-x, 0px)) !important;
				          }
				        }

				        @media (min-width: 1121px) and (max-width: 1280px) {
				          #app {
				            padding-left: calc(76px + var(--space-module)) !important;
				          }

				          #app > .sidebar,
				          #app > .sidebar.glass {
				            width: 76px !important;
				            padding: 14px 10px !important;
				            align-items: center !important;
				            gap: 0 !important;
				          }

				          #app > .sidebar::after {
				            left: 76px !important;
				          }

				          #app .sidebar .brand {
				            width: 100% !important;
				            justify-content: center !important;
				            gap: 0 !important;
				          }

				          #app .sidebar .brand-copy,
				          #app .sidebar .nav-button span,
				          #app .sidebar .side-card,
				          #app .sidebar .sidebar-token-card,
				          #app .sidebar .sidebar-session,
				          #app .sidebar .sidebar-version,
				          #app .sidebar .sidebar-toggle {
				            display: none !important;
				          }

				          #app .sidebar .nav {
				            width: 100% !important;
				            margin-top: 12px !important;
				          }

				          #app .sidebar .nav-button {
				            grid-template-columns: minmax(0, 1fr) !important;
				            justify-items: center !important;
				            padding: 0 !important;
				          }

				          #app .user-form-grid,
				          #app .history-filter-grid,
				          #app .library-filter-grid,
				          #app .attachment-filter-row.compact {
				            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
				          }

				          #app .create-user-action {
				            grid-column: 1 / -1 !important;
				          }

				          #app .user-table {
				            width: 100% !important;
				            min-width: 0 !important;
				            max-width: 100% !important;
				            table-layout: fixed !important;
				          }

				          #app .user-table-wrap {
				            overflow-x: hidden !important;
				          }

				          #app .user-table th,
				          #app .user-table td {
				            padding: 10px !important;
				            font-size: 12px !important;
				            white-space: normal !important;
				            overflow-wrap: anywhere !important;
				          }

				          #app .user-table th:nth-child(1),
				          #app .user-table td:nth-child(1) { width: 12% !important; }
				          #app .user-table th:nth-child(2),
				          #app .user-table td:nth-child(2) { width: 12% !important; }
				          #app .user-table th:nth-child(3),
				          #app .user-table td:nth-child(3) { width: 12% !important; }
				          #app .user-table th:nth-child(4),
				          #app .user-table td:nth-child(4) { width: 17% !important; }
				          #app .user-table th:nth-child(5),
				          #app .user-table td:nth-child(5),
				          #app .user-table th:nth-child(6),
				          #app .user-table td:nth-child(6) { width: 14% !important; }
				          #app .user-table th:nth-child(7),
				          #app .user-table td:nth-child(7) { width: 19% !important; }

				          #app .user-table .user-inline-actions {
				            display: grid !important;
				            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
				            width: 100% !important;
				            gap: 6px !important;
				          }

				          #app .user-table .user-inline-actions .mini-button {
				            width: 100% !important;
				            min-width: 0 !important;
				          }
				        }

				        @media (max-width: 760px) {
				          #app .create-product-step .product-doc-file-input {
				            display: grid !important;
				            grid-template-columns: minmax(0, 1fr) !important;
				            align-items: stretch !important;
				            gap: 12px !important;
				          }

				          #app .create-product-step .file-copy {
				            display: grid !important;
				            width: 100% !important;
				            min-width: 0 !important;
				            gap: 5px !important;
				          }

				          #app .create-product-step .file-copy b,
				          #app .create-product-step .file-copy small {
				            width: 100% !important;
				            max-width: 100% !important;
				            white-space: normal !important;
				            word-break: break-word !important;
				            writing-mode: horizontal-tb !important;
				          }

				          #app .create-product-step .product-doc-actions {
				            display: grid !important;
				            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
				            width: 100% !important;
				            min-width: 0 !important;
				            gap: 8px !important;
				          }

					          #app .create-product-step .product-doc-actions .file-action {
					            width: 100% !important;
					            min-width: 0 !important;
					            justify-content: center !important;
					          }
					        }

					        /* Mobile Agent chat: keep history off-canvas and give AI output the full reading width. */
					        .home-chat-mobile-bar,
					        .home-chat-sidebar-mobile-head,
					        .home-chat-history-scrim {
					          display: none;
					        }

					        @media (max-width: 760px) {
					          .workbench-home.home-chat-active {
					            width: calc(100% + 16px) !important;
					            min-height: calc(100dvh - 162px - env(safe-area-inset-bottom, 0px)) !important;
					            margin-inline: -8px !important;
					            padding: 0 !important;
					            overflow: hidden !important;
					          }

					          .home-chat-shell {
					            position: relative !important;
					            grid-template-columns: minmax(0, 1fr) !important;
					            grid-template-rows: auto minmax(0, 1fr) !important;
					            gap: 6px !important;
					            width: 100% !important;
					            min-width: 0 !important;
					            min-height: calc(100dvh - 162px - env(safe-area-inset-bottom, 0px)) !important;
					          }

					          .home-chat-mobile-bar {
					            display: grid !important;
					            grid-template-columns: 38px auto !important;
					            align-items: center !important;
					            justify-content: space-between !important;
					            gap: 8px !important;
					            min-height: 46px !important;
					            padding: 4px 8px !important;
					            border-bottom: 1px solid rgba(60, 60, 67, .08) !important;
					            background: rgba(255, 255, 255, .92) !important;
					            z-index: 5 !important;
					          }

					          .home-chat-mobile-back,
					          .home-chat-history-toggle,
					          .home-chat-history-close {
					            min-height: 36px !important;
					            border: 1px solid rgba(60, 60, 67, .10) !important;
					            border-radius: 10px !important;
					            color: rgba(29, 29, 31, .76) !important;
					            background: #fff !important;
					            box-shadow: none !important;
					          }

					          .home-chat-mobile-back,
					          .home-chat-history-close {
					            width: 36px !important;
					            min-width: 36px !important;
					            padding: 0 !important;
					          }

					          .home-chat-mobile-back .icon,
					          .home-chat-history-toggle .icon,
					          .home-chat-history-close .icon {
					            width: 17px !important;
					            height: 17px !important;
					          }

					          .home-chat-history-toggle {
					            display: inline-flex !important;
					            align-items: center !important;
					            justify-content: center !important;
					            gap: 5px !important;
					            padding: 0 10px !important;
					            font-size: 12px !important;
					            font-weight: 650 !important;
					          }

					          .home-chat-sidebar {
					            position: fixed !important;
					            inset: 84px auto calc(78px + env(safe-area-inset-bottom, 0px)) 0 !important;
					            z-index: 161 !important;
					            width: min(86vw, 320px) !important;
					            height: auto !important;
					            min-height: 0 !important;
					            display: grid !important;
					            grid-template-columns: minmax(0, 1fr) !important;
					            grid-template-rows: auto auto minmax(0, 1fr) !important;
					            gap: 12px !important;
					            padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
					            overflow: hidden !important;
					            border: 0 !important;
					            border-right: 1px solid rgba(60, 60, 67, .10) !important;
					            border-radius: 0 10px 10px 0 !important;
					            background: #fff !important;
					            box-shadow: none !important;
					            transform: translateX(-105%) !important;
					            transition: transform .22s cubic-bezier(.2, .8, .2, 1) !important;
					          }

					          .home-chat-shell.is-history-open .home-chat-sidebar {
					            transform: translateX(0) !important;
					          }

					          .home-chat-sidebar-mobile-head {
					            display: flex !important;
					            align-items: center !important;
					            justify-content: space-between !important;
					            gap: 12px !important;
					            min-height: 38px !important;
					          }

					          .home-chat-sidebar-mobile-head strong {
					            font-size: 16px !important;
					            line-height: 1.3 !important;
					          }

					          .home-chat-sidebar .home-chat-back {
					            display: none !important;
					          }

					          .home-chat-sidebar .home-new-chat {
					            width: 100% !important;
					            min-height: 40px !important;
					            border-radius: 10px !important;
					            box-shadow: none !important;
					          }

					          .home-chat-sidebar .home-session-list {
					            grid-column: auto !important;
					            display: grid !important;
					            gap: 14px !important;
					            min-height: 0 !important;
					            padding: 0 2px 8px 0 !important;
					            overflow-x: hidden !important;
					            overflow-y: auto !important;
					          }

					          .home-chat-sidebar .home-session-group {
					            display: grid !important;
					            align-items: stretch !important;
					            gap: 5px !important;
					          }

					          .home-chat-sidebar .home-session-group-title {
					            display: block !important;
					          }

					          .home-chat-sidebar .home-session-item {
					            width: 100% !important;
					            min-width: 0 !important;
					            border-radius: 10px !important;
					          }

					          .home-chat-sidebar .home-session-menu {
					            left: 10px !important;
					            right: 10px !important;
					            width: auto !important;
					            border-radius: 10px !important;
					          }

					          .home-chat-history-scrim {
					            position: fixed !important;
					            inset: 84px 0 calc(78px + env(safe-area-inset-bottom, 0px)) !important;
					            z-index: 160 !important;
					            width: 100vw !important;
					            height: auto !important;
					            padding: 0 !important;
					            border: 0 !important;
					            border-radius: 0 !important;
					            background: rgba(29, 29, 31, .24) !important;
					            box-shadow: none !important;
					            opacity: 0 !important;
					            pointer-events: none !important;
					            transition: opacity .18s ease !important;
					          }

					          .home-chat-shell.is-history-open .home-chat-history-scrim {
					            display: block !important;
					            opacity: 1 !important;
					            pointer-events: auto !important;
					          }

					          .home-chat-shell .home-ai-console.is-chat-mode {
					            width: 100% !important;
					            max-width: none !important;
					            min-width: 0 !important;
					            height: calc(100dvh - 242px - env(safe-area-inset-bottom, 0px)) !important;
					            margin: 0 !important;
					            gap: 8px !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-thread {
					            width: 100% !important;
					            min-width: 0 !important;
					            padding: 8px 4px 6px !important;
					            overflow-x: hidden !important;
					            box-sizing: border-box !important;
					            scrollbar-gutter: auto !important;
					          }

					          .home-ai-console.is-chat-mode .assistant-message:not(.user),
					          .home-ai-console.is-chat-mode .home-ai-message-content {
					            width: 100% !important;
					            min-width: 0 !important;
					            max-width: none !important;
					          }

					          .home-ai-console.is-chat-mode .assistant-message.user {
					            max-width: 92% !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-message-content {
					            gap: 8px !important;
					            overflow-wrap: anywhere !important;
					            word-break: normal !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-heading {
					            margin: 8px 0 2px !important;
					            line-height: 1.4 !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table-wrap {
					            display: block !important;
					            width: 100% !important;
					            min-width: 0 !important;
					            max-width: 100% !important;
					            overflow-x: auto !important;
					            overflow-y: hidden !important;
					            border: 1px solid rgba(60, 60, 67, .10) !important;
					            border-radius: 10px !important;
					            background: #fff !important;
					            box-shadow: none !important;
					            -webkit-overflow-scrolling: touch !important;
					            overscroll-behavior-inline: contain !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table {
					            display: table !important;
					            width: 680px !important;
					            min-width: 680px !important;
					            max-width: none !important;
					            table-layout: fixed !important;
					            border-collapse: separate !important;
					            border-spacing: 0 !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table--wide,
					          .home-ai-console.is-chat-mode .home-ai-table--storyboard {
					            width: 800px !important;
					            min-width: 800px !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table thead {
					            position: static !important;
					            display: table-header-group !important;
					            width: auto !important;
					            height: auto !important;
					            overflow: visible !important;
					            clip: auto !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table tbody {
					            display: table-row-group !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table tr {
					            display: table-row !important;
					            padding: 0 !important;
					            border: 0 !important;
					            border-radius: 0 !important;
					            background: transparent !important;
					            box-shadow: none !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table th,
					          .home-ai-console.is-chat-mode .home-ai-table td {
					            display: table-cell !important;
					            width: auto !important;
					            min-width: 0 !important;
					            max-width: none !important;
					            padding: 10px 12px !important;
					            border-right: 1px solid rgba(60, 60, 67, .08) !important;
					            border-bottom: 1px solid rgba(60, 60, 67, .08) !important;
					            font-size: 13px !important;
					            line-height: 1.55 !important;
					            vertical-align: top !important;
					            white-space: normal !important;
					            word-break: break-word !important;
					            overflow-wrap: anywhere !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table th {
					            background: rgba(247, 249, 252, .96) !important;
					            font-weight: 650 !important;
					            text-align: left !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table td::before {
					            content: none !important;
					            display: none !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table--numbered th:first-child,
					          .home-ai-console.is-chat-mode .home-ai-table--numbered td:first-child {
					            width: 52px !important;
					            min-width: 52px !important;
					            max-width: 52px !important;
					            white-space: nowrap !important;
					            text-align: center !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-table--script th:nth-child(2),
					          .home-ai-console.is-chat-mode .home-ai-table--script td:nth-child(2),
					          .home-ai-console.is-chat-mode .home-ai-table--storyboard th:nth-child(2),
					          .home-ai-console.is-chat-mode .home-ai-table--storyboard td:nth-child(2) {
					            width: 88px !important;
					            min-width: 88px !important;
					            max-width: 88px !important;
					            white-space: nowrap !important;
					          }

					          .home-ai-console.is-chat-mode .home-ai-composer {
					            width: calc(100% - 8px) !important;
					            max-width: none !important;
					            margin: 0 4px !important;
					            border-radius: 10px !important;
					          }
					        }

					        /* 2026-07-12 mobile reading system: one gutter, one safe area, compact information grids. */
					        @media (max-width: 760px) {
					          :root {
					            --mobile-page-gutter: 12px;
					            --space-group: 12px;
					            --space-module: 16px;
					            --space-page: 16px;
					            --layout-gap: var(--space-module);
					            --global-layout-gap: var(--space-module);
					            --card-padding: var(--space-page);
					            --step-padding: var(--space-page);
					            --result-padding: var(--space-page);
					            --inner-card-padding: var(--space-group);
					          }

					          html,
					          body {
					            width: 100% !important;
					            max-width: 100% !important;
					            overflow-x: hidden !important;
					          }

					          body:not(.login-active) {
					            padding-bottom: 0 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app {
					            width: 100% !important;
					            padding: 8px var(--mobile-page-gutter) calc(92px + env(safe-area-inset-bottom, 0px)) !important;
					            gap: 12px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app > .sidebar {
					            top: 8px !important;
					            min-height: 60px !important;
					            padding: 7px 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .brand {
					            min-height: 44px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app > .main {
					            width: 100% !important;
					            min-width: 0 !important;
					            gap: var(--space-module) !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .topbar:not([hidden]) {
					            width: 100% !important;
					            min-height: 0 !important;
					            margin: 0 !important;
					            padding: 14px 16px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .topbar .page-title h2 {
					            font-size: 22px !important;
					            line-height: 1.24 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .topbar .page-title p {
					            margin-top: 6px !important;
					            font-size: 12.5px !important;
					            line-height: 1.55 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .topbar.has-hero ~ .workspace,
					          body:not(.home-screen):not(.login-active) #app #metrics.metrics:not(:empty) + .workspace {
					            margin-top: 0 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(
					            .workspace,
					            .output-stack,
					            .flow,
					            .create-agent-layout,
					            .rewrite-full-layout,
					            .comment-generator-layout,
					            .history-layout,
					            .settings-grid,
					            .library-main-grid,
					            .learning-list,
					            .learning-list-shell,
					            .upload-list,
					            .favorite-list,
					            .selected-doc-grid,
					            .product-doc-actions,
					            .viral-results-surface,
					            .model-service-list,
					            .user-token-panel,
					            .system-token-panel
					          ) {
					            gap: var(--space-module) !important;
					            padding-bottom: 0 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(
					            .card,
					            .step-card,
					            .result-card,
					            .history-card,
					            .favorite-card,
					            .learning-card,
					            .recent-product-card,
					            .model-service-card,
					            .attachment-manager-card,
					            .attachment-list-card,
					            .creative-kb-card,
					            .token-activity-card,
					            .token-rank-card,
					            .selected-doc-card,
					            .content-analysis-card,
					            .conversion-preview-card,
					            .script-doc-status-card,
					            .video-analysis-card,
					            .product-analysis-card,
					            .guided-empty,
					            .empty
					          ) {
					            padding: var(--space-page) !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(
					            .inner-card,
					            .file-input,
					            .product-doc-upload-row,
					            .training-upload-card,
					            .rewrite-video-upload,
					            .comment-video-upload,
					            .runtime-status-item,
					            .product-doc-summary-card,
					            .qianchuan-metric-card,
					            .admin-kpi-strip article
					          ) {
					            padding: var(--space-group) !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(.user-table-wrap, .training-table-wrap, .table-wrap) {
					            max-width: 100% !important;
					            padding: 0 !important;
					            overflow-x: auto !important;
					            overscroll-behavior-inline: contain !important;
					            -webkit-overflow-scrolling: touch !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(.section-title, .step-head, .user-list-title, .attachment-title-row) {
					            gap: 10px !important;
					            margin-bottom: var(--space-group) !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(.section-title h3, .step-title h3) {
					            font-size: 18px !important;
					            line-height: 1.35 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(.section-title p, .step-subtitle, .learning-note) {
					            font-size: 12.5px !important;
					            line-height: 1.6 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, .select-trigger) {
					            min-height: 46px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(.button, .mini-button, .file-action, .learning-brand-button) {
					            min-height: 42px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(.icon-action, .row-more-toggle) {
					            width: 40px !important;
					            min-width: 40px !important;
					            height: 40px !important;
					            min-height: 40px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .admin-page-summary {
					            gap: var(--space-group) !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .admin-kpi-strip {
					            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
					            gap: 8px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .admin-kpi-strip article {
					            min-height: 76px !important;
					            padding: 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .admin-kpi-strip span {
					            font-size: 11px !important;
					            line-height: 1.35 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .admin-kpi-strip b {
					            margin-top: 5px !important;
					            font-size: 20px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .runtime-status-grid {
					            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
					            gap: 8px !important;
					            margin-top: var(--space-group) !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .runtime-status-item {
					            min-height: 82px !important;
					            padding: 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .runtime-status-item:last-child:nth-child(odd) {
					            grid-column: 1 / -1 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .runtime-status-item span {
					            margin-bottom: 4px !important;
					            font-size: 10.5px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .runtime-status-item b {
					            font-size: 14px !important;
					            line-height: 1.35 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .runtime-status-item small {
					            font-size: 10px !important;
					            line-height: 1.35 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .model-provider-tabs {
					            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
					            gap: 6px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .model-provider-tab {
					            min-height: 50px !important;
					            padding: 7px 6px !important;
					            font-size: 11px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .history-filter-grid {
					            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
					            gap: 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .history-filter-grid > .field:nth-child(5) {
					            grid-column: 1 / -1 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .history-filter-reserve,
					          body:not(.home-screen):not(.login-active) #app .attachment-list-reserve {
					            display: none !important;
					            min-height: 0 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .type-quick-filters {
					            display: grid !important;
					            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
					            gap: 8px !important;
					            margin-top: 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .type-quick-filter {
					            width: 100% !important;
					            min-height: 40px !important;
					            padding: 0 6px !important;
					            font-size: 11px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .attachment-filter-row.compact {
					            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
					            gap: 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .attachment-filter-row.compact > :first-child {
					            grid-column: 1 / -1 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .attachment-quick-filters {
					            display: grid !important;
					            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
					            gap: 8px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .attachment-quick-filter {
					            width: 100% !important;
					            min-height: 40px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .form-grid.library-filter-grid {
					            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
					            gap: 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .form-grid.library-filter-grid > .field:first-child,
					          body:not(.home-screen):not(.login-active) #app .form-grid.library-filter-grid > .library-filter-action {
					            grid-column: 1 / -1 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .form-grid.learning-filter-grid {
					            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
					            gap: 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .form-grid.learning-filter-grid > .field:first-child {
					            grid-column: 1 / -1 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .user-form-grid {
					            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
					            gap: 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .user-form-grid > .field:nth-child(4),
					          body:not(.home-screen):not(.login-active) #app .user-form-grid > .create-user-action {
					            grid-column: 1 / -1 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .user-table tr {
					            gap: 7px !important;
					            padding: 12px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .user-table td {
					            grid-template-columns: 70px minmax(0, 1fr) !important;
					            gap: 8px !important;
					            padding: 4px 0 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .user-table td.user-actions-cell {
					            display: block !important;
					            padding-top: 8px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .user-table td.user-actions-cell::before {
					            display: none !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .user-table td.user-actions-cell .user-inline-actions {
					            display: grid !important;
					            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
					            gap: 6px !important;
					            width: 100% !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .user-table td.user-actions-cell .mini-button {
					            min-height: 40px !important;
					            padding-inline: 5px !important;
					            font-size: 10.5px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(.create-export-actions, .rewrite-export-actions, .comment-export-actions) {
					            display: grid !important;
					            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
					            gap: 8px !important;
					            width: 100% !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(.create-export-actions, .rewrite-export-actions, .comment-export-actions) > :first-child {
					            grid-column: 1 / -1 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app :is(.create-export-actions, .rewrite-export-actions, .comment-export-actions) > .button {
					            width: 100% !important;
					            min-width: 0 !important;
					            justify-content: center !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .token-heatmap-scroll {
					            width: 100% !important;
					            max-width: 100% !important;
					            overflow-x: auto !important;
					            scrollbar-width: thin !important;
					            overscroll-behavior-inline: contain !important;
					          }

					          body.home-screen:not(.login-active) .home-ai-suggestion {
					            min-height: 40px !important;
					            padding-block: 8px !important;
					          }

					          body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table {
					            width: max-content !important;
					            min-width: 680px !important;
					            height: auto !important;
					            table-layout: auto !important;
					          }

					          body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table--wide,
					          body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table--storyboard {
					            min-width: 800px !important;
					          }

					          body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table th,
					          body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table td {
					            width: auto !important;
					            min-width: 180px !important;
					            max-width: 280px !important;
					            height: auto !important;
					          }

					          body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table th:first-child,
					          body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table td:first-child {
					            width: 112px !important;
					            min-width: 112px !important;
					            max-width: 140px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .training-upload-delete {
					            width: 40px !important;
					            min-width: 40px !important;
					            height: 40px !important;
					            min-height: 40px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .mobile-logout-button {
					            min-height: 40px !important;
					            border-radius: 10px !important;
					            box-shadow: none !important;
					          }
					        }

					        /* Mobile Agent home keeps a readable gutter around the full hero and composer. */
					        @media (max-width: 760px) {
					          body.home-screen .luxury-home-preview:not(.home-chat-active) .home-ai-console:not(.is-chat-mode) {
					            width: auto !important;
					            max-width: none !important;
					            margin-left: max(16px, env(safe-area-inset-left, 0px)) !important;
					            margin-right: max(16px, env(safe-area-inset-right, 0px)) !important;
					          }

					          body:not(.home-screen):not(.login-active) #app {
					            padding-top: 12px !important;
					            padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
					            padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
					            padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
					          }

					          body:not(.home-screen):not(.login-active) #app > .sidebar {
					            display: none !important;
					          }

					          body:not(.home-screen):not(.login-active) #app > .main {
					            gap: 12px !important;
					          }
					        }

					        /* Global typography rhythm: every text line is its font size plus 8px. */
					        body,
					        body :where(
					          h1, h2, h3, h4, h5, h6,
					          p, li, dt, dd, th, td, caption, blockquote, pre, code,
					          label, input, textarea, select, option, button, a,
					          div, span, small, strong, b, em, i
					        ) {
					          line-height: calc(1em + 8px) !important;
					        }

					        #app,
					        #loginScreen,
					        #app :where(
					          h1, h2, h3, h4, h5, h6,
					          p, li, dt, dd, th, td, caption, blockquote, pre, code,
					          label, input, textarea, select, option, button, a,
					          div, span, small, strong, b, em, i
					        ),
					        #loginScreen :where(
					          h1, h2, h3, h4, h5, h6,
					          p, li, dt, dd, th, td, caption, blockquote, pre, code,
					          label, input, textarea, select, option, button, a,
					          div, span, small, strong, b, em, i
					        ) {
					          line-height: calc(1em + 8px) !important;
					        }

					        /* Final mobile layout corrections for library, create, and Agent home/chat. */
					        @media (max-width: 760px) {
					          body:not(.home-screen):not(.login-active) #app #metrics.metrics {
					            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
					            gap: 8px !important;
					            width: 100% !important;
					          }

					          body:not(.home-screen):not(.login-active) #app #metrics .metric.glass {
					            display: block !important;
					            min-width: 0 !important;
					            min-height: 112px !important;
					            padding: 0 !important;
					            border-radius: 12px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app #metrics .metric-copy {
					            height: 100% !important;
					            min-height: 112px !important;
					            padding: 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app #metrics .metric-label {
					            min-height: 32px !important;
					            font-size: 11px !important;
					            font-weight: 650 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app #metrics .metric-value {
					            margin-top: 4px !important;
					            font-size: 24px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app #metrics .metric-chip {
					            max-width: 100% !important;
					            min-height: 24px !important;
					            margin-top: auto !important;
					            padding: 0 6px 0 17px !important;
					            font-size: 10px !important;
					            white-space: nowrap !important;
					          }

					          body:not(.home-screen):not(.login-active) #app #metrics .metric-chip::before {
					            left: 7px !important;
					            width: 5px !important;
					            height: 5px !important;
					            box-shadow: none !important;
					          }

					          body:not(.home-screen):not(.login-active) #app #metrics .metric-visual {
					            display: none !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .create-product-step .product-doc-panel {
					            width: 100% !important;
					            margin: 8.4px 0 !important;
					            padding: 0 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .create-product-step .product-doc-upload-row {
					            width: 100% !important;
					            margin: 0 !important;
					            padding: 0 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .create-product-step .product-doc-file-input {
					            min-height: 0 !important;
					            margin: 0 !important;
					            padding: 12px !important;
					            gap: 10px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .create-product-step .product-doc-actions {
					            gap: 8px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .training-upload-card {
					            display: grid !important;
					            grid-template-columns: minmax(0, 1fr) 40px !important;
					            grid-template-areas:
					              "copy copy"
					              "action delete"
					              "progress progress" !important;
					            align-items: center !important;
					            gap: 10px 8px !important;
					            padding: 12px !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .training-upload-card .file-copy {
					            grid-area: copy !important;
					            min-width: 0 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .training-upload-card > .file-action {
					            grid-area: action !important;
					            width: 100% !important;
					            min-width: 0 !important;
					            justify-content: center !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .training-upload-card .training-upload-delete {
					            grid-area: delete !important;
					            position: static !important;
					            inset: auto !important;
					            align-self: center !important;
					            justify-self: end !important;
					            margin: 0 !important;
					          }

					          body:not(.home-screen):not(.login-active) #app .training-upload-card .training-upload-progress {
					            grid-area: progress !important;
					            width: 100% !important;
					          }

					          body.home-screen:not(.login-active) #app {
					            grid-template-columns: minmax(0, 1fr) !important;
					            min-height: 100dvh !important;
					            padding: 12px max(12px, env(safe-area-inset-right, 0px)) calc(92px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
					          }

					          body.home-screen:not(.login-active) #app > .sidebar {
					            display: none !important;
					          }

					          body.home-screen:not(.login-active) #app > .main,
					          body.home-screen:not(.login-active) #workspace {
					            width: 100% !important;
					            min-width: 0 !important;
					            margin: 0 !important;
					            padding: 0 !important;
					          }

					          body.home-screen:not(.login-active) .luxury-home-preview:not(.home-chat-active) {
					            min-height: calc(100dvh - 116px - env(safe-area-inset-bottom, 0px)) !important;
					            align-content: center !important;
					          }

					          body.home-screen:not(.login-active) .luxury-home-preview:not(.home-chat-active) .home-ai-console:not(.is-chat-mode) {
					            width: 100% !important;
					            min-height: 0 !important;
					            margin: 0 !important;
					            gap: 16px !important;
					            align-content: center !important;
					          }

					          body.home-screen:not(.login-active) .workbench-home.home-chat-active {
					            width: 100% !important;
					            min-height: calc(100dvh - 116px - env(safe-area-inset-bottom, 0px)) !important;
					            margin: 0 !important;
					            padding: 0 !important;
					            overflow: hidden !important;
					          }

					          body.home-screen:not(.login-active) .home-chat-shell {
					            width: 100% !important;
					            min-height: calc(100dvh - 116px - env(safe-area-inset-bottom, 0px)) !important;
					            margin: 0 !important;
					          }

					          body.home-screen:not(.login-active) .home-chat-mobile-bar {
					            padding-inline: 0 !important;
					          }
					        }

    body:not(.home-screen):not(.login-active) #app :is(.system-token-panel, .system-token-main-row, .system-token-activity, .token-activity-card) {
      min-width: 0 !important;
      max-width: 100% !important;
    }

    body:not(.home-screen):not(.login-active) #app .system-token-main-row {
      overflow: hidden !important;
    }

    body:not(.home-screen):not(.login-active) #app .token-heatmap-scroll {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 6px 0 8px !important;
      overflow-x: hidden !important;
    }

    body:not(.home-screen):not(.login-active) #app .token-heatmap-track,
    body:not(.home-screen):not(.login-active) #app .token-heatmap-grid,
    body:not(.home-screen):not(.login-active) #app .token-month-labels {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }

    body:not(.home-screen):not(.login-active) #app .token-heatmap-grid,
    body:not(.home-screen):not(.login-active) #app .token-month-labels {
      grid-template-columns: repeat(var(--token-weeks, 53), minmax(0, 1fr)) !important;
      gap: clamp(2px, .24vw, 4.25px) !important;
      justify-content: stretch !important;
    }

    body:not(.home-screen):not(.login-active) #app .token-cell {
      width: min(13px, 100%) !important;
      height: auto !important;
      aspect-ratio: 1 / 1 !important;
      justify-self: center !important;
    }

    body:not(.home-screen):not(.login-active) #app .token-month-labels span {
      max-width: 2.5em !important;
      overflow: hidden !important;
      text-overflow: clip !important;
    }

    body:not(.home-screen):not(.login-active) #app .system-token-rank-card {
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
    }

    body:not(.home-screen):not(.login-active) #app .system-token-rank-card .token-user-rank {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      gap: 16px !important;
      overflow: visible !important;
      padding-bottom: 0 !important;
    }

    body:not(.home-screen):not(.login-active) #app .system-token-rank-card .token-rank-card {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      flex: initial !important;
    }

    body.home-screen:not(.login-active) .luxury-home-preview:not(.home-chat-active) .home-ip-stage {
      width: 100% !important;
      height: clamp(220px, 18vw, 286px) !important;
      overflow: visible !important;
      background: transparent !important;
      border-radius: 0 !important;
      transform: translateY(38px) !important;
      animation: none !important;
    }

    body.home-screen:not(.login-active) .luxury-home-preview:not(.home-chat-active) .home-ip-stage img {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      width: auto !important;
      max-width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important;
      filter: drop-shadow(0 20px 28px rgba(38, 74, 39, .13)) !important;
      transform: translate(-50%, -50%) !important;
      animation: none !important;
    }

    /* Keep edge heatmap cells fully visible when hover/selection reaches the track bounds. */
    .token-cell:hover {
      outline-offset: -2px !important;
    }

    .token-cell.selected {
      outline-offset: -2px !important;
      box-shadow: none !important;
    }

    @media (max-width: 760px) {
      body.home-screen:not(.login-active) {
        --home-chat-tabbar-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        --home-chat-tabbar-height: 64px;
        --home-chat-composer-nav-gap: 24px;
        --home-chat-composer-bottom: calc(
          var(--home-chat-tabbar-bottom) +
          var(--home-chat-tabbar-height) +
          var(--home-chat-composer-nav-gap)
        );
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-thread {
        padding-bottom: calc(136px + var(--home-chat-composer-nav-gap)) !important;
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-composer {
        position: fixed !important;
        left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px)) !important;
        right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
        bottom: var(--home-chat-composer-bottom) !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        z-index: 89 !important;
      }
    }

    /* Mobile AI answers: replace wide markdown tables with portrait-readable field groups. */
    @media (max-width: 760px) {
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table-wrap {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table,
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table--wide,
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table--storyboard,
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table tbody,
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table tr,
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
        table-layout: auto !important;
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table tbody {
        display: grid !important;
        gap: 10px !important;
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table tr {
        padding: 6px 10px !important;
        border: 1px solid rgba(60, 60, 67, .11) !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, .72) !important;
        box-shadow: none !important;
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table td,
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table th:first-child,
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table td:first-child,
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table--numbered th:first-child,
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table--numbered td:first-child,
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table--script th:nth-child(2),
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table--script td:nth-child(2),
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table--storyboard th:nth-child(2),
      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table--storyboard td:nth-child(2) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table td {
        display: grid !important;
        grid-template-columns: minmax(72px, 30%) minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: start !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(60, 60, 67, .08) !important;
        font-size: 14px !important;
        line-height: 22px !important;
        text-align: left !important;
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table td:last-child {
        border-bottom: 0 !important;
      }

      body.home-screen:not(.login-active) .home-ai-console.is-chat-mode .home-ai-table td::before {
        content: attr(data-label) !important;
        display: block !important;
        min-width: 0 !important;
        color: rgba(60, 60, 67, .66) !important;
        font-size: 12px !important;
        line-height: 20px !important;
        font-weight: 700 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
      }
    }