/* ========== Token Management Styles (Z.AI Style) ========== */

            /* Tips/Info box */
            body.feature-workitemmanager.pref_profile_settings .ps-tips-box {
                background: var(--wi-bg);
                border: 1px solid var(--wi-border);
                border-radius: 8px;
                padding: 16px 20px;
                margin-bottom: 24px;
            }

            body.feature-workitemmanager.pref_profile_settings .ps-tips-title {
                font-size: 16px;
                font-weight: 600;
                color: var(--wi-text-primary);
                margin-bottom: 8px;
            }

            body.feature-workitemmanager.pref_profile_settings .ps-tips-text {
                font-size: 13px;
                color: var(--wi-text-muted);
                line-height: 1.5;
            }

            /* Token table - Z.AI style */
            body.feature-workitemmanager.pref_profile_settings .ps-token-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 14px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-token-table
                th {
                padding: 12px 16px;
                text-align: left;
                font-weight: 500;
                color: var(--wi-text-muted);
                font-size: 13px;
                border-bottom: 1px solid var(--wi-border);
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-token-table
                td {
                padding: 16px;
                text-align: left;
                border-bottom: 1px solid var(--wi-border);
                color: var(--wi-text-primary);
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-token-table
                tr:last-child
                td {
                border-bottom: none;
            }

            body.feature-workitemmanager.pref_profile_settings .ps-token-name {
                font-weight: 500;
                color: var(--wi-text-primary);
            }

            /* API Key with copy button - Modern card style */
            body.feature-workitemmanager.pref_profile_settings
                .ps-token-key-cell {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            body.feature-workitemmanager.pref_profile_settings .ps-token-key {
                font-family: "Roboto Mono", monospace;
                font-size: 13px;
                color: var(--wi-text-primary);
                background: linear-gradient(
                    135deg,
                    var(--wi-bg) 0%,
                    rgba(59, 130, 246, 0.05) 100%
                );
                padding: 8px 14px;
                border-radius: 8px;
                border: 1px solid var(--wi-border);
                display: flex;
                align-items: center;
                gap: 8px;
                min-width: 180px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-token-key
                .token-prefix {
                color: var(--wi-text-muted);
                font-size: 11px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-token-key
                .token-id {
                color: var(--wi-accent);
                font-weight: 600;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-token-key
                .token-dots {
                color: var(--wi-text-muted);
                letter-spacing: 2px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-token-key
                .token-value {
                color: var(--wi-accent);
                font-weight: 500;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-token-key
                .token-hint {
                color: var(--wi-text-muted);
                font-size: 10px;
                font-style: italic;
                margin-left: 4px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-token-no-copy {
                color: var(--wi-text-muted);
                padding: 8px;
                cursor: help;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-btn-copy-inline {
                background: var(--wi-hover);
                border: 1px solid var(--wi-border);
                color: var(--wi-text-primary);
                cursor: pointer;
                padding: 8px 12px;
                border-radius: 8px;
                transition: all 0.2s ease;
                font-size: 13px;
                display: flex;
                align-items: center;
                gap: 6px;
                white-space: nowrap;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-btn-copy-inline:hover {
                background: var(--wi-accent);
                color: white;
                border-color: var(--wi-accent);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-btn-copy-inline.copied {
                background: #10b981;
                color: white;
                border-color: #10b981;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-btn-copy-inline
                .copy-text {
                font-size: 12px;
                font-weight: 500;
            }

            body.feature-workitemmanager.pref_profile_settings .ps-token-date {
                color: var(--wi-text-muted);
                font-size: 13px;
            }

            /* Delete button - icon only like Z.AI */
            body.feature-workitemmanager.pref_profile_settings .ps-btn-delete {
                background: transparent;
                border: none;
                color: var(--wi-text-muted);
                cursor: pointer;
                padding: 8px;
                border-radius: 4px;
                transition: all 0.15s;
                font-size: 14px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-btn-delete:hover {
                color: var(--wi-danger);
                background: color-mix(
                    in srgb,
                    var(--wi-danger) 10%,
                    transparent
                );
            }

            body.feature-workitemmanager.pref_profile_settings .ps-btn-sm {
                padding: 8px 16px;
                font-size: 13px;
            }

            body.feature-workitemmanager.pref_profile_settings .ps-empty-state {
                text-align: center;
                padding: 48px 32px;
                color: var(--wi-text-muted);
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-empty-state
                i {
                font-size: 48px;
                margin-bottom: 16px;
                opacity: 0.5;
            }

            /* New token display */
            body.feature-workitemmanager.pref_profile_settings
                .ps-new-token-box {
                background: color-mix(in srgb, #10b981 10%, transparent);
                border: 1px solid #10b981;
                border-radius: 8px;
                padding: 16px;
                margin-bottom: 20px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-new-token-label {
                font-size: 13px;
                font-weight: 500;
                color: #10b981;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-new-token-value {
                display: flex;
                align-items: center;
                gap: 8px;
                background: var(--wi-bg);
                border: 1px solid var(--wi-border);
                border-radius: 6px;
                padding: 10px 14px;
                font-family: "Roboto Mono", monospace;
                font-size: 13px;
                color: var(--wi-text-primary);
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-new-token-value
                input {
                flex: 1;
                background: transparent;
                border: none;
                font-family: "Roboto Mono", monospace;
                font-size: 13px;
                color: var(--wi-text-primary);
                outline: none;
            }

            body.feature-workitemmanager.pref_profile_settings .ps-btn-copy {
                background: transparent;
                border: none;
                color: var(--wi-text-muted);
                cursor: pointer;
                padding: 4px 8px;
                border-radius: 4px;
                transition: all 0.15s;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-btn-copy:hover {
                color: var(--wi-accent);
                background: var(--wi-hover);
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-btn-copy.copied {
                color: #10b981;
            }

            /* Create token button - positioned bottom right like Z.AI */
            body.feature-workitemmanager.pref_profile_settings
                .ps-token-actions {
                display: flex;
                justify-content: flex-end;
                margin-top: 20px;
                padding-top: 16px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-btn-create-token {
                background: transparent;
                color: var(--wi-text-primary);
                border: 1px solid var(--wi-border);
                padding: 10px 20px;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 8px;
                transition: all 0.15s;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-btn-create-token:hover {
                background: var(--wi-hover);
                border-color: var(--wi-accent);
            }

            /* Create token form */
            body.feature-workitemmanager.pref_profile_settings
                .ps-create-token-form {
                display: none;
                background: var(--wi-bg);
                border: 1px solid var(--wi-border);
                border-radius: 8px;
                padding: 20px;
                margin-bottom: 20px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-create-token-form.show {
                display: block;
            }

            body.feature-workitemmanager.pref_profile_settings .ps-inline-form {
                display: flex;
                gap: 12px;
                align-items: flex-end;
                flex-wrap: wrap;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-inline-form
                .ps-form-group {
                margin-bottom: 0;
                flex: 1;
                min-width: 200px;
            }

            body.feature-workitemmanager.pref_profile_settings
                .ps-inline-form
                .ps-form-group.small {
                flex: 0 0 150px;
                min-width: 150px;
            }

            @media (max-width: 768px) {
                body.feature-workitemmanager.pref_profile_settings
                    .ps-token-table {
                    display: block;
                    overflow-x: auto;
                }

                body.feature-workitemmanager.pref_profile_settings
                    .ps-inline-form {
                    flex-direction: column;
                }

                body.feature-workitemmanager.pref_profile_settings
                    .ps-inline-form
                    .ps-form-group,
                body.feature-workitemmanager.pref_profile_settings
                    .ps-inline-form
                    .ps-form-group.small {
                    flex: 1;
                    width: 100%;
                    min-width: 100%;
                }
            }