/* Entry stylesheet for index.html. Keep page-specific home/auth styles here. */
      :root {
        --primary: #165dff;
        --primary-hover: #0e42d2;
        --primary-light: #e8f3ff;
        --accent: #49f5f5;
        --accent-glow: rgba(73, 245, 245, 0.35);
        --accent-surface-light: rgba(73, 245, 245, 0.18);
        --accent-surface-dark: rgba(73, 245, 245, 0.12);
        --bg-canvas: #f7f9fc;
        --bg-sidebar: #fbfbfc;
        --bg-surface: #ffffff;
        --text-primary: #1d2129;
        --text-secondary: #4e5969;
        --text-tertiary: #86909c;
        --text-quaternary: #c9cdd4;
        --border-subtle: #e5e6eb;
        --border-grid: #f2f3f5;
        --border-dark: #2e3440;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 16px;
        --radius-full: 9999px;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family:
          -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', 'Inter', Roboto, sans-serif;
        background-color: var(--bg-canvas);
        color: var(--text-primary);
        line-height: 1.5;
        height: 100vh;
        overflow: hidden;
        display: flex;
        -webkit-font-smoothing: antialiased;
      }

      button,
      input,
      textarea {
        font-family: inherit;
        border: none;
        outline: none;
        background: none;
      }

      /* ============================================================
         LEFT SIDEBAR
         ============================================================ */
      .sidebar {
        width: 260px;
        min-width: 260px;
        height: 100vh;
        background: var(--bg-sidebar);
        border-right: 1px solid var(--border-subtle);
        display: flex;
        flex-direction: column;
        user-select: none;
        transition:
          width 0.2s ease,
          transform 0.2s ease;
        z-index: 20;
        position: relative;
      }

      .sidebar.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden;
        border-right: none;
      }

      .sidebar-header {
        height: 56px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-subtle);
      }

      .brand-box {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
      }

      .brand-logo {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .brand-logo svg {
        display: block;
      }

      .brand-title {
        font-size: 17px;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -0.3px;
      }

      .sidebar-header-actions {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .sidebar-toggle-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s;
      }

      .sidebar-toggle-btn:hover {
        background: var(--border-grid);
        color: var(--text-primary);
      }

      .sidebar-content {
        flex: 1;
        overflow-y: auto;
        padding: 12px 8px;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .sidebar-content::-webkit-scrollbar {
        width: 4px;
      }

      .sidebar-content::-webkit-scrollbar-thumb {
        background: var(--border-subtle);
        border-radius: var(--radius-full);
      }

      .nav-menu {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .nav-item {
        height: 36px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: var(--radius-md);
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.2s;
      }

      .nav-item svg {
        color: var(--text-secondary);
        flex-shrink: 0;
      }

      .nav-item:hover {
        background: var(--primary-light);
        color: var(--primary);
      }

      .nav-item.active {
        background-color: #edf4ff;
        color: var(--primary);
        font-weight: 500;
      }

      .nav-item.active svg {
        color: var(--primary);
      }

      .sidebar-section {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .section-header {
        padding: 4px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: var(--text-tertiary);
        font-weight: 500;
      }

      .section-header-actions {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .section-header-label {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        white-space: nowrap;
      }

      .icon-action-btn {
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        cursor: pointer;
        color: var(--text-tertiary);
        transition: all 0.15s;
        flex-shrink: 0;
      }

      .icon-action-btn:hover {
        background: var(--border-grid);
        color: var(--text-primary);
      }

      .icon-action-btn svg {
        transition: transform 0.2s ease;
      }

      .project-item {
        position: relative;
        z-index: 0;
        margin-bottom: 4px;
      }

      .project-item.menu-open,
      .project-item.chat-submenu-open {
        z-index: 60;
      }

      .projects-section.project-items-collapsed .project-item {
        display: none;
      }

      .projects-section.project-items-collapsed #btn-toggle-projects svg {
        transform: rotate(-90deg);
      }

      .projects-section.project-histories-collapsed .project-sublist {
        display: none;
      }

      .chat-history-section.chat-history-collapsed .history-list {
        display: none;
      }

      .chat-history-section.chat-history-collapsed .btn-toggle-chat-history svg {
        transform: rotate(-90deg);
      }

      /* 项目折叠按钮与聊天历史折叠按钮：默认隐藏，鼠标悬浮在板块头部时才显示 */
      .projects-section #btn-toggle-projects,
      .chat-history-section .btn-toggle-chat-history {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
      }

      .projects-section .section-header:hover #btn-toggle-projects,
      .projects-section #btn-toggle-projects:focus-visible,
      .chat-history-section .section-header:hover .btn-toggle-chat-history,
      .chat-history-section .btn-toggle-chat-history:focus-visible {
        opacity: 1;
        pointer-events: auto;
      }

      .project-item.collapsed .project-sublist {
        display: none;
      }

      /* 暂无对话占位 */
      .project-empty-hint {
        padding: 6px 8px;
        font-size: 12px;
        color: var(--text-tertiary, #86909c);
        font-style: italic;
        user-select: none;
        pointer-events: none;
      }

      /* 拖拽中的项目 */
      .project-item.dragging {
        opacity: 0.4;
        cursor: grabbing;
      }

      /* 拖拽放置目标指示线 */
      .project-item.drag-over-top {
        border-top: 2px solid #165dff;
      }
      .project-item.drag-over-bottom {
        border-bottom: 2px solid #165dff;
      }

      /* Elevate whole section so project menus stack above the chat history block below */
      .projects-section:has(.project-item.menu-open),
      .projects-section:has(.project-item.chat-submenu-open) {
        position: relative;
        z-index: 30;
      }

      .project-title-row {
        position: relative;
        height: 32px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-secondary);
        border-radius: var(--radius-md);
        cursor: pointer;
        user-select: none;
        transition: all 0.15s;
      }

      .project-title-row:hover,
      .project-item.menu-open .project-title-row {
        background: var(--border-grid);
        color: var(--text-primary);
      }

      /* Menu drops below title row; sublist must not paint over it */
      .project-item.menu-open .project-title-row {
        z-index: 10;
      }

      .project-item.menu-open .project-sublist {
        z-index: 1;
      }

      .project-title-text {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .project-title-actions {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 2px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
      }

      .project-item:has(.project-title-row:hover) .project-title-actions,
      .project-item.menu-open .project-title-actions {
        opacity: 1;
        pointer-events: auto;
      }

      .project-item.menu-open .project-more-btn {
        background: rgba(255, 255, 255, 0.85);
        color: var(--text-primary);
      }

      .project-action-btn {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--text-tertiary);
        cursor: pointer;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .project-action-btn:hover {
        background: rgba(255, 255, 255, 0.85);
        color: var(--text-primary);
      }

      .project-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 80;
        min-width: 152px;
        padding: 6px;
        background: #ffffff;
        border: 1px solid #eceeea;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(20, 24, 20, 0.12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
          opacity 0.15s ease,
          visibility 0.15s ease,
          transform 0.15s ease;
      }

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

      .project-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 8px 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        font-size: 13px;
        color: #171a17;
        text-align: left;
        cursor: pointer;
        transition: background 0.12s ease;
      }

      .project-menu-item svg {
        flex-shrink: 0;
        color: #5c615a;
      }

      .project-menu-item:hover {
        background: #f3f4f2;
      }

      .project-menu-item.danger {
        color: #e5484d;
      }

      .project-menu-item.danger svg {
        color: #e5484d;
      }

      .project-item.pinned .project-title-row {
        background: #f7f8fa;
      }

      .project-sublist {
        position: relative;
        z-index: 1;
        padding-left: 24px;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .project-subitem,
      .history-item {
        position: relative;
        height: 32px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        color: var(--text-secondary);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all 0.15s;
      }

      .chat-list-label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .chat-list-actions {
        position: relative;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
      }

      .chat-list-item:hover .chat-list-actions,
      .chat-list-item.menu-open .chat-list-actions {
        opacity: 1;
        pointer-events: auto;
      }

      .chat-list-item.menu-open .chat-list-more-btn {
        background: rgba(255, 255, 255, 0.85);
        color: var(--text-primary);
      }

      .chat-list-item.menu-open {
        z-index: 5;
      }

      .project-item.chat-submenu-open:not(.menu-open) .project-sublist {
        z-index: 6;
      }

      .chat-list-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 80;
        min-width: 132px;
        padding: 6px;
        background: #ffffff;
        border: 1px solid #eceeea;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(20, 24, 20, 0.12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
          opacity 0.15s ease,
          visibility 0.15s ease,
          transform 0.15s ease;
      }

      .chat-list-item.menu-open .chat-list-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
      }

      .chat-list-rename-input {
        flex: 1;
        min-width: 0;
        height: 24px;
        padding: 0 6px;
        border: 1px solid var(--primary);
        border-radius: 6px;
        font-size: 13px;
        color: var(--text-primary);
        background: #ffffff;
        outline: none;
      }

      .project-subitem:hover,
      .history-item:hover {
        background: var(--border-grid);
        color: var(--primary);
      }

      .project-subitem.active,
      .history-item.active {
        background-color: #edf4ff !important;
        color: var(--primary) !important;
        font-weight: 500 !important;
      }

      .search-box {
        position: relative;
        padding: 0 4px;
        margin-bottom: 4px;
      }

      .search-box input {
        width: 100%;
        height: 30px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        padding: 0 28px 0 10px;
        font-size: 12px;
        background: var(--bg-surface);
        color: var(--text-primary);
        transition: border-color 0.15s;
      }

      .search-box input:focus {
        border-color: var(--primary);
      }

      .search-box svg {
        position: absolute;
        right: 12px;
        top: 8px;
        color: var(--text-tertiary);
        pointer-events: none;
      }

      .history-list {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1px;
      }

      .history-list .chat-list-item.menu-open {
        z-index: 10;
      }

      .sidebar-footer {
        height: 56px;
        padding: 0 16px;
        border-top: 1px solid var(--border-subtle);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .user-profile {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        position: relative;
      }

      .user-profile:hover .user-name {
        color: var(--primary);
      }

      .account-menu {
        position: fixed;
        left: 12px;
        bottom: 66px;
        z-index: 120;
        width: 228px;
        padding: 14px 12px 12px;
        border: 1px solid #eceeea;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 16px 38px rgba(20, 24, 20, 0.14);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px) scale(0.98);
        transform-origin: bottom left;
        transition: all 0.18s ease;
      }

      .account-menu[hidden] {
        display: none;
      }

      .account-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
      }

      .account-summary {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 2px 2px 13px;
      }

      .account-summary .avatar {
        width: 34px;
        height: 34px;
        background: #050505;
        font-size: 12px;
      }

      .account-summary-copy {
        min-width: 0;
      }

      .account-summary-name {
        font-size: 14px;
        font-weight: 700;
        color: #22251f;
      }

      .account-summary-plan {
        margin-top: 1px;
        font-size: 11px;
        color: #8a8f87;
      }

      .account-divider {
        height: 1px;
        margin: 0 -12px 10px;
        background: #eceeea;
      }

      .account-quota {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2px 9px;
        font-size: 13px;
        border: 0;
        background: transparent;
        width: 100%;
        text-align: left;
        cursor: pointer;
      }

      .account-quota strong {
        color: #171a15;
      }

      .account-quota span {
        color: #858a83;
      }

      .account-quota b {
        margin-right: 6px;
        color: #171a15;
        font-size: 15px;
      }

      .account-upgrade {
        width: 100%;
        height: 34px;
        margin-bottom: 11px;
        border-radius: 18px;
        color: #54e8d5;
        background: #050505;
        font-size: 13px;
        cursor: pointer;
      }

      .account-menu-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .account-menu-item {
        width: 100%;
        height: 28px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 4px;
        border-radius: 6px;
        color: #2b2e29;
        font-size: 13px;
        text-align: left;
        cursor: pointer;
      }

      .account-menu-item:hover {
        background: #f3f5f1;
      }

      .account-menu-item svg {
        flex: 0 0 auto;
        color: #30342e;
      }

      .account-menu-item.logout {
        color: #ef4e4e;
      }

      .account-menu-item.logout svg {
        color: #ef4e4e;
      }

      .avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--primary);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
      }

      .user-name {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
      }

      /* ============================================================
         MAIN WORKSPACE AREA
         ============================================================ */
      .workspace {
        flex: 1;
        height: 100vh;
        overflow-y: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        background: #ffffff;
      }

      .top-navbar {
        height: auto;
        padding: 28px 36px 0 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        position: sticky;
        top: 0;
        z-index: 10;
      }

      .sidebar-show-btn {
        width: 32px;
        height: 32px;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        cursor: pointer;
        color: var(--text-secondary);
      }

      .sidebar-show-btn:hover {
        background-color: #f2f3f5;
        color: var(--text-primary);
      }

      .sidebar-show-btn.visible {
        display: flex;
      }

      .credits-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        background: #f7f8fa;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-full);
        font-size: 13px;
        font-weight: 600;
        font-family: 'Roboto Flex', sans-serif;
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .credits-pill:hover {
        border-color: #165dff;
        box-shadow: 0 0 10px rgba(22, 93, 255, 0.15);
      }

      .credits-pill svg {
        color: #165dff;
      }

      /* ── Credits Pill Wrapper & Popup ── */
      .credits-pill-wrapper {
        position: relative;
      }

      .credits-popup {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 200;
        width: 228px;
        background: #fff;
        border: 1px solid #eceeea;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(20, 24, 20, 0.13);
        padding: 14px 16px 10px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition:
          opacity 0.18s ease,
          visibility 0.18s ease,
          transform 0.18s ease;
        pointer-events: none;
      }

      .credits-popup.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      .credits-popup-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 0;
      }

      .credits-popup-row + .credits-popup-row {
        border-top: 1px solid #f0f0ee;
      }

      .credits-popup-row strong {
        font-size: 15px;
        font-weight: 700;
        color: #171a17;
        display: block;
      }

      .credits-popup-muted {
        font-size: 11px;
        color: #8a8f87;
        margin-top: 3px;
        line-height: 1.5;
      }

      .credits-popup-btn {
        flex-shrink: 0;
        padding: 6px 16px;
        background: #171a17;
        color: #fff;
        border: none;
        border-radius: 100px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        transition: opacity 0.15s;
      }

      .credits-popup-btn:hover {
        opacity: 0.82;
      }

      .credits-popup-link {
        display: block;
        text-align: left;
        font-size: 12px;
        color: #8a8f87;
        padding: 10px 0 2px;
        cursor: pointer;
        text-decoration: none;
        border-top: 1px solid #f0f0ee;
        margin-top: 2px;
        transition: color 0.15s;
      }

      .credits-popup-link:hover {
        color: #171a17;
      }

      /* ── Notification Popup (bell icon, opens right of sidebar) ── */
      .notification-popup {
        position: fixed;
        left: 272px;
        bottom: 14px;
        z-index: 130;
        width: 320px;
        background: #fff;
        border: 1px solid #eceeea;
        border-radius: 20px;
        box-shadow: 0 16px 40px rgba(20, 24, 20, 0.14);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-8px) scale(0.98);
        transform-origin: bottom left;
        transition:
          opacity 0.18s ease,
          visibility 0.18s ease,
          transform 0.18s ease;
        pointer-events: none;
      }

      .notification-popup.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(0) scale(1);
        pointer-events: auto;
      }

      .notification-popup-header {
        padding: 20px 20px 0;
      }

      .notification-popup-title {
        font-size: 17px;
        font-weight: 700;
        color: #171a17;
        margin-bottom: 14px;
      }

      .notification-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid #eceeea;
        margin: 0 -20px;
        padding: 0 20px;
      }

      .notification-tab {
        padding: 7px 0;
        margin-right: 20px;
        font-size: 13px;
        font-weight: 500;
        color: #a8ada6;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        transition:
          color 0.15s,
          border-color 0.15s;
        position: relative;
        bottom: -1px;
      }

      .notification-tab.active {
        color: #171a17;
        border-bottom-color: #171a17;
        font-weight: 600;
      }

      .notification-popup-body {
        padding: 4px 20px 16px;
        max-height: 340px;
        overflow-y: auto;
      }

      .notification-popup-body::-webkit-scrollbar {
        width: 4px;
      }

      .notification-popup-body::-webkit-scrollbar-thumb {
        background: #e0e2de;
        border-radius: 4px;
      }

      .notification-item {
        padding: 16px 0;
        border-bottom: 1px solid #f0f0ee;
      }

      .notification-item:last-child {
        border-bottom: 0;
      }

      .notification-item-title {
        font-size: 13px;
        font-weight: 600;
        color: #171a17;
        margin-bottom: 5px;
      }

      .notification-item-body {
        font-size: 12px;
        color: #5a5e58;
        line-height: 1.6;
        margin-bottom: 8px;
      }

      .notification-item-date {
        font-size: 11px;
        color: #b0b5ae;
      }

      .main-scroll-content {
        padding: 20px 36px 80px 36px;
        max-width: 1480px;
        margin: 0 auto;
        width: 100%;
      }

      /* Hero Title */
      .hero-greeting {
        font-size: 30px;
        font-weight: 600;
        color: var(--text-primary);
        text-align: center;
        margin-bottom: 24px;
        letter-spacing: -0.5px;
      }

      /* Center Input Box */
      .prompt-box-container {
        max-width: 820px;
        margin: 0 auto 24px auto;
        position: relative;
      }

      .prompt-card {
        background: #ffffff;
        border: 1px solid #d9dbe3;
        border-radius: var(--radius-xl);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        padding: 16px 18px 12px 18px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }

      .prompt-card:focus-within {
        border-color: var(--primary);
        box-shadow: 0 4px 24px rgba(22, 93, 255, 0.12);
      }

      .prompt-input-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        width: 100%;
        cursor: text;
        padding: 2px 0;
      }

      .prompt-input-area {
        flex: 1 1 140px;
        min-width: 80px;
        border: none;
        outline: none;
        background: transparent;
        font-size: 15px;
        color: var(--text-primary);
        resize: none;
        line-height: 24px;
        min-height: 26px;
        height: 26px;
        padding: 1px 0;
        box-sizing: border-box;
      }

      .prompt-input-area::placeholder {
        color: var(--text-tertiary);
      }

      /* Dynamic Reference Slots Container inside Prompt Card */
      .prompt-ref-slots {
        display: none;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
        flex-wrap: wrap;
      }

      .prompt-ref-slots.show {
        display: flex;
      }

      .ref-slot-item {
        position: relative;
        width: 68px;
        height: 68px;
        border-radius: var(--radius-md);
        background: #f7f8fa;
        border: 1px dashed #c9cdd4;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
        transition: all 0.15s;
        font-size: 11px;
        color: var(--text-secondary);
        user-select: none;
      }

      .ref-slot-item:hover {
        border-color: var(--primary);
        background: #edf4ff;
        color: var(--primary);
      }

      .ref-slot-item.has-asset {
        border-style: solid;
        border-color: #d9dbe3;
        background: #ffffff;
      }

      .ref-slot-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--radius-md);
      }

      .ref-badge {
        position: absolute;
        top: -7px;
        right: -7px;
        background: #1d2129;
        color: #ffffff;
        font-size: 9px;
        padding: 1px 6px;
        border-radius: var(--radius-full);
        line-height: 14px;
        white-space: nowrap;
        font-weight: 500;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      }

      .ref-slot-remove {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #1d2129;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        z-index: 2;
        transition: background 0.15s;
      }

      .ref-slot-remove:hover {
        background: #ba1a1a;
      }

      .ref-slot-title {
        font-size: 11px;
        font-weight: 500;
      }

      .ref-slot-item.threed-view-slot {
        width: 56px;
        height: 56px;
        border: none;
        background: #f2f3f5;
        border-radius: 12px;
        color: var(--text-primary);
        gap: 2px;
      }

      .ref-slot-item.threed-view-slot:hover {
        border: none;
        background: #e5e6eb;
        color: var(--text-primary);
      }

      .ref-slot-item.threed-view-slot.has-asset {
        border: none;
        background: #ffffff;
      }

      .prompt-chips-row {
        display: contents;
      }

      .prompt-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #ffffff;
        color: var(--text-primary, #1d2129);
        font-size: 12px;
        font-weight: 500;
        padding: 2px 8px 2px 6px;
        height: 26px;
        border-radius: 6px;
        border: 1px solid #d9dbe3;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
        user-select: none;
        transition:
          border-color 0.15s,
          background-color 0.15s;
        max-width: 220px;
        box-sizing: border-box;
      }

      .prompt-chip:hover {
        border-color: #c9cdd4;
        background-color: #f7f8fa;
      }

      .chip-file-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .chip-file-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 130px;
        line-height: 1;
      }

      .prompt-chip.prompt-chip-pref {
        background: #f2f3f5;
        color: var(--text-primary);
        border: 1px solid #d9dbe3;
      }

      .prompt-chip.prompt-chip-pref svg {
        color: var(--text-secondary);
      }

      .prompt-chip-remove {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-tertiary, #86909c);
        font-size: 13px;
        line-height: 1;
        margin-left: 2px;
        border-radius: 50%;
        width: 14px;
        height: 14px;
        transition:
          color 0.15s,
          background-color 0.15s;
      }

      .prompt-chip-remove:hover {
        color: var(--text-primary, #1d2129);
        background-color: #e5e6eb;
      }

      .prompt-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .toolbar-left,
      .toolbar-right {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* Plus / Attach Button */
      .tool-btn-circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f2f3f5;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s;
      }

      .tool-btn-circle:hover {
        background: #e5e6eb;
        color: var(--text-primary);
      }

      /* Agent Mode Pill */
      .mode-select-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-full);
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.15s;
      }

      .mode-select-pill:hover {
        background: #f7f8fa;
        border-color: #c9cdd4;
      }

      /* Mode Settings Parameter Summary Pill */
      .param-summary-pill {
        display: none;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        background: #f2f3f5;
        border: 1px solid transparent;
        border-radius: var(--radius-full);
        font-size: 12px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
      }

      .param-summary-pill.show {
        display: inline-flex;
      }

      .param-summary-pill:hover,
      .param-summary-pill.active {
        background: #e5effc;
        border-color: #c9dbff;
        color: var(--primary);
      }

      .param-summary-pill svg {
        transition: transform 0.2s ease;
      }

      .param-summary-pill.active svg {
        transform: rotate(180deg);
      }

      /* PPT Reference Elements Pill */
      .ref-elements-pill {
        display: none;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        background: #f2f3f5;
        border: 1px solid transparent;
        border-radius: var(--radius-full);
        font-size: 12px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
      }

      .ref-elements-pill.show {
        display: inline-flex;
      }

      .ref-elements-pill:hover,
      .ref-elements-pill.active {
        background: #e5effc;
        border-color: #c9dbff;
        color: var(--primary);
      }

      .ref-elements-pill svg {
        transition: transform 0.2s ease;
      }

      .ref-elements-pill.active svg {
        transform: rotate(180deg);
      }

      /* Toolbar Model Selector Pill */
      .model-select-pill {
        display: none;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-full);
        font-size: 12px;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.15s;
      }

      .model-select-pill.show {
        display: inline-flex;
      }

      .model-select-pill:hover,
      .model-select-pill.active {
        border-color: var(--primary);
        color: var(--primary);
      }

      /* Agent generation tier selector */
      .agent-tier-wrapper {
        position: relative;
        display: inline-flex;
      }

      .agent-tier-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 30px;
        padding: 0 10px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-full);
        background: #ffffff;
        color: var(--text-primary);
        font-size: 13px;
        cursor: pointer;
        transition: all 0.15s;
      }

      .agent-tier-pill:hover,
      .agent-tier-pill.active {
        border-color: var(--primary);
        color: var(--primary);
      }

      .agent-tier-pill svg {
        color: var(--text-secondary);
      }

      .agent-tier-menu {
        position: absolute;
        left: 0;
        bottom: calc(100% + 8px);
        width: 250px;
        padding: 4px;
        display: none;
        flex-direction: column;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        z-index: 60;
      }

      .agent-tier-menu.show {
        display: flex;
      }

      .agent-tier-option {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 7px 10px;
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        text-align: left;
        cursor: pointer;
      }

      .agent-tier-option:hover {
        background: #f7f8fa;
      }

      .agent-tier-option-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 24px;
        border-radius: var(--radius-sm);
        background: #f2f3f5;
        color: var(--text-secondary);
      }

      .agent-tier-option-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
        flex: 1;
      }

      .agent-tier-option-name {
        font-size: 13px;
        font-weight: 600;
      }

      .agent-tier-option-desc {
        font-size: 11px;
        color: var(--text-tertiary);
        white-space: nowrap;
      }

      .agent-tier-option-check {
        color: var(--text-secondary);
        opacity: 0;
      }

      .agent-tier-option.selected .agent-tier-option-check {
        opacity: 1;
      }

      /* Model Preferences Cube Icon Button */
      .cube-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s;
      }

      .cube-btn:hover {
        background: #f2f3f5;
        color: var(--primary);
      }

      /* Send Button */
      .send-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f2f3f5;
        color: var(--text-tertiary);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
      }

      .send-btn.active {
        background: var(--primary);
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(22, 93, 255, 0.35);
      }

      /* Quick Tags 2x4 Grid */
      .quick-tags-grid {
        max-width: 820px;
        margin: 0 auto 36px auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }

      .quick-tag-card {
        background: #ffffff;
        border: 1px solid #eaebf0;
        border-radius: var(--radius-lg);
        padding: 12px 14px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }

      .quick-tag-card:hover {
        border-color: #c9dbff;
        background: #f9fbff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(22, 93, 255, 0.06);
      }

      .quick-tag-title {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text-primary);
      }

      .quick-tag-desc {
        font-size: 11.5px;
        color: var(--text-tertiary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Subview Navigation Tabs */
      .subviews-bar {
        display: flex;
        align-items: center;
        gap: 24px;
        border-bottom: 1px solid var(--border-grid);
        margin-bottom: 18px;
        padding-bottom: 10px;
      }

      .subview-tab {
        font-size: 15px;
        font-weight: 500;
        color: var(--text-tertiary);
        cursor: pointer;
        position: relative;
        padding-bottom: 4px;
        transition: color 0.15s;
      }

      .subview-tab:hover {
        color: var(--text-primary);
      }

      .subview-tab.active {
        font-weight: 600;
        color: var(--text-primary);
      }

      .subview-tab.active::after {
        content: '';
        position: absolute;
        bottom: -11px;
        left: 0;
        right: 0;
        height: 2.5px;
        background: var(--text-primary);
        border-radius: 2px;
      }

      /* Category Pills Bar (for 精选案例) */
      .categories-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
      }

      .category-pill {
        padding: 5px 14px;
        font-size: 13px;
        font-weight: 500;
        border-radius: var(--radius-full);
        background: #f2f3f5;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s;
      }

      .category-pill:hover {
        background: #e5e6eb;
        color: var(--text-primary);
      }

      .category-pill.active {
        background: #1d2129;
        color: #ffffff;
      }

      /* Cards Grid (Cases & Skills) */
      .cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
      }

      .item-card {
        background: #ffffff;
        border: 1px solid #eaebf0;
        border-radius: var(--radius-lg);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: all 0.2s ease;
        position: relative;
      }

      .item-card:hover {
        border-color: #d0d5dd;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        transform: translateY(-2px);
      }

      .card-media-box {
        position: relative;
        width: 100%;
        height: 195px;
        background: #f2f3f5;
        overflow: hidden;
      }

      .card-media-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }

      .item-card:hover .card-media-box img {
        transform: scale(1.025);
      }

      .card-bookmark-btn {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-secondary);
        transition: all 0.15s;
        z-index: 2;
      }

      .card-bookmark-btn:hover {
        background: #ffffff;
        color: var(--primary);
        transform: scale(1.08);
      }

      .card-bookmark-btn.saved {
        color: #ffaa00;
      }

      .card-action-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 4px 12px;
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(4px);
        font-size: 12px;
        font-weight: 500;
        color: var(--text-primary);
        border: 1px solid rgba(0, 0, 0, 0.08);
        cursor: pointer;
        transition: all 0.15s;
        z-index: 2;
      }

      .card-action-btn:hover {
        background: var(--primary);
        color: #ffffff;
        border-color: var(--primary);
      }

      .card-type-badge {
        position: absolute;
        bottom: 10px;
        left: 10px;
        width: 24px;
        height: 24px;
        border-radius: var(--radius-sm);
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        z-index: 2;
      }

      .card-body {
        padding: 14px 14px 12px 14px;
        display: flex;
        flex-direction: column;
        flex: 1;
      }

      .card-title {
        font-size: 14.5px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 5px;
        line-height: 1.4;
      }

      .card-description {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.5;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex: 1;
      }

      .card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: var(--text-tertiary);
        border-top: 1px solid #f2f3f5;
        padding-top: 8px;
        margin-top: 10px;
      }

      .card-footer:empty,
      .card-footer:has(.card-author:only-child) {
        display: none !important;
      }

      .card-author {
        display: none !important;
      }

      .card-author-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #d8e3f7;
        color: var(--primary);
        font-size: 9px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .card-stats {
        display: flex;
        align-items: center;
        gap: 4px;
        font-family: 'Roboto Flex', sans-serif;
        font-variant-numeric: tabular-nums;
      }

      /* ============================================================
         INTERACTIVE OVERLAYS & PANELS (MAPPED FROM FIGMA RED ARROWS)
         ============================================================ */

      /* 1. Attachment Popover Menu (Arrow from '+' in input) */
      .attachment-btn-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .popover-menu {
        position: absolute;
        bottom: calc(100% + 6px);
        left: 0;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: 6px;
        width: 170px;
        z-index: 50;
        display: none;
        flex-direction: column;
        animation: fadeIn 0.15s ease;
        overflow: visible;
      }

      .popover-menu.show {
        display: flex;
      }

      .popover-menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px;
        font-size: 13px;
        color: var(--text-primary);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: background 0.15s;
      }

      .popover-menu-item:hover {
        background-color: #f2f3f5;
      }

      .popover-item-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .popover-item-left svg {
        color: var(--text-secondary);
      }

      .popover-menu-item.has-submenu {
        position: relative;
      }

      .skills-submenu {
        position: absolute;
        left: calc(100% + 6px);
        top: -6px;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        padding: 6px;
        min-width: 240px;
        max-width: 320px;
        z-index: 60;
        display: none;
        flex-direction: column;
        animation: fadeIn 0.15s ease;
      }

      .skills-submenu.show {
        display: flex;
      }

      .skills-submenu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        font-size: 14px;
        line-height: 1.4;
        color: var(--text-primary);
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.15s;
        white-space: nowrap;
        overflow: hidden;
      }

      .skills-submenu-item:hover {
        background-color: #f2f3f5;
      }

      .skills-submenu-item svg {
        flex-shrink: 0;
        color: #c9cdd4;
      }

      .skills-submenu-item span {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* 2. Mode Select Dropdown (Arrow from 'Agent ▾' in input) */
      .mode-dropdown {
        position: absolute;
        top: calc(100% + 6px);
        left: 42px;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: 6px;
        width: 160px;
        z-index: 50;
        display: none;
        flex-direction: column;
        animation: fadeIn 0.15s ease;
      }

      .mode-dropdown.show {
        display: flex;
      }

      .mode-dropdown-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 10px;
        font-size: 13px;
        color: var(--text-primary);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: background 0.15s;
      }

      .mode-dropdown-item:hover {
        background-color: #f2f3f5;
      }

      .mode-dropdown-item.active {
        color: var(--primary);
        font-weight: 500;
      }

      .mode-item-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* 3. Model Preferences Popup (Arrow from Cube '🧊' in input) */
      .model-prefs-modal {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 320px;
        max-height: 480px;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        z-index: 50;
        display: none;
        flex-direction: column;
        overflow: hidden;
        animation: fadeIn 0.15s ease;
      }

      .model-prefs-modal.show {
        display: flex;
      }

      .model-prefs-header {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-grid);
      }

      .model-prefs-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
      }

      .auto-toggle-group {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text-secondary);
      }

      /* Toggle Switch */
      .switch {
        position: relative;
        display: inline-block;
        width: 32px;
        height: 18px;
      }

      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #c9cdd4;
        transition: 0.2s;
        border-radius: 18px;
      }

      .slider:before {
        position: absolute;
        content: '';
        height: 14px;
        width: 14px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: 0.2s;
        border-radius: 50%;
      }

      input:checked + .slider {
        background-color: #1d2129;
      }

      input:checked + .slider:before {
        transform: translateX(14px);
      }

      .model-tabs-row {
        display: flex;
        padding: 6px 12px;
        background: #f9fafb;
        gap: 4px;
        border-bottom: 1px solid var(--border-grid);
      }

      .model-tab-btn {
        flex: 1;
        text-align: center;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.15s;
      }

      .model-tab-btn:hover {
        color: var(--text-primary);
      }

      .model-tab-btn.active {
        background: #ffffff;
        color: var(--text-primary);
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      }

      .model-list-container {
        flex: 1;
        overflow-y: auto;
        padding: 8px 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .model-list-container::-webkit-scrollbar {
        width: 4px;
      }
      .model-list-container::-webkit-scrollbar-thumb {
        background: #e2e4e8;
        border-radius: 4px;
      }

      .model-item-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 8px 10px;
        border-radius: var(--radius-md);
        border: 1px solid transparent;
        cursor: pointer;
        transition:
          background 0.15s,
          border-color 0.15s;
      }

      .model-item-card:hover {
        background-color: #f7f8fa;
      }

      .model-item-card.selected {
        background-color: transparent;
        border-color: transparent;
      }

      .model-item-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        padding-right: 8px;
      }

      .model-item-name {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .model-vip-badge {
        font-size: 10px;
        padding: 1px 4px;
        background: #edf4ff;
        color: var(--primary);
        border-radius: 2px;
        font-weight: normal;
      }

      .model-item-desc {
        font-size: 11px;
        color: var(--text-tertiary);
        line-height: 1.3;
      }

      .model-item-check {
        color: var(--primary);
        margin-top: 2px;
      }

      .model-item-check.disabled {
        color: var(--text-quaternary);
      }

      /* ============================================================
         MODE SPECIFIC SETTINGS PANELS (FIGMA RED ARROWS 6-10)
         ============================================================ */

      .settings-panel {
        position: absolute;
        top: calc(100% + 8px);
        left: 48px;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-xl);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        padding: 18px;
        z-index: 50;
        display: none;
        flex-direction: column;
        gap: 16px;
        animation: fadeIn 0.15s ease;
        width: 330px;
        color: var(--text-primary);
      }

      .settings-panel.show {
        display: flex;
      }

      .settings-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 2px;
      }

      .settings-panel-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
      }

      .settings-panel-close {
        cursor: pointer;
        color: var(--text-tertiary);
        display: flex;
        align-items: center;
        transition: color 0.15s;
      }

      .settings-panel-close:hover {
        color: var(--text-primary);
      }

      .settings-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .settings-label {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      /* Segmented control buttons */
      .segmented-row {
        display: flex;
        background: #f2f3f5;
        border-radius: var(--radius-md);
        padding: 2px;
        gap: 2px;
      }

      .segmented-btn {
        flex: 1;
        padding: 5px 8px;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.15s;
        border: none;
        background: transparent;
        user-select: none;
      }

      .segmented-btn:hover {
        color: var(--text-primary);
      }

      .segmented-btn.active {
        background: #ffffff;
        color: var(--text-primary);
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      }

      /* Option grids */
      .options-grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
      }

      .options-grid-5 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
      }

      .option-grid-btn {
        padding: 6px 4px;
        text-align: center;
        font-size: 11.5px;
        border-radius: var(--radius-sm);
        border: 1px solid #e5e6eb;
        background: #ffffff;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.15s;
        user-select: none;
      }

      .option-grid-btn:hover {
        border-color: #c9cdd4;
        background: #f7f8fa;
      }

      .option-grid-btn.active {
        border-color: var(--primary);
        background: #edf4ff;
        color: var(--primary);
        font-weight: 600;
      }

      /* Dimension inputs */
      .dimension-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .dimension-box {
        flex: 1;
        display: flex;
        align-items: center;
        border: 1px solid #e5e6eb;
        border-radius: var(--radius-sm);
        padding: 5px 8px;
        gap: 6px;
        background: #ffffff;
      }

      .dimension-box span {
        font-size: 11px;
        color: var(--text-tertiary);
        font-weight: 500;
      }

      .dimension-box input {
        width: 100%;
        border: none;
        outline: none;
        font-size: 12px;
        color: var(--text-primary);
        font-family: 'Roboto Flex', sans-serif;
        font-variant-numeric: tabular-nums;
      }

      /* iOS Style Toggle Switch */
      .ios-switch-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: var(--text-primary);
      }

      .ios-switch {
        position: relative;
        display: inline-block;
        width: 36px;
        height: 20px;
      }

      .ios-switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .ios-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e5e6eb;
        transition: 0.2s;
        border-radius: 20px;
      }

      .ios-slider:before {
        position: absolute;
        content: '';
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: 0.2s;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      }

      .ios-switch input:checked + .ios-slider {
        background-color: var(--primary);
      }

      .ios-switch input:checked + .ios-slider:before {
        transform: translateX(16px);
      }

      /* Reference Elements Popover */
      .check-tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .check-tag-pill {
        padding: 4px 10px;
        border-radius: var(--radius-full);
        border: 1px solid #e5e6eb;
        background: #f7f8fa;
        color: var(--text-secondary);
        font-size: 12px;
        cursor: pointer;
        transition: all 0.15s;
        user-select: none;
      }

      .check-tag-pill:hover {
        border-color: #c9cdd4;
        color: var(--text-primary);
      }

      .check-tag-pill.active {
        border-color: var(--primary);
        background: #edf4ff;
        color: var(--primary);
        font-weight: 500;
      }

      /* Number Input Field */
      .number-input-field {
        width: 100%;
        border: 1px solid #e5e6eb;
        border-radius: var(--radius-sm);
        padding: 6px 10px;
        font-size: 12px;
        color: var(--text-primary);
        font-family: 'Roboto Flex', sans-serif;
        font-variant-numeric: tabular-nums;
        outline: none;
      }

      .number-input-field:focus {
        border-color: var(--primary);
      }

      /* Video Camera Movement Grid */
      .camera-moves-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }

      .camera-move-btn {
        padding: 6px 4px;
        text-align: center;
        font-size: 11px;
        border-radius: var(--radius-sm);
        border: 1px solid #e5e6eb;
        background: #ffffff;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.15s;
        user-select: none;
      }

      .camera-move-btn:hover {
        border-color: #c9cdd4;
        background: #f7f8fa;
      }

      .camera-move-btn.active {
        border-color: var(--primary);
        background: #edf4ff;
        color: var(--primary);
        font-weight: 500;
      }

      /* 4. Slide-over Right Drawer (Skills & Cases Drawer) */
      .drawer-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(2px);
        z-index: 100;
        display: none;
        opacity: 0;
        transition: opacity 0.25s ease;
      }

      .drawer-backdrop.show {
        display: block;
        opacity: 1;
      }

      .right-drawer {
        position: fixed;
        top: 0;
        right: -600px;
        width: 580px;
        max-width: 90vw;
        height: 100vh;
        background: #ffffff;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
        z-index: 101;
        display: flex;
        flex-direction: column;
        transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .right-drawer.open {
        right: 0;
      }

      .drawer-header {
        height: 56px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-grid);
      }

      .drawer-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
      }

      .drawer-close-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        cursor: pointer;
        color: var(--text-secondary);
        transition: background 0.15s;
      }

      .drawer-close-btn:hover {
        background-color: #f2f3f5;
        color: var(--text-primary);
      }

      .drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
      }

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

      /* Toast Notification */
      .toast-container {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: #1d2129;
        color: #ffffff;
        padding: 9px 18px;
        border-radius: var(--radius-full);
        font-size: 13px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        z-index: 200;
        display: none;
        align-items: center;
        gap: 8px;
        animation: toastIn 0.2s ease;
      }

      .toast-container.show {
        display: flex;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(4px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translate(-50%, 10px);
        }
        to {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }

      /* ============================================================
         IMAGE MODE DEDICATED MODEL SELECTION DROPDOWN (FIGMA RED BOX 4)
         ============================================================ */
      .image-models-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 290px;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        padding: 6px;
        z-index: 60;
        display: none;
        flex-direction: column;
        animation: fadeIn 0.15s ease;
      }

      .image-models-dropdown.show {
        display: flex;
      }

      .image-models-header {
        padding: 6px 10px 6px 10px;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-tertiary);
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--border-grid);
        margin-bottom: 4px;
      }

      .image-models-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-height: 380px;
        overflow-y: auto;
      }

      .image-model-option {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 8px 10px;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: background 0.15s;
        gap: 8px;
      }

      .image-model-option:hover {
        background: #f2f3f5;
      }

      .image-model-option.active {
        background: #e5effc;
      }

      .image-model-option-left {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        flex: 1;
      }

      .image-model-icon {
        width: 15px;
        height: 15px;
        margin-top: 2px;
        color: var(--text-secondary);
        flex-shrink: 0;
      }

      .image-model-option.active .image-model-icon {
        color: var(--primary);
      }

      .image-model-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .image-model-title {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.2;
      }

      .image-model-option.active .image-model-title {
        color: var(--primary);
      }

      .image-model-desc {
        font-size: 10.5px;
        color: var(--text-tertiary);
        line-height: 1.3;
      }

      .image-model-check {
        color: var(--primary);
        margin-top: 2px;
        flex-shrink: 0;
      }

      /* ============================================================
         VIDEO MODE DEDICATED MODEL SELECTION DROPDOWN (FIGMA RED ARROW 4)
         ============================================================ */
      .video-models-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 285px;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        padding: 8px 6px;
        z-index: 60;
        display: none;
        flex-direction: column;
        animation: fadeIn 0.15s ease;
      }

      .video-models-dropdown.show {
        display: flex;
      }

      .video-models-header {
        padding: 6px 12px 8px 12px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-grid);
        margin-bottom: 4px;
      }

      .video-models-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-height: 420px;
        overflow-y: auto;
      }

      .video-model-option {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 9px 10px;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: background 0.15s;
        gap: 8px;
      }

      .video-model-option:hover {
        background: #f2f3f5;
      }

      .video-model-option.active {
        background: #e5effc;
      }

      .video-model-option-left {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        flex: 1;
      }

      .video-model-icon {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        color: var(--text-secondary);
        flex-shrink: 0;
      }

      .video-model-option.active .video-model-icon {
        color: var(--primary);
      }

      .video-model-meta {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }

      .video-model-title-row {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .video-model-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.2;
      }

      .video-model-option.active .video-model-title {
        color: var(--primary);
      }

      .video-model-vip-badge {
        background: #e8f3ff;
        color: #165dff;
        font-size: 10px;
        font-weight: 500;
        padding: 1px 4px;
        border-radius: 2px;
        line-height: 1.3;
      }

      .video-model-desc {
        font-size: 11px;
        color: var(--text-tertiary);
        line-height: 1.35;
      }

      .video-model-tag {
        align-self: flex-start;
        background: #f2f3f5;
        color: var(--text-secondary);
        font-size: 10.5px;
        font-weight: 500;
        padding: 1px 6px;
        border-radius: 3px;
        margin-top: 2px;
        font-variant-numeric: tabular-nums;
      }

      .video-model-check {
        color: var(--primary);
        margin-top: 3px;
        flex-shrink: 0;
      }

      /* Video Slots Attachment Popover Menus (Figma Red Arrows 5 & 6) */
      .video-slot-menu {
        position: absolute;
        left: 0;
        min-width: 180px;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        padding: 6px;
        z-index: 60;
        display: none;
        flex-direction: column;
        gap: 2px;
        animation: fadeIn 0.15s ease;
      }

      .video-slot-menu.show {
        display: flex;
      }

      /* 图像参考图菜单：向下弹出 */
      #img-ref-slot-menu {
        top: 52px;
        left: 0;
      }

      .video-slot-menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        border-radius: var(--radius-md);
        font-size: 13px;
        color: var(--text-primary);
        cursor: pointer;
        transition: background 0.15s;
      }

      .video-slot-menu-item:hover {
        background: #f2f3f5;
      }

      .video-slot-menu-item .menu-item-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* Toolbar Skills Button (Figma Red Arrow 1) */
      .toolbar-skill-pill {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        height: 28px;
        border-radius: var(--radius-full);
        border: 1px solid var(--border-subtle);
        background: #ffffff;
        color: var(--text-primary);
        font-size: 12px;
        cursor: pointer;
        transition: all 0.15s;
        font-weight: 500;
      }

      .toolbar-skill-pill:hover {
        background: #f2f3f5;
        border-color: #c9cdd4;
      }

      .toolbar-skill-pill.active {
        background: #edf4ff;
        border-color: var(--primary);
        color: var(--primary);
      }

      /* Video Settings Aspect Cards */
      .video-aspect-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }

      .video-aspect-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 66px;
        border-radius: var(--radius-md);
        border: 1px solid #e5e6eb;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.15s;
        color: var(--text-primary);
      }

      .video-aspect-card:hover {
        border-color: #c9cdd4;
        background: #f7f8fa;
      }

      .video-aspect-card.active {
        border-color: #1d2129;
        border-width: 1.5px;
        background: #ffffff;
        font-weight: 600;
      }

      .video-aspect-box {
        border: 1.5px solid currentColor;
        border-radius: 2px;
        opacity: 0.8;
      }

      .video-aspect-label {
        font-size: 11px;
        line-height: 1;
      }

      /* Video Aspect Cards (used in video settings panel) */
      .aspect-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        height: 58px;
        border-radius: 8px;
        border: 1.5px solid #e5e6eb;
        background: #f9fafc;
        cursor: pointer;
        transition: all 0.15s ease;
        color: #4e5969;
        font-size: 11px;
        font-weight: 500;
        user-select: none;
      }

      .aspect-card:hover {
        border-color: #94bfff;
        background: #f0f5ff;
        color: #165dff;
      }

      .aspect-card.active {
        border-color: #165dff;
        border-width: 1.5px;
        background: #e8f0ff;
        color: #165dff;
        font-weight: 600;
      }

      .aspect-box-preview {
        display: inline-block;
        border: 1.5px solid currentColor;
        border-radius: 2px;
        opacity: 0.85;
        flex-shrink: 0;
      }

      /* Video Duration Slider */
      .duration-slider-container {
        padding: 4px 0;
      }

      .duration-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 4px;
        border-radius: 2px;
        background: #e5e6eb;
        outline: none;
        cursor: pointer;
        transition: background 0.15s;
      }

      .duration-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #1d2129;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        transition: transform 0.1s;
      }

      .duration-slider::-webkit-slider-thumb:hover {
        transform: scale(1.15);
      }

      .duration-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #1d2129;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      }

      /* Video Card Play Badge on Thumbnails */
      .card-video-play-badge {
        position: absolute;
        bottom: 8px;
        left: 8px;
        width: 22px;
        height: 22px;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        z-index: 2;
        pointer-events: none;
      }

      /* PPT Slide Presentation Badge (Figma spiv35ppt) */
      .card-ppt-badge {
        position: absolute;
        bottom: 8px;
        left: 8px;
        width: 22px;
        height: 22px;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        z-index: 2;
        pointer-events: none;
      }

      /* PPT Settings Aspect Cards (7 cards) */
      .ppt-aspect-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }

      .ppt-aspect-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 64px;
        border-radius: var(--radius-md);
        border: 1px solid #e5e6eb;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.15s;
        color: var(--text-primary);
      }

      .ppt-aspect-card:hover {
        border-color: #c9cdd4;
        background: #f7f8fa;
      }

      .ppt-aspect-card.active {
        border-color: #1d2129;
        border-width: 1.5px;
        background: #ffffff;
        font-weight: 600;
      }

      .ppt-aspect-box {
        border: 1.5px solid currentColor;
        border-radius: 2px;
        opacity: 0.8;
      }

      .ppt-aspect-label {
        font-size: 11px;
        line-height: 1;
      }

      /* PPT Floating Popovers (Group 10 & Group 11 in Figma) */
      .ppt-floating-popover {
        position: absolute;
        top: 48px;
        width: 185px;
        background: #ffffff;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        padding: 8px;
        z-index: 65;
        display: none;
        flex-direction: column;
        gap: 2px;
        animation: fadeIn 0.15s ease;
      }

      .ppt-floating-popover.show {
        display: flex;
      }

      .ppt-popover-title {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-tertiary);
        padding: 4px 8px 6px;
        margin-bottom: 2px;
        border-bottom: 1px solid var(--border-grid);
      }

      .ppt-popover-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 8px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        color: var(--text-primary);
        cursor: pointer;
        transition: background 0.15s;
      }

      .ppt-popover-item:hover {
        background: #f2f3f5;
      }

      .ppt-popover-item.active {
        color: var(--primary);
        font-weight: 500;
      }

      .ppt-popover-check {
        width: 14px;
        height: 14px;
        display: none;
        color: var(--primary);
      }

      .ppt-popover-item.active .ppt-popover-check {
        display: inline-block;
      }

      /* ============================================================
         CARD DETAIL MODAL (FIGMA RED BOX 6)
         ============================================================ */
      .card-detail-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(4px);
        z-index: 150;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.2s ease;
      }

      .card-detail-backdrop.show {
        display: flex;
      }

      .card-detail-dialog {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
        width: 900px;
        max-width: 95vw;
        height: 560px;
        max-height: 92vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: modalScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        border: 1px solid var(--border-grid);
        position: relative;
        transition:
          width 0.2s ease,
          height 0.2s ease;
      }

      .card-detail-dialog.is-ppt {
        width: 1080px;
        max-width: 96vw;
        height: 615px;
        max-height: 94vh;
      }

      .card-detail-dialog.is-html {
        width: 1180px;
        max-width: 96vw;
        height: 680px;
        max-height: 94vh;
      }

      /* Account settings dialog */
      .account-settings-backdrop {
        position: fixed;
        inset: 0;
        z-index: 180;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background: rgba(247, 246, 242, 0.82);
        animation: fadeIn 0.18s ease;
      }

      .account-settings-backdrop.show {
        display: flex;
      }

      .account-settings-dialog {
        width: min(800px, calc(100vw - 20px));
        height: min(600px, calc(100vh - 20px));
        display: flex;
        overflow: hidden;
        border: 1px solid #f0f0ed;
        border-radius: 28px;
        background: #fff;
        box-shadow: 0 18px 50px rgba(42, 45, 40, 0.12);
        animation: modalScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .account-settings-nav {
        width: 245px;
        flex: 0 0 245px;
        padding: 28px 10px;
        background: #fff;
        border-right: 1px solid #f2f2ef;
      }

      .account-settings-nav-title {
        padding: 0 14px 25px;
        font-size: 15px;
        color: #4d514c;
      }

      .account-settings-nav-item {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 11px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #1f211e;
        font-size: 14px;
        text-align: left;
        cursor: pointer;
      }

      .account-settings-nav-item + .account-settings-nav-item {
        margin-top: 1px;
      }
      .account-settings-nav-item:hover {
        background: #f6f6f4;
      }
      .account-settings-nav-item.active {
        background: #f0f0ee;
      }
      .account-settings-nav-item svg {
        color: #232622;
        flex: 0 0 auto;
      }

      .account-settings-content {
        min-width: 0;
        flex: 1;
        position: relative;
        padding: 28px 26px 24px 24px;
        overflow: auto;
        color: #383b37;
      }

      .account-settings-content::-webkit-scrollbar {
        width: 6px;
      }
      .account-settings-content::-webkit-scrollbar-thumb {
        background: #e0e1de;
        border-radius: 4px;
      }

      .account-settings-close {
        position: absolute;
        top: 22px;
        right: 20px;
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border: 0;
        background: transparent;
        color: #171a17;
        cursor: pointer;
      }

      .account-settings-heading {
        margin: 0 42px 22px 0;
        padding-bottom: 19px;
        border-bottom: 1px solid #eeeeeb;
        font-size: 15px;
        font-weight: 500;
        color: #333632;
      }

      .settings-row {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0ed;
        font-size: 13px;
      }
      .settings-row-label {
        color: #575b56;
      }
      .settings-row-value {
        color: #4e524e;
      }
      .settings-edit {
        margin-left: 9px;
        border: 0;
        background: transparent;
        color: #777b76;
        cursor: pointer;
        padding: 2px;
      }
      .settings-section-title {
        margin: 28px 0 16px;
        font-size: 15px;
        font-weight: 500;
        color: #30332f;
      }
      .settings-muted {
        color: #9b9e99;
        font-size: 12px;
      }
      .settings-profile {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 0 18px;
        border-bottom: 1px solid #eeeeeb;
      }
      .settings-profile .avatar {
        width: 34px;
        height: 34px;
        background: #050505;
        color: #63ebdc;
        font-size: 15px;
      }
      .settings-profile-name {
        font-size: 13px;
        color: #4d514c;
      }
      .settings-profile-name strong {
        display: block;
        margin-top: 1px;
        font-size: 15px;
        color: #51544f;
        font-weight: 500;
      }
      /* ============================================================
         DEVICE MANAGEMENT (Native Light Settings Style)
         ============================================================ */
      .device-manage-card {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-top: 14px;
        box-sizing: border-box;
      }
      .device-manage-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #eeeeeb;
      }
      .device-manage-header-main {
        flex: 1;
        min-width: 0;
      }
      .device-manage-title {
        margin: 0 0 6px 0;
        font-size: 14px;
        font-weight: 500;
        color: #30332f;
        letter-spacing: -0.2px;
      }
      .device-manage-desc {
        margin: 0;
        font-size: 12px;
        line-height: 1.55;
        color: #86909c;
        letter-spacing: 0.1px;
      }
      .device-btn-remove-all {
        flex-shrink: 0;
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #e24c45;
        background: rgba(226, 76, 69, 0.08);
        border: 1px solid rgba(226, 76, 69, 0.2);
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
      }
      .device-btn-remove-all:hover {
        background: rgba(226, 76, 69, 0.14);
        border-color: rgba(226, 76, 69, 0.35);
      }
      .device-btn-remove-all:active {
        transform: scale(0.98);
      }
      .device-btn-remove-all:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background: #f7f8fa;
        border-color: #e5e6eb;
        color: #c9cdd4;
      }
      .device-table-header {
        display: grid;
        grid-template-columns: 64px 1fr 88px;
        align-items: center;
        padding: 12px 2px 8px;
        font-size: 12px;
        color: #86909c;
        font-weight: 400;
        border-bottom: 1px solid #eeeeeb;
        user-select: none;
      }
      .device-th-status {
        padding-left: 2px;
      }
      .device-th-info {
        padding-left: 2px;
      }
      .device-list {
        display: flex;
        flex-direction: column;
      }
      .device-row {
        display: grid;
        grid-template-columns: 64px 1fr 88px;
        align-items: center;
        padding: 11px 2px;
        border-bottom: 1px solid #f0f0ed;
        transition:
          background 0.15s ease,
          opacity 0.2s ease;
      }
      .device-row:last-child {
        border-bottom: 0;
      }
      .device-row:hover {
        background: #fafaf8;
        border-radius: 4px;
      }
      .device-col-status {
        display: flex;
        align-items: center;
        padding-left: 6px;
      }
      .device-status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
      }
      .device-status-dot.online {
        background: #00b42a;
        box-shadow: 0 0 6px rgba(0, 180, 42, 0.4);
      }
      .device-status-dot.offline {
        background: #c9cdd4;
      }
      .device-col-info {
        font-size: 12px;
        color: #4e524e;
        padding-left: 2px;
        padding-right: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-variant-numeric: tabular-nums;
        line-height: 1.4;
      }
      .device-col-action {
        display: flex;
        justify-content: flex-end;
      }
      .device-btn-action {
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        border: 1px solid #e5e6eb;
        background: #ffffff;
        color: #575b56;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .device-btn-action.btn-remove:hover {
        border-color: #c9cdd4;
        background: #f7f8fa;
        color: #1d2129;
      }
      .device-btn-action.btn-remove:active {
        transform: scale(0.97);
      }
      .device-btn-action.is-current {
        background: #f7f8fa;
        border-color: #f0f0ed;
        color: #c9cdd4;
        cursor: default;
        pointer-events: none;
      }
      .settings-toggle {
        width: 47px;
        height: 25px;
        position: relative;
        border: 0;
        border-radius: 20px;
        background: #858784;
        cursor: pointer;
      }
      .settings-toggle::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #fff;
        transition: transform 0.18s ease;
      }
      .settings-toggle.on {
        background: #111;
      }
      .settings-toggle.on::after {
        transform: translateX(22px);
      }
      .settings-balance {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 16px;
        border-bottom: 1px solid #eeeeeb;
      }
      .settings-balance strong {
        font-size: 20px;
        color: #171a17;
      }
      .settings-balance span {
        color: #61aab0;
        font-size: 13px;
      }
      .settings-pill {
        min-width: 72px;
        height: 32px;
        padding: 0 18px;
        border: 0;
        border-radius: 18px;
        background: #050505;
        color: #67e8d9;
        font-size: 12px;
        cursor: pointer;
      }

      /* ============================================================
         PLAN UPGRADE MODAL (100% REPLICA OF FIGURE 1)
         ============================================================ */
      .plan-upgrade-backdrop {
        position: fixed;
        inset: 0;
        z-index: 3000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px 16px;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
      }
      .plan-upgrade-backdrop.show {
        display: flex;
        animation: planFadeIn 0.2s ease;
      }
      .plan-upgrade-dialog {
        background: #f8fafc;
        width: min(1080px, 96vw);
        max-height: 94vh;
        border-radius: 12px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.06);
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: planScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .plan-upgrade-topbar {
        height: 48px;
        min-height: 48px;
        background: #ffffff;
        border-bottom: 1px solid #e5e6eb;
        display: flex;
        align-items: center;
        padding: 0 16px;
      }
      .plan-upgrade-close {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: #86909c;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
      }
      .plan-upgrade-close:hover {
        background: #f2f3f5;
        color: #1d2129;
      }
      .plan-upgrade-body {
        padding: 28px 36px 24px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
      }
      .plan-upgrade-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 24px;
        text-align: center;
      }
      .plan-upgrade-title {
        font-size: 28px;
        font-weight: 700;
        color: #1d2129;
        margin: 0 0 8px 0;
        letter-spacing: -0.3px;
      }
      .plan-upgrade-subtitle {
        font-size: 13px;
        color: #4e5969;
        margin: 0 0 18px 0;
      }
      .plan-billing-switch {
        display: inline-flex;
        align-items: center;
        background: #ffffff;
        border: 1px solid #e5e6eb;
        border-radius: 8px;
        padding: 3px;
        gap: 2px;
      }
      .plan-switch-btn {
        border: none;
        background: transparent;
        padding: 6px 18px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #4e5969;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: all 0.15s ease;
      }
      .plan-switch-btn.active {
        background: #002d9c;
        color: #ffffff;
        box-shadow: 0 2px 6px rgba(0, 45, 156, 0.2);
      }
      .plan-save-badge {
        background: #165dff;
        color: #ffffff;
        font-size: 11px;
        font-weight: 600;
        padding: 1px 5px;
        line-height: 14px;
        border-radius: 3px;
        display: inline-block;
      }
      .plan-cards-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 22px;
      }
      .plan-card {
        background: #ffffff;
        border: 1px solid #e5e6eb;
        border-radius: 10px;
        padding: 24px 18px 20px;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
      }
      .plan-card:hover {
        border-color: #c9cdd4;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
      }
      .plan-card.featured {
        border: 1.5px solid #2b6aff;
        box-shadow: 0 4px 16px rgba(43, 106, 255, 0.08);
      }
      .plan-badge-popular {
        position: absolute;
        top: 18px;
        right: 14px;
        background: #e8f3ff;
        color: #165dff;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
      }
      .plan-name {
        font-size: 18px;
        font-weight: 700;
        color: #1d2129;
        margin: 0 0 4px 0;
      }
      .plan-desc {
        font-size: 12px;
        color: #86909c;
        line-height: 1.4;
        margin: 0 0 16px 0;
        min-height: 18px;
      }
      .plan-price-block {
        margin-bottom: 14px;
      }
      .plan-price-main {
        display: flex;
        align-items: baseline;
        gap: 2px;
        line-height: 1;
      }
      .plan-currency {
        font-size: 18px;
        font-weight: 700;
        color: #1d2129;
      }
      .plan-amount {
        font-size: 32px;
        font-weight: 700;
        color: #1d2129;
        font-variant-numeric: tabular-nums;
        font-family: 'Roboto Flex', PingFang SC, -apple-system, BlinkMacSystemFont, sans-serif;
      }
      .plan-period {
        font-size: 12px;
        color: #86909c;
        margin-left: 2px;
      }
      .plan-subprice {
        font-size: 11px;
        color: #86909c;
        margin-top: 6px;
        font-variant-numeric: tabular-nums;
      }
      .plan-btn-subscribe {
        width: 100%;
        height: 38px;
        border-radius: 6px;
        background: #002d9c;
        color: #ffffff;
        border: none;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background 0.15s ease, transform 0.1s ease;
      }
      .plan-btn-subscribe:hover {
        background: #002379;
      }
      .plan-btn-subscribe:active {
        transform: scale(0.99);
      }
      .plan-btn-hint {
        font-size: 11px;
        color: #86909c;
        text-align: center;
        margin: 8px 0 14px 0;
        cursor: pointer;
        transition: color 0.15s ease;
        font-variant-numeric: tabular-nums;
      }
      .plan-btn-hint:hover {
        color: #165dff;
      }
      .plan-quota-box {
        background: #f7f9fc;
        border-radius: 6px;
        padding: 12px 14px;
        margin-bottom: 16px;
      }
      .plan-quota-label {
        font-size: 11px;
        color: #4e5969;
        margin-bottom: 4px;
      }
      .plan-quota-val {
        font-size: 12px;
        color: #4e5969;
        display: flex;
        align-items: baseline;
        gap: 4px;
      }
      .plan-quota-val strong {
        font-size: 20px;
        font-weight: 700;
        color: #0047cf;
        font-variant-numeric: tabular-nums;
        font-family: 'Roboto Flex', PingFang SC, -apple-system, BlinkMacSystemFont, sans-serif;
      }
      .plan-features {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .plan-feature-item {
        font-size: 12px;
        color: #4e5969;
        display: flex;
        align-items: flex-start;
        gap: 7px;
        line-height: 1.4;
      }
      .plan-check-icon {
        color: #0047cf;
        flex-shrink: 0;
        margin-top: 2px;
      }
      .plan-feature-item.has-sub {
        flex-direction: column;
        gap: 2px;
      }
      .plan-feature-title {
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .plan-subfeature {
        font-size: 10px;
        color: #86909c;
        padding-left: 20px;
        line-height: 1.3;
      }
      .plan-modal-footer {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 16px;
        margin-top: 4px;
        border-top: 1px solid #e5e6eb;
        font-size: 13px;
        color: #4e5969;
      }
      .plan-footer-link {
        border: none;
        background: transparent;
        padding: 0;
        font-size: 13px;
        color: #4e5969;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: color 0.15s ease;
      }
      .plan-footer-link:hover {
        color: #165dff;
      }
      #plan-view-comparison {
        margin: 0 auto;
      }
      #plan-add-points {
        position: absolute;
        right: 0;
      }
      .plan-points-icon {
        margin-right: 2px;
      }
      @keyframes planFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      @keyframes planScaleUp {
        from { opacity: 0; transform: scale(0.96) translateY(8px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
      }

      /* Billing / Orders table */
      .billing-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
      }
      .billing-header-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .billing-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #1d2129;
        line-height: 1.3;
      }
      .billing-subtitle {
        margin: 0;
        font-size: 13px;
        color: #86909c;
        line-height: 1.4;
      }
      .billing-header-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
      }
      .billing-refresh-btn {
        width: 32px;
        height: 32px;
        border: 1px solid #e5e6eb;
        border-radius: 6px;
        background: #fff;
        color: #4e5969;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.15s,
          color 0.15s,
          border-color 0.15s,
          transform 0.3s ease;
      }
      .billing-refresh-btn:hover {
        background: #f7f8fa;
        color: #165dff;
        border-color: #c9cdd4;
      }
      .billing-refresh-btn.spinning svg {
        animation: billingSpin 0.6s linear infinite;
      }
      @keyframes billingSpin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .billing-subscribe-btn {
        height: 32px;
        padding: 0 16px;
        background: #0047cf;
        color: #ffffff;
        border: 0;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.15s,
          transform 0.1s;
        white-space: nowrap;
      }
      .billing-subscribe-btn:hover {
        background: #003bb0;
      }
      .billing-subscribe-btn:active {
        transform: scale(0.98);
      }
      .billing-table-wrap {
        border: 1px solid #e5e6eb;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
      }
      .billing-table-header {
        display: grid;
        grid-template-columns: 150px 1fr 95px 75px;
        background: #f7f9fc;
        border-bottom: 1px solid #e5e6eb;
        padding: 12px 18px;
        font-size: 13px;
        font-weight: 500;
        color: #4e5969;
      }
      .billing-table-header > div {
        text-align: left;
        white-space: nowrap;
      }
      .billing-table-body {
        display: flex;
        flex-direction: column;
      }
      .billing-table-row {
        display: grid;
        grid-template-columns: 150px 1fr 95px 75px;
        align-items: center;
        padding: 13px 18px;
        border-bottom: 1px solid #f0f1f4;
        font-size: 13px;
        color: #1d2129;
        transition: background 0.12s;
      }
      .billing-table-row:last-child {
        border-bottom: 0;
      }
      .billing-table-row:hover {
        background: #fafbfc;
      }
      .billing-cell-date {
        color: #4e5969;
        font-variant-numeric: tabular-nums;
        font-size: 12.5px;
        white-space: nowrap;
      }
      .billing-cell-category {
        color: #1d2129;
        font-weight: 400;
        white-space: nowrap;
      }
      .billing-cell-amount {
        color: #1d2129;
        font-variant-numeric: tabular-nums;
        font-weight: 500;
        white-space: nowrap;
      }
      .billing-cell-status {
        color: #4e5969;
        white-space: nowrap;
      }
      .billing-cell-status.status-completed {
        color: #00b42a;
      }
      .billing-cell-status.status-uncompleted {
        color: #86909c;
      }
      .billing-pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin-top: 14px;
        user-select: none;
      }
      .billing-pagination-info {
        font-size: 12px;
        color: #86909c;
        margin-right: 8px;
      }
      .billing-page-btn {
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        border: 1px solid #e5e6eb;
        border-radius: 6px;
        background: #fff;
        color: #4e5969;
        font-size: 12px;
        font-weight: 400;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.15s,
          border-color 0.15s,
          color 0.15s;
      }
      .billing-page-btn:hover:not(:disabled):not(.active) {
        background: #f2f3f5;
        color: #1d2129;
      }
      .billing-page-btn.active {
        background: #0047cf;
        border-color: #0047cf;
        color: #ffffff;
        font-weight: 600;
        cursor: default;
      }
      .billing-page-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      .settings-message-row {
        min-height: 63px;
      }
      /* Usage detail table */
      .usage-table-wrap {
        margin-top: 4px;
        border: 1px solid #eeeeeb;
        border-radius: 6px;
        position: relative;
        background: #fff;
      }
      .usage-table-header {
        display: grid;
        grid-template-columns: 1fr 72px 132px 84px;
        background: #f8f9f6;
        border-bottom: 1px solid #eeeeeb;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding: 0 16px;
        position: relative;
        z-index: 20;
      }
      .usage-table-header > div {
        padding: 10px 0;
        font-size: 12px;
        font-weight: 500;
        color: #5e625d;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
      }
      .usage-table-header > div:last-child {
        text-align: right;
      }
      .usage-table-header > div.usage-th-type {
        overflow: visible;
        display: flex;
        align-items: center;
        position: relative;
      }
      .usage-filter-anchor {
        position: relative;
        display: inline-flex;
        align-items: center;
      }
      .usage-type-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        border: 0;
        background: transparent;
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        color: #5e625d;
        cursor: pointer;
        padding: 2px 4px;
        margin-left: -4px;
        border-radius: 4px;
        transition:
          background 0.15s,
          color 0.15s;
        user-select: none;
      }
      .usage-type-filter-btn:hover {
        background: rgba(0, 0, 0, 0.05);
        color: #1d2129;
      }
      .usage-type-filter-btn.active,
      .usage-type-filter-btn.filtered {
        color: #0047cf;
        font-weight: 600;
      }
      .usage-filter-arrow {
        transition: transform 0.2s ease;
        display: inline-block;
        vertical-align: middle;
        color: currentColor;
      }
      .usage-type-filter-btn.active .usage-filter-arrow {
        transform: rotate(180deg);
      }
      .usage-filter-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: -4px;
        z-index: 500;
        min-width: 96px;
        background: #ffffff;
        border: 1px solid #e0e0dc;
        border-radius: 6px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        padding: 4px 0;
        display: none;
      }
      .usage-filter-dropdown.show {
        display: block;
      }
      .usage-filter-option {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        font-size: 12px;
        color: #444744;
        cursor: pointer;
        transition: background 0.12s;
        white-space: nowrap;
      }
      .usage-filter-option:hover {
        background: #f3f5f2;
      }
      .usage-filter-option.selected {
        color: #0047cf;
        font-weight: 500;
      }
      .usage-filter-option .check-icon {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        color: #0047cf;
        opacity: 0;
      }
      .usage-filter-option.selected .check-icon {
        opacity: 1;
      }
      .usage-table-body {
        display: flex;
        flex-direction: column;
      }
      .usage-table-row {
        display: grid;
        grid-template-columns: 1fr 72px 132px 84px;
        align-items: center;
        padding: 0 16px;
        border-bottom: 1px solid #f0f0ed;
        min-height: 44px;
        font-size: 12px;
        color: #555855;
      }
      .usage-table-row:last-child {
        border-bottom: 0;
      }
      .usage-table-row:hover {
        background: #fafaf8;
      }
      .usage-detail-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 12px;
        color: #444744;
        font-size: 12px;
        cursor: default;
      }
      .usage-type-pill {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 11px;
        white-space: nowrap;
        font-weight: 500;
      }
      .usage-type-pill.consume {
        background: rgba(186, 26, 26, 0.07);
        color: #ba1a1a;
      }
      .usage-type-pill.earn {
        background: rgba(26, 122, 64, 0.08);
        color: #1a7a40;
      }
      .usage-date-cell {
        color: #888c87;
        font-size: 11px;
      }
      .usage-credits-cell {
        text-align: right;
        font-size: 13px;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
      }
      .usage-credits-cell.positive {
        color: #1a7a40;
      }
      .usage-credits-cell.negative {
        color: #ba1a1a;
      }
      .usage-pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        padding: 10px 16px;
        border-top: 1px solid #eeeeeb;
      }
      .usage-pagination-btn {
        min-width: 28px;
        height: 28px;
        padding: 0 7px;
        border: 1px solid #e0e0dc;
        border-radius: 4px;
        background: #fff;
        color: #555855;
        font-size: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.12s,
          color 0.12s;
      }
      .usage-pagination-btn:hover:not(:disabled) {
        background: #f0f2ef;
      }
      .usage-pagination-btn.active {
        background: #111;
        color: #fff;
        border-color: #111;
      }
      .usage-pagination-btn:disabled {
        opacity: 0.38;
        cursor: default;
      }

      @media (max-width: 620px) {
        .account-settings-dialog {
          height: min(650px, calc(100vh - 20px));
        }
        .account-settings-nav {
          width: 142px;
          flex-basis: 142px;
        }
        .account-settings-nav-item {
          font-size: 12px;
          gap: 7px;
        }
        .account-settings-content {
          padding-left: 18px;
          padding-right: 18px;
        }
      }

      @keyframes modalScaleUp {
        from {
          transform: scale(0.96);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

      /* Close button – floats over top-right */
      .card-detail-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid var(--border-grid);
        transition:
          background 0.15s,
          color 0.15s;
        z-index: 20;
      }

      .card-detail-close:hover {
        background: #f2f3f5;
        color: var(--text-primary);
      }

      /* Top header in PPT wide mode */
      .card-detail-top-bar {
        display: none;
        align-items: center;
        height: 48px;
        padding: 0 22px;
        border-bottom: 1px solid var(--border-grid);
        background: #ffffff;
        flex-shrink: 0;
      }

      .card-detail-dialog.is-ppt .card-detail-top-bar {
        display: flex;
      }

      .card-detail-top-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        letter-spacing: -0.2px;
      }

      /* Main content wrapper */
      .card-detail-content {
        display: flex !important;
        flex-direction: row !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
      }

      /* PPT Wide Mode Left Panel */
      .card-detail-dialog.is-ppt .card-detail-left {
        flex: 0 0 64%;
        background: #edf1f7;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 16px 16px 16px 18px;
        box-sizing: border-box;
        border-right: 1px solid var(--border-grid);
      }

      /* HTML Frame Wide Mode Left Panel */
      .card-detail-dialog.is-html .card-detail-left {
        flex: 0 0 66%;
        background: #ffffff;
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
        padding: 0;
        box-sizing: border-box;
        border-right: 1px solid var(--border-grid);
        user-select: text !important;
        -webkit-user-select: text !important;
        cursor: default;
      }

      .card-detail-dialog.is-html .card-detail-left * {
        user-select: text !important;
        -webkit-user-select: text !important;
      }

      .card-detail-dialog.is-html .card-detail-right {
        flex: 1;
        padding: 24px 20px 20px;
        overflow-y: auto;
      }

      /* Evaluation Board Container & Styles */
      .eval-board-container {
        width: 100%;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        user-select: text !important;
        position: relative;
        box-sizing: border-box;
      }

      /* Top Section: Deep Dive */
      .eval-top-section {
        display: flex;
        padding: 24px 26px;
        border-bottom: 1px solid #e5e6eb;
        background: #ffffff;
        gap: 20px;
        box-sizing: border-box;
      }

      .eval-upload-col {
        width: 180px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .eval-section-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
      }

      .eval-upload-preview {
        width: 180px;
        height: 180px;
        border-radius: 8px;
        background: #f7f8fa;
        border: 1px solid #e5e6eb;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .eval-upload-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .eval-tags-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .eval-tag-chip {
        padding: 2px 7px;
        background: #f2f3f5;
        border-radius: 4px;
        font-size: 11px;
        color: var(--text-secondary);
        white-space: nowrap;
      }

      /* Middle Deep Dive Column */
      .eval-deepdive-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
      }

      .eval-deepdive-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
        color: var(--primary);
        letter-spacing: 0.3px;
      }

      .eval-intro-box {
        background: #f7f9fc;
        border: 1px solid #e5effc;
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 12px;
        line-height: 1.6;
        color: var(--text-secondary);
      }

      .eval-pros-cons-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        flex: 1;
      }

      .eval-card-pros {
        background: #f2f9f4;
        border: 1px solid #b7ebc7;
        border-radius: 8px;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .eval-card-cons {
        background: #fff7f5;
        border: 1px solid #ffdcd6;
        border-radius: 8px;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .eval-card-title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
      }

      .eval-card-pros .eval-card-title {
        color: #135200;
      }

      .eval-card-cons .eval-card-title {
        color: #cf1322;
      }

      .eval-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
      }

      .eval-dot.green {
        background: #52c41a;
      }

      .eval-dot.red {
        background: #ff4d4f;
      }

      .eval-bullet-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .eval-bullet-item {
        font-size: 11px;
        line-height: 1.5;
        position: relative;
        padding-left: 12px;
      }

      .eval-card-pros .eval-bullet-item {
        color: #274916;
      }

      .eval-card-pros .eval-bullet-item::before {
        content: '•';
        position: absolute;
        left: 0;
        top: 0;
        color: #52c41a;
        font-weight: bold;
      }

      .eval-card-cons .eval-bullet-item {
        color: #5c221e;
      }

      .eval-card-cons .eval-bullet-item::before {
        content: '•';
        position: absolute;
        left: 0;
        top: 0;
        color: #ff4d4f;
        font-weight: bold;
      }

      /* Radar Chart Column */
      .eval-radar-col {
        width: 200px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
      }

      .eval-radar-box {
        width: 190px;
        height: 170px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .eval-radar-svg {
        width: 100%;
        height: 100%;
        overflow: visible;
      }

      .eval-score-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2px;
      }

      .eval-score-value {
        font-size: 32px;
        font-weight: 800;
        color: #722ed1;
        line-height: 1.1;
      }

      .eval-score-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-secondary);
        margin-top: 2px;
      }

      .eval-score-footnote {
        font-size: 10px;
        color: var(--text-tertiary);
        margin-top: 2px;
      }

      /* Bottom Section: Visual Iterations */
      .eval-bottom-section {
        padding: 20px 26px 28px 26px;
        background: #fcfdfe;
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-sizing: border-box;
      }

      .eval-bottom-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .eval-iterations-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
        color: #722ed1;
        letter-spacing: 0.5px;
      }

      .eval-iterations-hint {
        font-size: 12px;
        color: var(--text-tertiary);
        display: flex;
        align-items: center;
        gap: 4px;
      }

      /* 3 Columns Strategy Grid */
      .eval-strategies-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }

      .eval-strategy-col {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .eval-strategy-banner {
        background: #ffffff;
        border: 1px solid #e5e6eb;
        border-radius: 8px;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        min-height: 96px;
        box-sizing: border-box;
      }

      .eval-strategy-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        width: fit-content;
        padding: 2px 7px;
        background: #f9f0ff;
        border: 1px solid #d3adf7;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 600;
        color: #722ed1;
      }

      .eval-strategy-heading {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 1px 0;
      }

      .eval-strategy-desc {
        font-size: 11px;
        line-height: 1.45;
        color: var(--text-secondary);
      }

      /* Strategy Version Cards */
      .eval-ver-card {
        position: relative;
        background: #ffffff;
        border: 1px solid #e5e6eb;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        aspect-ratio: 1 / 1;
      }

      .eval-card-img-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background: #f2f3f5;
        overflow: hidden;
      }

      .eval-card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
      }

      .eval-ver-card:hover .eval-card-img {
        transform: scale(1.02);
      }

      .eval-ver-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 2px 6px;
        background: rgba(29, 33, 41, 0.82);
        backdrop-filter: blur(4px);
        color: #ffffff;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        z-index: 5;
      }

      .eval-code-toggle-btn {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(4px);
        border: 1px solid var(--border-subtle);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s ease;
        z-index: 7;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      }

      .eval-code-toggle-btn:hover,
      .eval-code-toggle-btn.active {
        background: #ffffff;
        color: var(--primary);
        border-color: var(--primary);
      }

      /* Prompt Drawer inside Card */
      .eval-prompt-drawer {
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        z-index: 10;
        padding: 12px;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        box-sizing: border-box;
      }

      .eval-prompt-drawer.open {
        transform: translateY(0);
      }

      .eval-prompt-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 6px;
        border-bottom: 1px solid #e5e6eb;
      }

      .eval-prompt-title {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .eval-prompt-close {
        width: 22px;
        height: 22px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        cursor: pointer;
        background: none;
        border: none;
      }

      .eval-prompt-close:hover {
        background: #f2f3f5;
        color: var(--text-primary);
      }

      .eval-prompt-body {
        flex: 1;
        overflow-y: auto;
        font-size: 11px;
        line-height: 1.55;
        color: var(--text-secondary);
        padding: 8px 0;
        text-align: left;
      }

      .eval-copy-prompt-btn {
        height: 28px;
        background: var(--primary);
        color: #ffffff;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s;
        border: none;
      }

      .eval-copy-prompt-btn:hover {
        background: #0e4cd1;
      }

      /* PPT Main Stage */
      .ppt-preview-stage {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        overflow: hidden;
        background: #eef1f6;
        box-shadow: 0 4px 18px rgba(19, 28, 38, 0.06);
        position: relative;
        border: 1px solid rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 10px;
        box-sizing: border-box;
      }

      .ppt-slide-canvas {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        animation: slideFadeIn 0.2s ease;
      }

      @keyframes slideFadeIn {
        from {
          opacity: 0.65;
          transform: scale(0.995);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      /* Slide layouts */
      .slide-layout-roadshow {
        width: 100%;
        height: 100%;
        background: #ffffff;
        display: flex;
        padding: 20px 22px;
        box-sizing: border-box;
        gap: 18px;
        position: relative;
        font-family:
          -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
          sans-serif;
      }

      .slide-roadshow-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
      }

      .slide-roadshow-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 500;
        color: #4e5969;
        letter-spacing: 0.5px;
      }

      .slide-roadshow-tag::before {
        content: '';
        display: inline-block;
        width: 3px;
        height: 10px;
        background: #1d2129;
        border-radius: 1px;
      }

      .slide-roadshow-title {
        font-size: 32px;
        font-weight: 900;
        color: #1d2129;
        line-height: 1.15;
        letter-spacing: -0.5px;
        margin: 4px 0 10px 0;
      }

      .slide-neon-card {
        background: #ccff00;
        border-radius: 14px;
        padding: 14px 16px 12px;
        color: #111827;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 14px;
        position: relative;
        box-shadow: 0 4px 14px rgba(204, 255, 0, 0.28);
      }

      .slide-neon-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }

      .slide-neon-text {
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.45;
        color: #111827;
      }

      .slide-neon-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1.5px solid #111827;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .slide-neon-bottom {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 10px;
        font-weight: 600;
      }

      .slide-badge-black {
        background: #111827;
        color: #ffffff;
        padding: 2px 7px;
        border-radius: 10px;
      }

      .slide-badge-gray {
        background: rgba(0, 0, 0, 0.15);
        color: #111827;
        padding: 2px 7px;
        border-radius: 10px;
      }

      .slide-badge-sub {
        color: #111827;
        font-weight: 600;
      }

      .slide-roadshow-right {
        flex: 0 0 47%;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        background: #181c24;
      }

      .slide-roadshow-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      /* Generic slide layout */
      .slide-layout-generic {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 18px 22px;
        box-sizing: border-box;
        position: relative;
        font-family:
          -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', Roboto, sans-serif;
      }

      .slide-layout-dark {
        background: #12151c;
        color: #f7f9fc;
      }

      .slide-layout-light {
        background: #ffffff;
        color: #1d2129;
      }

      .slide-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }

      .slide-title-lg {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.3px;
      }

      .slide-content-grid {
        flex: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        min-height: 0;
      }

      .slide-col-card {
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
      }

      .slide-col-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      /* PPT Thumbs Carousel Bar */
      .ppt-thumbs-container {
        margin-top: 12px;
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
      }

      .ppt-thumbs-track {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding: 4px 2px;
        flex: 1;
        align-items: center;
      }

      .ppt-thumbs-track::-webkit-scrollbar {
        display: none;
      }

      .ppt-thumb-card {
        flex: 0 0 calc((100% - 30px) / 4);
        min-width: 110px;
        aspect-ratio: 16 / 9;
        border-radius: 8px;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        background: #ffffff;
        border: 2px solid transparent;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-sizing: border-box;
      }

      .ppt-thumb-card:hover {
        border-color: #94a3b8;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .ppt-thumb-card.active {
        border-color: #0f172a;
        box-shadow:
          0 0 0 1px #0f172a,
          0 4px 12px rgba(15, 23, 42, 0.2);
        transform: translateY(-1px);
      }

      .ppt-thumb-inner {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        pointer-events: none;
      }

      .ppt-thumb-inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .ppt-thumb-inner .mini-slide {
        transform-origin: top left;
      }

      .ppt-nav-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #1e293b;
        transition: all 0.15s ease;
        flex-shrink: 0;
        margin-left: 8px;
        z-index: 5;
      }

      .ppt-nav-btn:hover {
        background: #f8fafc;
        transform: scale(1.06);
        color: #0f172a;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
      }

      .ppt-nav-btn:active {
        transform: scale(0.96);
      }

      /* PPT Wide Right Panel */
      .card-detail-dialog.is-ppt .card-detail-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 24px 24px 20px;
        overflow: hidden;
      }

      .card-detail-tags-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
      }

      .card-detail-tag-chip {
        font-size: 12px;
        color: #4e5969;
        background: #f2f3f5;
        padding: 3px 10px;
        border-radius: 4px;
        font-weight: 500;
      }

      /* Left panel – image & video */
      .card-detail-left {
        flex: 0 0 54%;
        background: #1a1f2e;
        position: relative;
        overflow: hidden;
      }

      .card-detail-dialog.is-video .card-detail-left {
        background: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .card-detail-left img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .card-detail-left video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000000;
        display: block;
      }

      /* 隐藏视频控制条的全屏按钮与三点溢出菜单（更多）按钮 */
      .card-detail-left video::-webkit-media-controls-fullscreen-button {
        display: none !important;
      }

      .card-detail-left video::-webkit-media-controls-overflow-button,
      .card-detail-left video::-internal-media-controls-overflow-button,
      .card-detail-left video::-webkit-media-controls-overflow-menu-button {
        display: none !important;
      }

      .card-detail-left video::-webkit-media-controls-download-button,
      .card-detail-left video::-internal-media-controls-download-button {
        display: none !important;
      }

      /* 3D Model Compare Slot in Card Detail Modal */
      .card-detail-dialog.is-3d .card-detail-left {
        background: #0a0c10;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        padding: 20px;
      }

      .card-detail-3d-compare-card {
        width: 100%;
        max-width: 380px;
        aspect-ratio: 528 / 704;
        max-height: 100%;
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: #0d0f14;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
        user-select: none;
      }

      .card-detail-3d-compare-media {
        --compare-x: 50%;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        background: #0a0a0a;
      }

      .card-detail-3d-compare-media .chat-3d-compare-layer {
        position: absolute;
        inset: 0;
        overflow: hidden;
      }

      .card-detail-3d-compare-media .chat-3d-compare-layer img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
        pointer-events: none;
        user-select: none;
      }

      .card-detail-3d-compare-media .chat-3d-compare-clay {
        z-index: 1;
        clip-path: inset(0 calc(100% - var(--compare-x)) 0 0);
        opacity: 1;
        transition: opacity 0.15s ease;
      }

      .card-detail-3d-compare-media .chat-3d-compare-gold {
        z-index: 0;
      }

      .card-detail-3d-compare-divider {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--compare-x);
        width: 2px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 0 8px rgba(73, 245, 245, 0.6), 0 0 2px rgba(0, 0, 0, 0.8);
        transform: translateX(-50%);
        z-index: 2;
        pointer-events: none;
      }

      /* 左右标签提示 (白模 / 材质渲染) */
      .card-detail-3d-tag {
        position: absolute;
        top: 12px;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
        pointer-events: none;
        z-index: 3;
        backdrop-filter: blur(6px);
      }

      .card-detail-3d-tag.tag-clay {
        left: 12px;
        background: rgba(255, 255, 255, 0.85);
        color: #1d2129;
      }

      .card-detail-3d-tag.tag-gold {
        right: 12px;
        background: rgba(0, 0, 0, 0.65);
        color: #ffd700;
        border: 1px solid rgba(255, 215, 0, 0.3);
      }

      /* 底部中心提示胶囊 */
      .card-detail-3d-hint {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 10px;
        background: rgba(0, 0, 0, 0.68);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 11px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        pointer-events: none;
        z-index: 3;
        white-space: nowrap;
      }

      /* 底部操作区 (下载按钮) */
      .card-detail-3d-compare-card .chat-card-mini-actions {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
        z-index: 4;
        opacity: 1;
        pointer-events: auto;
      }

      .card-detail-3d-compare-card .chat-card-mini-action-btn {
        width: 30px;
        height: 30px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(0, 0, 0, 0.1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #1d2129;
        cursor: pointer;
        transition: all 0.15s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }

      .card-detail-3d-compare-card .chat-card-mini-action-btn:hover {
        background: #ffffff;
        color: var(--primary);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
      }

      .card-detail-3d-compare-card .chat-card-mini-download-wrap {
        position: relative;
      }

      .card-detail-3d-compare-card .chat-card-download-menu {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
        min-width: 136px;
        padding: 6px;
        background: #ffffff;
        border: 1px solid #e5e6eb;
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
        display: none;
        flex-direction: column;
        gap: 3px;
        z-index: 25;
      }

      .card-detail-3d-compare-card .chat-card-download-menu.show {
        display: flex;
      }

      .card-detail-3d-compare-card .chat-card-download-menu-item {
        width: 100%;
        height: 36px;
        padding: 0 10px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 500;
        color: #1d2129;
        cursor: pointer;
        background: none;
        border: none;
        transition: background 0.15s;
        white-space: nowrap;
      }

      .card-detail-3d-compare-card .chat-card-download-menu-item:hover {
        background: #f2f3f5;
        color: var(--primary);
      }

      .card-detail-3d-compare-card .chat-card-file-type-icon {
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: #ffffff;
        flex-shrink: 0;
      }

      .card-detail-3d-compare-card .chat-card-file-type-icon.glb {
        background: #722ed1;
      }

      .card-detail-3d-compare-card .chat-card-file-type-icon.stl {
        background: #13c2c2;
      }

      .card-detail-3d-compare-card .chat-card-file-type-icon.obj {
        background: #fa8c16;
      }

      /* Right panel – info */
      .card-detail-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 28px 24px 20px;
        overflow: hidden;
      }

      /* Type badge */
      .card-detail-type-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 12px;
        width: fit-content;
      }

      .card-detail-type-badge.type-image {
        background: rgba(255, 165, 0, 0.12);
        color: #d97706;
        border: 1px solid rgba(255, 165, 0, 0.3);
      }

      .card-detail-type-badge.type-video {
        background: rgba(22, 93, 255, 0.1);
        color: var(--primary);
        border: 1px solid rgba(22, 93, 255, 0.25);
      }

      .card-detail-type-badge.type-ppt {
        background: #f84b60;
        color: #ffffff;
        border: 1px solid #f84b60;
      }

      .card-detail-type-badge.type-ppt svg {
        stroke: #ffffff;
      }

      .card-detail-type-badge.type-3d {
        background: rgba(124, 58, 237, 0.1);
        color: #7c3aed;
        border: 1px solid rgba(124, 58, 237, 0.25);
      }

      .card-detail-type-badge.type-html {
        background: rgba(0, 180, 42, 0.1);
        color: #00b42a;
        border: 1px solid rgba(0, 180, 42, 0.25);
      }

      /* Item title */
      .card-detail-item-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.3;
        margin-bottom: 8px;
      }

      /* Meta row */
      .card-detail-meta-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--text-tertiary);
        margin-bottom: 18px;
      }

      .card-detail-meta-row .meta-sep {
        color: var(--border-subtle);
      }

      /* Prompt section */
      .card-detail-prompt-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        flex-shrink: 0;
      }

      .card-detail-prompt-copy-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-tertiary);
        transition:
          background 0.15s,
          color 0.15s;
      }

      .card-detail-prompt-copy-btn:hover {
        background: #f2f3f5;
        color: var(--text-primary);
      }

      .card-detail-prompt-text {
        flex: 1;
        font-size: 13px;
        line-height: 1.65;
        color: var(--text-secondary);
        overflow-y: auto;
        padding-right: 4px;
        scrollbar-width: thin;
        scrollbar-color: #d0d5dd transparent;
      }

      .card-detail-prompt-text::-webkit-scrollbar {
        width: 4px;
      }

      .card-detail-prompt-text::-webkit-scrollbar-thumb {
        background: #d0d5dd;
        border-radius: 2px;
      }

      /* CTA Buttons */
      .card-detail-cta-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 16px;
        flex-shrink: 0;
      }

      .card-detail-cta-ghost {
        height: 40px;
        border-radius: 8px;
        border: 1px solid var(--border-subtle);
        background: #fff;
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition:
          background 0.15s,
          border-color 0.15s;
      }

      .card-detail-cta-ghost:hover {
        background: #f7f9ff;
        border-color: var(--primary);
        color: var(--primary);
      }

      .card-detail-cta-primary {
        height: 40px;
        border-radius: 8px;
        border: none;
        background: var(--primary);
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s;
      }

      .card-detail-cta-primary:hover {
        background: #003bb0;
      }

      /* ============================================================
         MATERIAL PICKER FULLSCREEN MODAL
         ============================================================ */
      .material-picker-backdrop {
        position: fixed;
        inset: 0;
        z-index: 140;
        display: none;
        background: #ffffff;
        animation: fadeIn 0.2s ease;
      }

      .material-picker-backdrop.show {
        display: flex;
        flex-direction: column;
      }

      .material-picker-panel {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
      }

      .material-picker-header {
        height: 64px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 36px;
        border-bottom: 1px solid var(--border-subtle);
        background: #ffffff;
      }

      .material-picker-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
      }

      .material-picker-close {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        color: var(--text-secondary);
        background: #f2f3f5;
        transition:
          background 0.15s,
          color 0.15s,
          transform 0.15s;
      }

      .material-picker-close:hover {
        background: #e5e6eb;
        color: var(--text-primary);
        transform: scale(1.05);
      }

      .material-picker-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 24px 36px 48px;
      }

      .material-picker-content {
        max-width: 1480px;
        margin: 0 auto;
        width: 100%;
      }

      .material-picker-grid .item-card {
        cursor: pointer;
      }

      .material-picker-empty {
        display: none;
        text-align: center;
        padding: 80px 20px;
        color: var(--text-tertiary);
        font-size: 14px;
      }

      .material-picker-empty.show {
        display: block;
      }

      /* Hide legacy skeleton elements */
      .card-detail-header,
      .card-detail-footer,
      .card-detail-media,
      .card-detail-info,
      .card-detail-prompt-box,
      .card-detail-author-info {
        display: none;
      }

      /* ============================================================
         INDEPENDENT SKILL DETAIL MODAL (AGENT MODE)
         ============================================================ */
      .skill-detail-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(19, 28, 38, 0.55);
        backdrop-filter: blur(8px);
        z-index: 155;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px 32px;
        animation: fadeIn 0.2s ease;
      }

      .skill-detail-backdrop.show {
        display: flex;
      }

      .skill-detail-dialog {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 28px 72px rgba(19, 28, 38, 0.22);
        width: 1260px;
        max-width: 95vw;
        max-height: 92vh;
        overflow-y: auto;
        padding: 28px 32px 24px;
        display: flex;
        flex-direction: column;
        position: relative;
        animation: modalScaleUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
        border: 1px solid rgba(229, 230, 235, 0.8);
      }

      .skill-detail-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        background: #f2f3f5;
        border: none;
        color: #4e5969;
        transition: all 0.15s ease;
        z-index: 10;
      }

      .skill-detail-close:hover {
        background: #e5e6eb;
        color: #1d2129;
        transform: scale(1.05);
      }

      /* Top Header */
      .skill-detail-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 20px;
        padding-right: 48px;
      }

      .skill-detail-header-left {
        flex: 1;
        min-width: 0;
      }

      .skill-detail-title {
        font-family:
          PingFang SC,
          -apple-system,
          sans-serif;
        font-size: 22px;
        font-weight: 600;
        color: #1d2129;
        line-height: 1.35;
        margin: 0 0 8px 0;
      }

      .skill-detail-desc {
        font-family:
          PingFang SC,
          -apple-system,
          sans-serif;
        font-size: 13px;
        color: #4e5969;
        line-height: 1.6;
        margin: 0 0 12px 0;
        max-width: 820px;
      }

      .skill-detail-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 12px;
        color: #86909c;
        font-variant-numeric: tabular-nums;
      }

      .skill-detail-author {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #4e5969;
        font-weight: 500;
      }

      .skill-detail-author-avatar {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #165dff;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
      }

      .skill-detail-stat {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .skill-detail-header-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
      }

      .skill-detail-icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1px solid #e5e6eb;
        background: #ffffff;
        color: #4e5969;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .skill-detail-icon-btn:hover {
        background: #f7f8fa;
        border-color: #c9cdd4;
        color: #1d2129;
      }

      .skill-detail-icon-btn.saved {
        color: #165dff;
        border-color: #165dff;
        background: rgba(22, 93, 255, 0.06);
      }

      .skill-detail-cta-btn {
        height: 36px;
        padding: 0 20px;
        border-radius: 8px;
        background: #1d2129;
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
      }

      .skill-detail-cta-btn:hover {
        background: #2e3440;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
        transform: translateY(-1px);
      }

      /* Gallery */
      .skill-detail-gallery {
        display: flex;
        gap: 16px;
        width: 100%;
        height: 440px;
        position: relative;
        margin-bottom: 20px;
      }

      .skill-gallery-card {
        flex: 1;
        height: 100%;
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        background: #1d2129;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      }

      .skill-gallery-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
      }

      .skill-gallery-card:hover img {
        transform: scale(1.02);
      }

      .skill-gallery-badge {
        position: absolute;
        bottom: 12px;
        left: 12px;
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        z-index: 2;
      }

      .skill-gallery-arrow-btn {
        position: absolute;
        top: 50%;
        right: 18px;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #ffffff;
        color: #1d2129;
        border: none;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 5;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .skill-gallery-arrow-btn:hover {
        transform: translateY(-50%) scale(1.08);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
      }

      /* Tags */
      .skill-detail-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
      }

      .skill-detail-tag {
        font-family:
          PingFang SC,
          -apple-system,
          sans-serif;
        font-size: 12px;
        color: #86909c;
        background: #f2f3f5;
        padding: 4px 10px;
        border-radius: 4px;
        transition: all 0.15s ease;
      }

      .skill-detail-tag:hover {
        background: #e5e6eb;
        color: #4e5969;
      }

      /* ============================================================
         GUEST MODE & LOGIN
         ============================================================ */
      body.guest-mode .sidebar-section,
      body.guest-mode .authenticated-user,
      body.guest-mode .credits-pill {
        display: none;
      }

      body:not(.guest-mode) .guest-login-entry {
        display: none;
      }

      body.guest-mode .sidebar-content {
        flex: 1;
      }

      .guest-login-entry {
        width: 100%;
        height: 36px;
        border-radius: 6px;
        background: var(--primary);
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition:
          background 0.2s ease,
          transform 0.2s ease,
          box-shadow 0.2s ease;
      }

      .guest-login-entry:hover {
        background: var(--primary-hover);
        box-shadow: 0 4px 12px rgba(22, 93, 255, 0.22);
      }

      .guest-login-entry:active {
        transform: translateY(1px);
      }

      /* New project dialog */
      .new-project-overlay {
        position: fixed;
        inset: 0;
        z-index: 310;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(10, 12, 10, 0.45);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.2s ease,
          visibility 0.2s ease;
      }

      .new-project-overlay.show {
        opacity: 1;
        visibility: visible;
      }

      .new-project-dialog {
        position: relative;
        width: min(440px, calc(100vw - 32px));
        padding: 28px 28px 24px;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
        transform: translateY(10px) scale(0.98);
        transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .new-project-overlay.show .new-project-dialog {
        transform: translateY(0) scale(1);
      }

      .new-project-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #6b6f76;
        cursor: pointer;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .new-project-close:hover {
        color: #11130f;
        background: #f2f3f0;
      }

      .new-project-title {
        margin: 0 0 24px;
        font-size: 18px;
        font-weight: 700;
        color: #11130f;
        text-align: center;
      }

      .new-project-label {
        display: block;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #171a17;
      }

      .new-project-input-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
        height: 48px;
        background: #f3f4f2;
        border-radius: 999px;
        border: 1px solid transparent;
        transition:
          border-color 0.15s,
          background 0.15s;
      }

      .new-project-input-wrap:focus-within {
        background: #fff;
        border-color: #d8dad6;
      }

      .new-project-input-icon {
        flex-shrink: 0;
        color: #9aa09a;
        display: flex;
        align-items: center;
      }

      .new-project-input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: transparent;
        font-size: 14px;
        color: #171a17;
        outline: none;
      }

      .new-project-input::placeholder {
        color: #a8ada6;
      }

      .new-project-desc {
        margin: 14px 0 0;
        font-size: 12px;
        line-height: 1.65;
        color: #8a8f87;
      }

      .new-project-actions {
        margin-top: 28px;
      }

      .new-project-cancel {
        display: none;
      }

      .new-project-submit {
        width: 100%;
        margin-top: 0;
        height: 48px;
        border: 0;
        border-radius: 999px;
        background: #11130f;
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.15s;
      }

      .new-project-submit:hover {
        opacity: 0.88;
      }

      .new-project-submit:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }

      /* 重命名模式：隐藏说明文本，显示取消+确定并排按钮 */
      .new-project-overlay.is-rename .new-project-desc {
        display: none;
      }

      .new-project-overlay.is-rename .new-project-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
      }

      .new-project-overlay.is-rename .new-project-cancel {
        display: block;
        flex: 1;
        height: 48px;
        border: 1px solid #d8dad6;
        border-radius: 999px;
        background: #ffffff;
        color: #171a17;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
      }

      .new-project-overlay.is-rename .new-project-cancel:hover {
        background: #f3f4f2;
        border-color: #c9cdd4;
      }

      .new-project-overlay.is-rename .new-project-submit {
        flex: 1;
        width: auto;
      }

      /* Delete project confirm dialog */
      .delete-project-overlay {
        position: fixed;
        inset: 0;
        z-index: 315;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(10, 12, 10, 0.45);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.2s ease,
          visibility 0.2s ease;
      }

      .delete-project-overlay.show {
        opacity: 1;
        visibility: visible;
      }

      .delete-project-dialog {
        position: relative;
        width: min(480px, calc(100vw - 32px));
        padding: 22px 24px 20px;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
        transform: translateY(10px) scale(0.98);
        transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .delete-project-overlay.show .delete-project-dialog {
        transform: translateY(0) scale(1);
      }

      .delete-project-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
      }

      .delete-project-title {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #11130f;
      }

      .delete-project-close {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #6b6f76;
        cursor: pointer;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .delete-project-close:hover {
        color: #11130f;
        background: #f2f3f0;
      }

      .delete-project-message {
        margin: 0 0 26px;
        font-size: 14px;
        line-height: 1.65;
        color: #3d423c;
      }

      .delete-project-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }

      .delete-project-cancel,
      .delete-project-confirm {
        min-width: 72px;
        height: 36px;
        padding: 0 18px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition:
          opacity 0.15s,
          background 0.15s;
      }

      .delete-project-cancel {
        border: 1px solid #d8dad6;
        background: #ffffff;
        color: #171a17;
      }

      .delete-project-cancel:hover {
        background: #f7f8fa;
      }

      .delete-project-confirm {
        border: 0;
        background: #e5484d;
        color: #ffffff;
      }

      .delete-project-confirm:hover {
        opacity: 0.92;
      }

      /* Contact Us modal (Figure 2) */
      .contact-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 320;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(10, 12, 10, 0.45);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.2s ease,
          visibility 0.2s ease;
      }

      .contact-modal-overlay.show {
        opacity: 1;
        visibility: visible;
      }

      .contact-modal-dialog {
        position: relative;
        width: min(580px, calc(100vw - 32px));
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        padding: 36px 36px 32px;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
        transform: translateY(10px) scale(0.98);
        transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
        font-family:
          'PingFang SC',
          -apple-system,
          BlinkMacSystemFont,
          sans-serif;
      }

      .contact-modal-overlay.show .contact-modal-dialog {
        transform: translateY(0) scale(1);
      }

      .contact-modal-close {
        position: absolute;
        top: 24px;
        right: 24px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #86909c;
        cursor: pointer;
        transition:
          background-color 0.15s ease,
          color 0.15s ease;
      }

      .contact-modal-close:hover {
        background-color: #f2f3f5;
        color: #1d2129;
      }

      .contact-modal-header {
        margin-bottom: 32px;
        padding-right: 36px;
      }

      .contact-modal-title {
        margin: 0 0 10px;
        font-size: 22px;
        font-weight: 600;
        color: #1d2129;
        line-height: 1.3;
      }

      .contact-modal-desc {
        margin: 0;
        font-size: 14px;
        color: #86909c;
        line-height: 1.5;
      }

      .contact-section-list {
        display: flex;
        flex-direction: column;
        gap: 28px;
      }

      .contact-row {
        display: flex;
        align-items: flex-start;
        font-size: 14px;
      }

      .contact-row-label {
        width: 92px;
        flex: 0 0 92px;
        color: #4e5969;
        line-height: 1.6;
      }

      .contact-row-content {
        flex: 1;
        min-width: 0;
        color: #1d2129;
        line-height: 1.6;
      }

      .contact-text-link {
        color: #1d2129;
        text-decoration: none;
        transition: color 0.15s ease;
      }

      .contact-text-link:hover {
        color: #165dff;
      }

      .contact-social-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #165dff;
        text-decoration: none;
        transition: opacity 0.15s ease;
      }

      .contact-social-link:hover {
        text-decoration: underline;
        opacity: 0.85;
      }

      .contact-qrcode-wrap {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .contact-qrcode-tip {
        font-size: 14px;
        color: #1d2129;
      }

      .contact-qrcode-img {
        width: 140px;
        height: 140px;
        border-radius: 8px;
        border: 1px solid #e5e6eb;
        object-fit: contain;
        background: #ffffff;
      }

      /* FAQ Accordion */
      .contact-faq-list {
        display: flex;
        flex-direction: column;
      }

      .contact-faq-item {
        border-bottom: 1px solid #f0f0ed;
      }

      .contact-faq-q {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 0;
        font-size: 14px;
        color: #1d2129;
        cursor: pointer;
        user-select: none;
        transition: color 0.15s ease;
      }

      .contact-faq-q:hover {
        color: #165dff;
      }

      .contact-faq-icon {
        font-size: 16px;
        color: #86909c;
        font-weight: 300;
        transition:
          transform 0.2s ease,
          color 0.15s ease;
        line-height: 1;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .contact-faq-item.active .contact-faq-q {
        color: #165dff;
      }

      .contact-faq-item.active .contact-faq-icon {
        transform: rotate(45deg);
        color: #165dff;
      }

      .contact-faq-a {
        max-height: 0;
        overflow: hidden;
        font-size: 13px;
        color: #86909c;
        line-height: 1.6;
        transition:
          max-height 0.24s cubic-bezier(0.16, 1, 0.3, 1),
          padding 0.2s ease;
        padding: 0;
      }

      .contact-faq-item.active .contact-faq-a {
        max-height: 140px;
        padding-bottom: 14px;
      }

      /* ============================================================
         GLOBAL SEARCH MODAL OVERLAY (FIGMA / CLAUDE STYLE)
         ============================================================ */
      .global-search-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 14vh;
        background: rgba(10, 12, 16, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.18s ease,
          visibility 0.18s ease;
      }

      .global-search-overlay.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
      }

      .global-search-modal {
        position: relative;
        width: min(600px, calc(100vw - 32px));
        max-height: calc(82vh - 14vh);
        background: #ffffff;
        border: 1px solid #e5e6eb;
        border-radius: 12px;
        box-shadow:
          0 16px 48px rgba(0, 0, 0, 0.12),
          0 2px 10px rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateY(-8px) scale(0.98);
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        font-family:
          'PingFang SC',
          -apple-system,
          BlinkMacSystemFont,
          sans-serif;
      }

      .global-search-overlay.show .global-search-modal {
        transform: translateY(0) scale(1);
      }

      .global-search-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
        height: 52px;
        border-bottom: 1px solid #f2f3f5;
        background: #ffffff;
        flex-shrink: 0;
      }

      .global-search-icon {
        color: #86909c;
        flex-shrink: 0;
      }

      .global-search-input {
        flex: 1;
        font-size: 14.5px;
        color: #1d2129;
        background: transparent;
        border: none;
        outline: none;
        line-height: 1.5;
      }

      .global-search-input::placeholder {
        color: #86909c;
      }

      .global-search-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px 7px;
        border-radius: 4px;
        background: #f2f3f5;
        border: 1px solid #e5e6eb;
        color: #4e5969;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        transition:
          background 0.15s,
          color 0.15s;
        line-height: 1;
      }

      .global-search-close-btn:hover {
        background: #e5e6eb;
        color: #1d2129;
      }

      .global-search-body {
        flex: 1;
        overflow-y: auto;
        padding: 10px 12px 14px 12px;
        max-height: calc(82vh - 14vh - 52px);
      }

      .global-search-body::-webkit-scrollbar {
        width: 6px;
      }

      .global-search-body::-webkit-scrollbar-thumb {
        background: #c9cdd4;
        border-radius: 4px;
      }

      .global-search-group-title {
        font-size: 12px;
        font-weight: 600;
        color: #86909c;
        padding: 8px 8px 6px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      /* 项目卡片容器 */
      .global-search-project-card {
        background: #fafbfc;
        border: 1px solid #edf0f5;
        border-radius: 8px;
        margin-bottom: 8px;
        overflow: hidden;
      }

      .global-search-item {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 8px 10px;
        border-radius: 6px;
        color: #1d2129;
        cursor: pointer;
        transition:
          background 0.15s,
          color 0.15s;
        position: relative;
      }

      .global-search-item:hover,
      .global-search-item.focused {
        background: #f2f3f5;
        color: #165dff;
      }

      .global-search-item-project-header {
        font-weight: 500;
        background: transparent;
      }

      .global-search-project-subitems {
        padding: 2px 6px 6px 20px;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .global-search-subitem {
        font-size: 13px;
        color: #4e5969;
        padding: 6px 8px;
        border-radius: 6px;
      }

      .global-search-subitem:hover,
      .global-search-subitem.focused {
        background: #ffffff;
        color: #165dff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
      }

      .global-search-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #86909c;
        flex-shrink: 0;
      }

      .global-search-item:hover .global-search-item-icon,
      .global-search-item.focused .global-search-item-icon {
        color: #165dff;
      }

      .global-search-item-title {
        flex: 1;
        font-size: 13.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .global-search-subitem .global-search-item-title {
        font-size: 13px;
      }

      .global-search-item-title mark {
        background: rgba(22, 93, 255, 0.12);
        color: #165dff;
        font-weight: 600;
        border-radius: 2px;
        padding: 0 2px;
      }

      .global-search-item-meta {
        font-size: 11px;
        color: #86909c;
        padding: 2px 7px;
        background: #f2f3f5;
        border-radius: 4px;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .global-search-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 36px 16px;
        color: #86909c;
        font-size: 13px;
        gap: 8px;
        text-align: center;
      }

      @keyframes projectHighlightPulse {
        0% {
          background-color: rgba(22, 93, 255, 0.25);
        }
        50% {
          background-color: rgba(22, 93, 255, 0.12);
        }
        100% {
          background-color: transparent;
        }
      }

      .project-item.search-target-highlight .project-title-row {
        animation: projectHighlightPulse 1.4s ease-out;
      }

      .auth-overlay {
        position: fixed;
        inset: 0;
        z-index: 300;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(10, 12, 10, 0.78);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.2s ease,
          visibility 0.2s ease;
      }

      .auth-overlay.show {
        opacity: 1;
        visibility: visible;
      }

      .auth-dialog {
        position: relative;
        width: min(420px, calc(100vw - 32px));
        min-height: 486px;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
        transform: translateY(10px) scale(0.98);
        transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
        overflow: hidden;
      }

      .auth-overlay.show .auth-dialog {
        transform: translateY(0) scale(1);
      }

      .auth-close,
      .auth-back {
        position: absolute;
        top: 18px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        color: #6b6f76;
        cursor: pointer;
        transition: all 0.18s ease;
        z-index: 2;
      }

      .auth-close {
        right: 18px;
      }

      .auth-back {
        left: 18px;
        display: none;
      }

      .auth-back:not([hidden]) {
        display: flex;
      }

      .auth-brand.auth-brand-hidden {
        visibility: hidden;
        height: 0;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
      }

      #auth-phone-view {
        padding-top: 8px;
        padding-bottom: 28px;
      }

      .auth-phone-mode-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 4px;
        margin-top: 0;
        border-radius: 10px;
        background: #f2f3f5;
      }

      .auth-phone-mode-btn {
        height: 36px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: #86909c;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition:
          background 0.18s ease,
          color 0.18s ease,
          box-shadow 0.18s ease;
      }

      .auth-phone-mode-btn.active {
        background: #ffffff;
        color: #1d2129;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
      }

      .auth-phone-panel {
        display: none;
        margin-top: 14px;
        text-align: left;
      }

      .auth-phone-panel.active {
        display: block;
      }

      .auth-phone-panel .auth-form {
        margin-top: 0;
        gap: 8px;
      }

      .auth-phone-panel .auth-input {
        height: 40px;
      }

      .auth-input-shell {
        position: relative;
      }

      .auth-input-shell .auth-input {
        padding-right: 44px;
      }

      .auth-input-shell.code-field .auth-input {
        padding-right: 96px;
      }

      .auth-input-toggle,
      .auth-input-inline-action {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: transparent;
        color: #86909c;
        cursor: pointer;
        padding: 4px;
        line-height: 0;
      }

      .auth-input-toggle {
        right: 10px;
      }

      .auth-input-inline-action {
        right: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #165dff;
        padding: 6px 8px;
      }

      .auth-input-inline-action:disabled {
        color: #c9cdd4;
        cursor: not-allowed;
      }

      .auth-forgot-row {
        display: flex;
        justify-content: flex-end;
        margin: -2px 0 0;
      }

      .auth-forgot-link {
        border: none;
        background: transparent;
        color: #165dff;
        font-size: 13px;
        cursor: pointer;
        padding: 4px 0;
      }

      .auth-forgot-link:hover {
        color: #0e42d2;
      }

      .auth-phone-terms {
        margin: 6px 0 0;
        font-size: 11px;
        line-height: 1.4;
        color: #86909c;
        text-align: center;
      }

      .auth-phone-terms a {
        color: #767a72;
        text-decoration: none;
      }

      .auth-primary-btn.auth-phone-submit-pill {
        margin-top: 6px;
        height: 42px;
        border-radius: 999px;
        border: none;
        background: #165dff;
        font-size: 15px;
        font-weight: 600;
      }

      .auth-primary-btn.auth-phone-submit-pill:hover {
        background: #0e42d2;
      }

      .auth-primary-btn.auth-phone-submit-pill:disabled {
        background: #c9cdd4;
        color: #ffffff;
      }

      .auth-phone-panel .auth-input {
        border-color: transparent;
        background: #f2f3f5;
      }

      .auth-phone-panel .auth-input:focus {
        border-color: #165dff;
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.12);
      }

      .auth-forgot-view {
        padding-top: 12px;
        text-align: left;
      }

      .auth-forgot-title {
        margin: 8px 0 22px;
        font-size: 18px;
        font-weight: 600;
        color: #1d2129;
        text-align: center;
      }

      .auth-forgot-view .auth-form {
        margin-top: 0;
      }

      .auth-forgot-view .auth-primary-btn.auth-phone-submit-pill {
        margin-top: 20px;
      }

      .auth-forgot-view .auth-input {
        border-color: transparent;
        background: #f2f3f5;
      }

      .auth-forgot-view .auth-input:focus {
        border-color: #165dff;
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.12);
      }

      .auth-close:hover,
      .auth-back:hover {
        color: #11130f;
        background: #f2f3f0;
      }

      .auth-brand {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #11130f;
        font-size: 17px;
        font-weight: 700;
      }

      .auth-brand-mark {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #11130f;
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
      }

      .auth-view {
        display: none;
        padding: 18px 48px 42px;
        text-align: center;
      }

      .auth-view.active {
        display: block;
        animation: authViewIn 0.22s ease both;
      }

      @keyframes authViewIn {
        from {
          opacity: 0;
          transform: translateY(5px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .auth-title {
        font-size: 24px;
        line-height: 1.25;
        font-weight: 600;
        color: #11130f;
      }

      .auth-subtitle {
        margin-top: 9px;
        font-size: 12px;
        color: #92968e;
      }

      .auth-qr {
        width: 164px;
        height: 164px;
        margin: 24px auto 12px;
        padding: 7px;
        display: grid;
        grid-template-columns: repeat(25, 1fr);
        grid-template-rows: repeat(25, 1fr);
        gap: 0;
        background: #ffffff;
        border: 1px solid #dedfdc;
        border-radius: 6px;
        cursor: pointer;
      }

      .auth-qr-cell {
        background: transparent;
      }

      .auth-qr-cell.dark {
        background: #11130f;
      }

      .auth-qr-caption {
        font-size: 11px;
        color: #a1a49e;
      }

      .auth-divider {
        height: 1px;
        margin: 22px 0;
        background: #edeeeb;
      }

      .auth-secondary-btn,
      .auth-primary-btn {
        width: 100%;
        height: 42px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.18s ease;
      }

      .auth-secondary-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #252720;
        border: 1px solid #e0e1de;
        background: #ffffff;
      }

      .auth-secondary-btn:hover {
        border-color: #b9bcb5;
        background: #fafbf8;
      }

      .auth-primary-btn {
        color: #ffffff;
        background: #11130f;
      }

      .auth-primary-btn:hover {
        background: #2a2d25;
      }

      .auth-primary-btn:disabled {
        cursor: not-allowed;
        color: #a4a79f;
        background: #e8e9e6;
      }

      .auth-form {
        margin-top: 28px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .auth-input {
        width: 100%;
        height: 42px;
        padding: 0 13px;
        border: 1px solid #b9bcb5;
        border-radius: 6px;
        background: #ffffff;
        color: #11130f;
        font-size: 14px;
        transition:
          border-color 0.18s ease,
          box-shadow 0.18s ease;
      }

      .auth-input:focus {
        border-color: #11130f;
        box-shadow: 0 0 0 3px rgba(17, 19, 15, 0.08);
      }

      .auth-error {
        min-height: 18px;
        margin-top: 8px;
        font-size: 12px;
        color: #d54941;
        text-align: left;
      }

      .auth-terms {
        margin: 4px 0 18px;
        font-size: 11px;
        color: #a1a49e;
      }

      .auth-terms a {
        color: #767a72;
        text-decoration: none;
      }

      .auth-bind-view {
        padding-top: 24px;
      }

      .auth-bind-wordmark {
        margin: 0 auto 52px;
        color: #211817;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 42px;
        font-weight: 700;
        letter-spacing: -2.5px;
      }

      .auth-bind-copy {
        margin-bottom: 22px;
        text-align: left;
      }

      .auth-bind-copy .auth-title {
        font-size: 18px;
        font-weight: 700;
      }

      .auth-bind-copy .auth-subtitle {
        margin-top: 6px;
        font-size: 12px;
      }

      .auth-field-label {
        display: block;
        margin: 0 0 8px;
        color: #3c4038;
        font-size: 12px;
        font-weight: 600;
        text-align: left;
      }

      .auth-required {
        color: #e0524d;
      }

      .auth-bind-form {
        margin-top: 0;
      }

      .auth-bind-form .auth-code-row {
        margin-top: 12px;
      }

      .auth-bind-form .auth-primary-btn {
        margin-top: 16px;
        background: #0739b6;
      }

      .auth-bind-form .auth-primary-btn:hover {
        background: #052d91;
      }

      .auth-return-link {
        display: block;
        margin: 16px auto 0;
        color: #969b9e;
        font-size: 12px;
        cursor: pointer;
      }

      .auth-return-link:hover {
        color: #0739b6;
      }

      .auth-code-row {
        display: none;
        grid-template-columns: 1fr 112px;
        gap: 10px;
      }

      .auth-code-row.show {
        display: grid;
      }

      .auth-code-send {
        border: 1px solid #d8dad5;
        border-radius: 6px;
        color: #3b3e36;
        background: #f6f7f4;
        font-size: 12px;
        cursor: pointer;
      }

      .auth-code-send:disabled {
        color: #a1a49e;
        cursor: not-allowed;
      }

      @media (max-width: 900px) {
        .quick-tags-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .sidebar {
          position: fixed;
          left: -270px;
          top: 0;
          bottom: 0;
        }
        .sidebar.open {
          left: 0;
        }

        .auth-dialog {
          min-height: 470px;
        }

        .auth-view {
          padding-inline: 30px;
        }
      }